@rznet/rz-gamespace-sdk-react-native

This is Ring Zero's react-native SDK for Gamespace @rznet/rz-gamespace-sdk-react-native.

Getting Started

Note: Make sure you install all required dependencies and setup Google Admob and Appodeal SDK to implement the SDK in your React-Native app.

Step 1: Install dependencies

Install Required Dependencies

First you need to install all dependcies that the SDK make use of. Below are the list of dependencies - (You may skip those that you have already installed)

{
	"@react-native-async-storage/async-storage": "^1.21.0",
  "@react-native-community/netinfo": "^11.1.1",
  "@react-navigation/bottom-tabs": "^6.5.9",
  "@react-navigation/native": "^6.1.8",
  "@react-navigation/stack": "^6.3.18",
  "@reduxjs/toolkit",
  "axios": "^1.5.1",
  "dayjs": "^1.11.10",
  "react": "18.2.0",
  "react-native": "0.73.1",
  "react-native-animatable": "^1.3.3",
  "react-native-config": "^1.5.1",
  "react-native-device-info": "^10.11.0",
  "react-native-encrypted-storage": "^4.0.3",
  "react-native-gesture-handler": "^2.13.4",
  "react-native-google-mobile-ads": "^12.3.0",
  "react-native-localize": "^3.0.3",
  "react-native-progress": "^5.0.1",
  "react-native-responsive-fontsize": "^0.5.1",
  "react-native-safe-area-context": "4.6.3",
  "react-native-screens": "^3.29.0",
  "react-native-sensitive-info": "^6.0.0-alpha.9",
  "react-native-svg": "^13.14.0",
  "react-native-vector-icons": "^10.0.2",
  "react-native-video": "^5.2.1",
  "react-native-webview": "^13.6.4",
  "react-redux": "^8.1.3",
  "redux": "^4.2.1",
  "redux-persist": "^6.0.0",
  "redux-thunk": "^2.4.2"
}

Install SDK

Then install our latest SDK

npm i @rznet/rz-gamespace-sdk-react-native

Step 2: Setup Admob and Appodeal

For Android

First go to app.json in your root projectand add this

{
  ...
  "react-native-google-mobile-ads": {
    "android_app_id": "YOUR_ADMOB_APP_ID"
  }
}

Second go to android/build.gradle and put these lines of code after buildScript

buildscript {
	...
}

allprojects {
    repositories {
	    google()
	    mavenCentral()
    }
}

apply plugin: "com.facebook.react.rootproject"

After that go to android/app/build.gradle and add these lines of code

android {
   ...
    defaultConfig {
        ...
        multiDexEnabled  true
    	...
    }
    ...
    }
    buildTypes {
      ...
    }
}
dependencies {
    ...
    implementation "com.android.support:multidex:1.0.3"
    implementation 'com.google.android.gms:play-services-ads:22.5.0'
   	...
}

Finally inside Android.xml file inside android/app/src/main/Android.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <application
     ...
      android:allowBackup="true"
      ...
	  >
      ...
       <meta-data
          android:name="com.google.android.gms.ads.APPLICATION_ID"
          android:value="YOUR_ADMOB_APP_ID" />
    </application>
</manifest>

For iOS

iOS version for the SDK is not supported for now.

Step 3: Setting up config and fonts

Config

you may configure how to use react-native-config as you like but you have to put your AWS access keys to your .env

AWS_ACCESS_KEY_ID="************"
AWS_ACCESS_SECRET="************************"

You also have to add

GS_APP_CONFIG="development"

to configure how you want to initialize appodeal ( development === testing )

Fonts

Put Bungee-Regular.otf and Bungee-Regular.ttf inside your fonts folder and than run

npx react-native-asset

Step 4 Component Integration

If it is from stampee app you need to pass user token to login as stampee user, otherwise you don't need to pass it.

<RZGamespace
backendURL={YOUR_API_URL}
accessKey="*******************"
platformId="******-****-****-****-******"
admobRewardedAdUnitId="******-****-****-****-******"
stampeeUserToken={token}
ref={gsRef}
navigateBack={handleGoBackPress}
/>

You can ref the component to access rzLogout() function from Gamespace.

const gsRef = useRef<RZGameSpaceRef>(null); //gsRef?.current.rzLogout();

Stampee only

You can aslo pass callback function to navigateBack to tell what the exit butto should do

  const handleGoBackPress = () => {
    navigation.navigate('Tab');
  };

Congratulations! 🎉

That's it enjoy your RZ Gamespace!