npm package: @rznet/rz-gamespace-sdk-react-native
Description: Gamespace SDK for RN
Author: Aung Chan Oo
Latest version: 0.6.2

﻿This is Ring Zero's react-native SDK for Gamespace [`@rznet/rz-gamespace-sdk-react-native`](https://www.npmjs.com/package/@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)

```bash
{
	"@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 

```bash
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

```bash
{
  ...
  "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
```bash
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

```bash
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 
```bash
<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

```bash
AWS_ACCESS_KEY_ID="************"
AWS_ACCESS_SECRET="************************"
```
You also have to add 
```bash
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 
```bash
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.
```bash
<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.
```bash
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
```bash
  const handleGoBackPress = () => {
    navigation.navigate('Tab');
  };
```
## Congratulations! :tada:

That's it enjoy your RZ Gamespace!