# React Native

You can use this plugin for all React Native games.

## Connecting plugin to your project.

To obtain the plugin please connect with us.

Then just import these:

```javascript
import { service } from "react-native-ecsc-plugin";
import ESCSbutton from "react-native-ecsc-plugin/components/button";
import ESCSWebview from "react-native-ecsc-plugin/components/webView"; 
```

You can use ESCSButton and ESCSWebView as your regular react components in JSX like this:

```jsx
<ESCSWebView></ESCSWebView>
<ESCSButton visible={true}></ESCSButton>
```

## Integrating plugin into your game.

### Initialization

To start using your plugin you need first initialize it:

```javascript
service.invokeManaged({
    public_key: '3dd48bec-2e82-4826-8757-fc14d872882d',
    base_url: 'https://api.demo.escs.io',
    player_base_url: 'https://37b35a72-f8d9-48ca-8cd1-e6690c23637c.player.demo.escs.io',
    analyticsEnv: 'prod'
})
```

where:&#x20;

* **`public_key`** - a key that you've obtained in the step 1 of the integration guide
* **`base_url`** - url for the core ESCS service. It is <https://api.escs.io> for production environment
* **`player_base_url`** -  the URL for the view you created in the [first step of the integration](https://docs.escs.io/integration-step-1), like this one `https://37b35a72-f8d9-48ca-8cd1-e6690c23637c.player.demo.escs.io`  (without "demo" on production)
* **`analyticsEnv`**- environment to use for analytics reporting

### Start/End Game

After that you are all set and ready to use ESCS functionality. To start a game's round, just call `startGame()` method:

```javascript
service.startGame()
```

When the round of your game has ended, just call  `endGame()` with score parameter:

```javascript
service.endGame(score)
```

Probably you would like some additional layer of security sending game results to a server, so you can use encrypted transfer (using symmetric cryptographic key):

```
service.endGameEncrypted(key, avgTime);
```

where **key** - is a function, that returns a string key when called. This key you should obtain in your client dashboard described in [Anti-Cheat services](https://docs.escs.io/anti-cheat-services#encryption) - look up the "front secret key".

We recommend to obfuscate your key and not store it as a value - that is why `endGameEncrypted` is expecting a function, not a value. For example, you can obfuscate string values here: <https://anseki.github.io/gnirts/>

## Optional steps

### Hiding ESCS button

Most of the time you will not want to show the ESCS button during the actual game, to not mess with the gameplay, for example user can accidentally touch it and almost full-screen webview will show up. To hide the button you can use its `visible` property.

```jsx
<ESCSButton visible={false}></ESCSButton>
```

### Notifications/Announcements

There are situations, when ESCS needs to show announcements or notifications - for example to promote your game's upcoming championship, or ask user to add credit card, because his/her trial is about to expire. ESCS will open its full WebView automatically to show notification's content, if it's needed. To be able to show these, not interrupting your gameplay and at the times that are not interruptive for user, please call these methods:

```javascript
   service.maybeShowAnnouncements()
   service.maybeShowNotifications()
```

There's internal logic in the plugin to decide whether it needs to show actual notification and announcement, but you should place these calls whenever you feel that interruption with ESCS WebView window is okay for user experience.&#x20;

***Please note*** that it does **not** mean that user will see notification or announcement **every time** you call these methods. We are trying for those to be as subtle and fluent as possible for end user. Their names imply that notification/announcement just **maybe** will be shown.

### Additional Considerations

There are often situation when you want to respond somehow to the ESCS service state. You can use `getStatus()` method:

```javascript
service.getStatus()
```

which will return object like this:

```javascript
{
    loggedIn, // true / false
    initialized, // true / false
    subscription, //active subscription object
}
```

### Logging out

Sometimes you want to log out the user out of the ESCS programmatically, for example when the user logs out of the game. You can use the following call for this:

```
service.sendEvent("requestUserLogout", "true")
```