npm install react-native-digits --save
See React Native documentation on Linking Libraries
- Open your project in XCode
- Right click on
Libraries
and clickAdd Files to "YOUR_PROJECT _NAME"
- Add
libRNDigits.a
toBuild Phases -> Link Binary With Libraries
Add to bottom:
include ':react-native-digits'
project(':react-native-digits').projectDir = new File(settingsDir, '../node_modules/react-native-digits')
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url 'https://maven.fabric.io/public' } <--- ADD THIS
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.facebook.react:react-native:0.14.+'
compile project(':react-native-digits') <--- ADD THIS
}
import co.fixt.react.digits.*; <--- ADD THIS
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new RNDigitsModule()) <--- ADD THIS
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "DropBot", null);
setContentView(mReactRootView);
}
Add this inside the application
tag.
<meta-data
android:name="io.fabric.ApiKey"
android:value="YOUR_API_KEY" />
<meta-data
android:name="io.fabric.ApiSecret"
android:value="YOUR_API_SECRET" />
In android/app/src/main/res/values/styles.xml
<resources>
...
<-- Customize this -->
<style name="CustomDigitsTheme" parent="android:Theme.Holo.Light">
<item name="android:textColorPrimary">@android:color/black</item>
<item name="android:textColorSecondary">@android:color/darker_gray</item>
<item name="android:windowBackground">@android:color/white</item>
<item name="android:textColorLink">#000000</item>
<item name="android:colorAccent">#000000</item>
<item name="dgts__accentColor">#000000</item>
</style>
</resources>
import React, { Component } from 'react-native'
import Button from ‘./button’
import Digits from 'react-native-digits'
export default class Login extends Component {
handleDigitsError(err) {
this.setState({showDigits: false})
console.warn(‘Login failed’, err)
}
handleDigitsLogin(credentials) {
this.setState({showDigits: false})
console.log(‘Login successful’, credentials)
}
render() {
return (
<View>
<Button
onPress={ () => this.setState({showDigits: true}) }
>
Login
</Button>
<Digits
accentColor=“#16a085”
backgroundColor=“#ffffff”
onError={this.handleDigitsError.bind(this)}
onLogin={this.handleDigitsLogin.bind(this)}
/>
</View>
)
}
}
Prop | Default | Type | Description |
---|---|---|---|
accentColor | string |
The main color of elements associated with user actions (e.g. buttons). | |
backgroundColor | string |
The background color for all views in the Digits flow. | |
onError | (err) => console.warn(err) |
function |
Callback on error. |
onLogin | function |
Callback on success. credentials are passed back. |
|
visible | false |
bool |
Show the Digits viewController |