react-native-digits
v0.3.0
Published
Digits wrapper to use in React Native
Downloads
21
Readme
React Native Digits
Getting Started
Installation
npm install react-native-digits --save
Setup iOS
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
Setup Android
In settings.gradle
Add to bottom:
include ':react-native-digits'
project(':react-native-digits').projectDir = new File(settingsDir, '../node_modules/react-native-digits')
In android/build.gradle
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url 'https://maven.fabric.io/public' } <--- ADD THIS
}
}
In android/app/build.gradle
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
}
In MainActivity.java
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);
}
In AndroidManifest.xml
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" />
Android Custom Theme
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>
Usage
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>
)
}
}
Properties
| 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 |