Note: this guide is for TwitterKit 3.0 and ReactNatiee 0.42+.

React Native : Twitter Signin

This package provides necessary code to get your social sign in using Twitter works with least pain possible.

Prerequisites
Setup
Usage
Todo
Copyright and license
Inspiration

Prerequisites

Go to Twitter Apps to create your app so that you can obtain API key and secret, note:

Remember to set a Callback Url, whatever will work
By default, Twitter won't allow you to grab user's email, so you have to apply for a permission for your app to retrieve user's email

From Twitter Kit 3.0, Fabric is no longer required.

Setup

Firstly, install the npm package:

npm install react-native-twitter-signin --save

iOS

Link RNTwitterSignIn.xcodeproj by running react-native link react-native-twitter-signin
Download TwitterKit 3.0 from here https://ton.twimg.com/syndication/twitterkit/ios/3.0.3-update/TwitterKitManual.zip
Add TwitterKit, TwitterCore and 2 other bundle files into Xcode project
Configure Info.Plist like below, replace <consumerKey> with your own key:

// Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array>

Modify AppDelegate.m to #import <TwitterKit/TwitterKit.h> and handle openUrl

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
  return [[Twitter sharedInstance] application:app openURL:url options:options];
}

Android

Run react-native link react-native-twitter-signin, or:

On Android, it will use Gradle so all you need to do is to point to the correct project location:

In your ${project_dir}/android/settings.gradle add this:

include ':react-native-twitter-signin'
project(':react-native-twitter-signin').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-twitter-signin/android')

In your ${project_dir}/android/app/build.gradle add this:

depedencies {
   ...
   compile project(':react-native-twitter-signin')
   ...
}

In you MainApplication.java makes use of the package as following:

        /**
        * A list of packages used by the app. If the app uses additional views
        * or modules besides the default ones, add more packages here.
        */
        @Override
        protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
             new FacebookLoginPackage(),
             new TwitterSigninPackage(),
             new RNGoogleSigninPackage(this),
             new VectorIconsPackage(),
             new RNSvgPackage()
           );
         }

Keeps in mind that all the configure is for your build tools to recognise the files. So open your Xcode and Android Studio to try making builds and make sure they pass.

Public API

1. TwitterSigninButton

import { TwitterSignIn, TwitterSigninButton } from 'react-native-twitter-signin';

render() {

  <TwitterSigninButton
    style={{width: 48, height: 48}}
    size={40}
    successLogin={(user) => this.setState({ user })}
    errorLogin={(error) => this.setState({ error })}
    logOut={() => this.setState({ user: null })}
  />
}

2. TwitterSignin

import {TwitterSignIn, TwitterSigninButton} from 'react-native-twitter-signin';

- configure

It is mandatory to call this method before login.

Example for default configuration.

import { TwitterSignIn } from 'react-native-twitter-signin';

TwitterSignIn.init(ComsumerKey,ComsumerSecret)
.then(() => {
});

** Note**: (ComsumerKey, ComsumerSecret) are always required

- logIn

Prompt the modal to let the user signin into your application

TwitterSignin.logIn()
.then((user) => {
  console.log(user);
  this.setState({user: user});
})
.catch((err) => {
  console.log('WRONG SIGNIN', err);
})
.done();

- logOut

remove user session from the device

TwitterSignin.logOut()
.then(() => {
  console.log('out');
})
.catch((err) => {

});

3. User

This is the typical information you obtain once the user sign in:

  {
    authToken: <needed to access Twitter API from the
    authTokenSecret
    name: <user Full name>
    userID: <user id.>
    userName: <user name>
    email: <user email>
  }

Usage

See the Example project.

Todo

The code was extracted from my project so it satisfies my current need, if you need extra functions, feel free to submit to issue list or fork it.

kottidev / react-native-twitter-signin Goto Github PK