react-native-fabric-digits
react-native-fabric-digits copied to clipboard
Fabric Digits wrapper for React-Native
react-native-fabric-digits
Introduction
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
Before Installing
- Open your React Native app in Xcode / Android Studio / similar
- Install DigitsKit (the same way you would for non-React Native projects)
For iOS apps, you can install DigitsKit either through the Fabric OS X app or CocoaPods
For Android apps, you can install DigitsKit either through the Fabric IDE plugin or Gradle
Don't forget about initializing Fabric using with
method!
Install
npm install JeanLebrument/react-native-fabric-digits --save
Either Link with RNPM... (Automatic)
-
npm install rnpm -g --save
-
rnpm link react-native-fabric-digits
...or Link (Manual)
iOS procedure
- 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
Android procedure
In settings.gradle
Add to bottom:
include ':react-native-fabric-digits'
project(':react-native-fabric-digits').projectDir = new File(settingsDir, '../node_modules/react-native-fabric-digits/android')
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-fabric-digits') <--- ADD THIS
}
In MainActivity.java
import com.proxima.RCTDigits.DigitsPackage; <--- ADD THIS
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DigitsPackage() <--- ADD THIS
);
}
In AndroidManifest.xml
Add this inside the application
tag.
<meta-data
android:name="io.Digits.ApiKey"
android:value="YOUR_API_KEY" />
<meta-data
android:name="io.Digits.ApiSecret"
android:value="YOUR_API_SECRET" />
Styling on Android
On Android, you have to add a custom Digits Theme in your app's styles
resource.
In android/app/src/main/res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- your other app styles here -->
<style name="CustomDigitsTheme" parent="android:Theme.Material.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">#ff398622</item>
<item name="android:colorAccent">#ff398622</item>
</style>
</resources>
See the Digits Android Theming docs for more information: Digits Android Theming
Usage
This package provide two classes: DigitsLoginButton
and DigitsLogoutButton
. You should render
the version that corresponds to the Log In state in your app.
Start with DigitsLoginButton
, then when a user has successfully logged in, swap this out for DigitsLogoutButton
.
Have a look at the Example, which illustrates all the features.
FAQ
What's Digits?
- please see https://get.digits.com. Digits is part of Fabric -- a suite of tools for building mobile apps from Twitter.
Does Digits officially support React Native?
- Not directly on its own. Officially, DigitsKit only supports the native languages (Objective C, Swift, and Java).
- However, React Native has the ability to expose native modules to JavaScript components, which is exactly what this library does.
Can I see the OAuth details that the DigitsAPI returns?
- In our example, the returned OAuth
response
is put into the component state.
Can I see the phone number the user entered?
- Yes! Once a user has logged in, you can call
getSessionDetails()
to get the sessionId and phoneNumber.
Licence
MIT