react-native-fabric-digits v1.0.28
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
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago