Hi there! My name’s JP, and I’m a developer working with Twitter’s Fabric SDK and React Native.
Full disclosure: I don’t work for Twitter, and I’m not sure the team would encourage using Fabric in the way I’m about to show you. But they’re a very friendly bunch, so I’m sure they’d be happy to chime in if you ask nicely.
There was a question from @ramsundark5 on the Twitter Dev Forums about using Digits with React Native, so I thought I’d illustrate how to do it.
There’s barely anything out there about using Fabric with React Native right now, so I’m going to explain everything as we go along.
If you’d prefer to just skip to the code, an open-source implementation is available here https://github.com/JeanLebrument/react-native-fabric-digits
UPDATE: May 9th, 2016
I’ve written a follow-up post detailing how to get session data back from your Digits button
UPDATE: May 10th, 2016
After an additional help request, I decided to deprecate my original repository and direct everyone to Jean Lebrument ’s fork. It incorporates changes from several people, including Android support and the session details.
That said, in my opinion I think the content of this post and it’s follow-up is still relevant in an educational context — especially if you’re trying to get your head around the concepts involved in linking to Native Modules.
Init
So the first thing we need to do is create our React Native project. Follow the installation instructions, then open a Terminal and type in
react-native init MyDigitsDemo
If you’ve never used React Native before, what this does is set up a skeletal project structure for you. Sit back, and let it do its thing.
Once it’s finished, you’ll have a project ready for you to open in Xcode. To check everything’s working normally, go ahead and hit Command+R after opening the project.
The first time you do this, it can take a short while because the React Packager (which will automatically run in a new window) needs to do some behind-the-scenes building and transformation.
After a few more seconds, the Simulator should open with the default React Native greeting.
Integrating Fabric
Ok cool, so we’ve got our React Native project up and running. The next piece of the puzzle is Fabric, Twitter’s SDK.
If you’ve never used it before, boy are you in for a treat. It’s super easy to use, and it lets you get up and running fast. And I mean fast!
If you need to install it, grab it now from getfabric.io. Open up the Fabric app, and point it to your Xcode project.
Follow the instructions it gives you. You’ll be asked to copy and paste a unique identifier to your Xcode project as a new Run Script build phase, and then it will ask you to build the project by pressing Command+B.
The final step of integrating Fabric is dragging the Frameworks over to your project directory. Yep, that’s right — this is an SDK you integrate by dragging and dropping!
If you’ve used Fabric before, you’ll know that so far it’s all business as usual. Which is great news, because it’s pretty awesome!
Creating a native Digits Auth Button
Ok, so we’ve got our app going and integrated Fabric with React Native. The cool thing here is that so far, we haven’t done anything special. In fact, there’s really nothing special going on here, even in the finished demo.
That’s because at its core, React Native is built to use Objective-C — something which Fabric supports with or without React Native on top of it.
So the key concept here is that we’re going to create a native View which only contains a Digits button, and then handle the display of that using React Native.
From the Xcode menu, select File > New > File, and choose iOS Cocoa Touch Class. Call it DGTAuthenticateButtonView as below.
Open the DGTAuthenticateButtonView.h file and add the following lines to your header:
#import “RCTBridge.h”
#import “RCTEventDispatcher.h”
#import “UIView+React.h”I won’t go into detail on what each of these do, but the gist is they’re required to expose your native button view to the React Native Bridge, as well as send the events back and forth.
That’s it for the header — now open up DGTAuthenticateButtonView.m
Add this line within your implementation:
RCT_EXPORT_MODULE()That line instructs the React Bridge to add this class as a native module, so that we can require() it from the JavaScript side later on. But we need to export a View, so add this placeholder in:
-(UIView*) view {}
Right, now. The actual button.
Back in the Fabric app, click into Digits and click Sign In button. You’ll need to add the import statement for DigitsKit to DGTAuthenticateButtonView.m, and go ahead and copy the code Fabric gives you into that View placeholder you just created.
There’s only one tiny change we need to make to Fabric’s sample code. At the end of what you copied, remove:-
authButton.center = self.view.center;
[self.view addSubview:authButton];Because the button is wrapped up inside it’s own view, all you need to do is return it instead.
return authButton;Believe it or not, um… that’s literally it for the Objective-C side. We’re done with Fabric for this demo, but if you want to you can go ahead and make other View classes for other Fabric kits.
Might I suggest integrating TwitterKit for a Login With Twitter button too? :)
Meanwhile, in JavaScript…
Because we added that RCT_EXPORT_MODULE() line to our native view, the React Bridge will pick it up and make it available in JavaScript.
Create a new JavaScript file in your project called DigitsAuthenticateButton.js.
You’ll need to require React, Stylesheet, and requireNativeComponent (which is built into React Native). Once you’ve added those, you can import your native view with one line:
var DGTAuthenticateButtonView = requireNativeComponent(‘DGTAuthenticateButtonView’, DGTAuthenticateButtonView);So that’s how we get our native button view into our JavaScript, and now all we need to do is wrap it in a render function.
var DigitsAuthenticateButton = React.createClass({
render: function() {
return (
<DGTAuthenticateButtonView
style={styles.DigitsAuthenticateButton} />
);
}
});module.exports = DigitsAuthenticateButton;
Note the style prop here — you can use this to easily resize or recolor your Digits button however you want.
The Finishing Touch
So to recap, we’ve:
- made a React Native app
- integrated Fabric
- made a native Digits button
- exported that to the React Native Bridge as a View
- added a JavaScript component for our exported View
The very last step is to add
var DigitsAuthenticateButton = require(‘./DigitsAuthenticateButton’);and
<DigitsAuthenticateButton />to your index.ios.js file.
Of course, this is just the sample button. But the good news is that it is a normal Digits button, so plugging it into the rest of your app on the Objective-C side is really easy!
So I hope this helped! I know when I was getting started something like this guide would have been a huge time-saver. If you have any questions or comments, please leave them below or you can get me @jpdriver on Twitter.
Peace out.
