Getting Started

This is the documentation for the React Native playPORTAL SDK. The SDK is available on our GitHub page, found here.

This is an alpha release. This SDK supports basic features.

Installation - Guide

Create a react-native app (if app doesn't exist)

$ react-native init yourapp

This will walk you through creating a new React Native project in yourapp working directory, e.g. /Users/x/ReactNative/yourapp Installing react-native...

  • react-native@0.56.0 added 766 packages from 361 contributors and audited 15204 packages in 21.763s found 0 vulnerabilities

Setting up new React Native app in /Users/x/ReactNative/yourapp Installing React...

  • react@16.4.1 added 1 package and audited 15228 packages in 4.435s found 0 vulnerabilities

Installing Jest...

  • babel-preset-react-native@5.0.2

  • babel-jest@23.4.0

  • jest@23.4.1

  • react-test-renderer@16.4.1 added 306 packages from 284 contributors, updated 1 package and audited 39601 packages in 12.27s found 0 vulnerabilities

  • Step 6: Install the playportal SDK

$ npm i playportal

Add Client ID and Client Secret to App

To learn how to generate Client ID and Client Secret keys for your application, read here.

Add the following to the "include" section of your App.js (or other main application module).

  • For the purpose of running yourapp, these keys are in plain text in the file, but for a production app you must store them securely - they uniquely identify your app and grant the permissions to your app as defined in playPORTAL Studio.

React-Native Example

import { PPManager, PPconfigure, PPisAuthenticated, PPgetLoginRoute, PPhandleOpenURL, PPaddUserListener, PPreadData, PPwriteData, PPgetFriends } from './node_modules/playPORTAL/ppsdk/src/PPManager'; // ----------------------------------------------------------------- // Copy your user defines from playPORTAL dev website // ----------------------------------------------------------------- const cid = '<YOUR CLIENT_ID HERE>'; const cse = '<YOUR CLIENT_SECRET HERE>'; const redir = '<YOUR REDIRECT_URI HERE>';
And, in your app startup code, add the initialization to the componentDidMount method:
export default class App extends React.Component { state = { response: {}, }; componentDidMount = () => { PPaddUserListener(AppListener); // configure callback PPconfigure(cid, cse, redir); // do the init }; render() { return <RootStack />; } } ```
  • Step 8: Configure your app for SSO (requires URL redirects aka deep linking)

iOS

In the AppDelegate.m add the import for React-Native deep linking:

#import <React/RCTLinkingManager.h>

In the AppDelegate.m add the following lines (above the @end):

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; }

Android

(coming soon!)

Install the deep linking package for React-Native

$ npm install react-native-deep-linking + react-native-deep-linking@2.1.0 added 1 package from 1 contributor and audited 39661 packages in 5.752s found 0 vulnerabilities

Relink the react-native app

$ react-native link

Running your app

$ cd /Users/x/software/ReactNative/yourapp

To run your app on iOS

$ react-native run-ios
  • or -

Open ios/yourapp.xcodeproj in Xcode Hit the Run button

To run your app on Android

$ cd /Users/x/software/ReactNative/yourapp

NB: Have an Android emulator running (quickest way to get started), or a device connected

$ react-native run-android