Fabric Digits wrapper for React-Native.
Special thanks to the following people/projects:
- jpdriver for his tutorial on how to integrate Digits in a React-Native project.
- thessem for providing the Android support
- react-native-digits for helping me figure out how to package the Android version.
- Corentin S. for providing the basis of the Android implementation in a Stack Overflow answer
npm install proximaio/react-native-fabric-digits --save
- Follow the usual Digits installation procedure on your project, including adding the frameworks and modifying any files
- In the XCode's "Project navigator", right click on your project's Libraries folder ➜
Add Files to <...>
- Go to
node_modules
➜react-native-fabric-digits
➜ios
-> select theRCTDigitsManager.xcodeproj
- Go to
Build Phases
tab of your project, select a target, openLink Binary With Libraries
, click on+
and addlibRCTDigitsManager.a
Add to bottom:
include ':react-native-fabric-digits'
project(':react-native-fabric-digits').projectDir = new File(settingsDir, '../node_modules/react-native-fabric-digits/android')
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 com.proxima.RCTDigits.DigitsPackage; <--- ADD THIS
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DigitsPackage() <--- ADD THIS
);
}
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" />
This package provide three classes: DigitsLoginButton
, and DigitsLogoutButton
.
You can simply use the login and logout buttons provided to trigger the authentication
or logout
flows as bellow:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var Digits = require('react-native-fabric-digits');
var { DigitsLoginButton, DigitsLogoutButton } = Digits;
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var Test = React.createClass({
getInitialState: function() {
return { logged: false, error: false, response: {} };
},
completion: function(error, response) {
if (error && error.code !== 1) {
this.setState({ logged: false, error: true, response: {} });
} else if (response) {
var logged = JSON.stringify(response) === '{}' ? false : true;
this.setState({ logged: logged, error: false, response: response });
}
},
render: function() {
var error = this.state.error ? <Text>An error occured.</Text> : null;
var content = this.state.logged ?
(<View>
<Text>
Auth Token: {this.state.response.authToken}{'\n'}
Auth Token Secret: {this.state.response.authTokenSecret}{'\n\n'}
</Text>
<DigitsLogoutButton
completion={this.completion}
text="Logout"
buttonStyle={styles.DigitsAuthenticateButton}
textStyle={styles.DigitsAuthenticateButtonText}/>
</View>) : (<DigitsLoginButton
options={{
title: "Logging in is great",
phoneNumber: "+61",
appearance: {
backgroundColor: {
hex: "#ffffff",
alpha: 1.0
},
accentColor: {
hex: "#43a16f",
alpha: 0.7
},
headerFont: {
name: "Arial",
size: 16
},
labelFont: {
name: "Helvetica",
size: 18
},
bodyFont: {
name: "Helvetica",
size: 16
}
}
}}
completion={this.completion}
text="Login (Do it)"
buttonStyle={styles.DigitsAuthenticateButton}
textStyle={styles.DigitsAuthenticateButtonText}/>);
return (
<View style={styles.container}>
{error}
{content}
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
DigitsAuthenticateButton: {
height: 50,
width: 230,
backgroundColor: '#13988A',
justifyContent: 'center',
borderRadius: 5
},
DigitsAuthenticateButtonText: {
fontSize: 16,
color: '#fff',
alignSelf: 'center',
fontWeight: 'bold'
}
});
AppRegistry.registerComponent('Test', () => Test);
MIT