npm package: @ramper/react-native-core
Description: Ramper's React Native SDK helps developers and provide access to the Blockchain through SSO for non-native crypto users.
Author: Ramper
Latest version: 1.0.4

# Ramper SDK for React Native

<b>Note:</b> This SDK is supported on <b>iOS 14</b> and above.

# Installation

### npm

```sh
$ npm install @ramper/react-native-core
```

### yarn

```sh
$ yarn add @ramper/react-native-core
```

## Installing peer dependencies

```sh
$ yarn add query-string react-native-keychain react-native-inappbrowser-reborn @react-native-community/clipboard @react-navigation/bottom-tabs @react-navigation/native @react-navigation/stack accordion-collapse-react-native date-fns react-native-raw-bottom-sheet react-query react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-device-info
```

<b>Note:</b> follow the further installation steps of [react-native-inappbrowser-reborn](https://github.com/proyecto26/react-native-inappbrowser#mostly-automatic-installation) & [react-navigation](https://reactnavigation.org/docs/getting-started/)

## Step 1

```sh
$ cd ios && pod install
```

## Step 2

Secondly, our SDK uses deep links to communicate back with your application. In order to Configure Deep Links, you will need to get an app id by signing up at [deleveroper dashboard](https://developer.ramper.xyz) and apply the following steps:

# iOS

Add the below code in your AppDelegate.m file

```objc
// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}
```

Copy your bundle id as shown in the below screenshot:
![Alt text](https://i.ibb.co/bRPzW40/deep-link-ios-1.jpg '5.2')

Paste your bundle id in identifier section and add ramper\<appId\> in the URI Scheme section:
Make sure to not include the brackets <> in the URLScheme
![Alt text](https://i.ibb.co/0Z5tgwr/deep-link-ios-2.jpg '5.3')

# Android

Add the following in your project/adnroid/app/src/main/AndroidManifest.xml file under <b>Activity</b> Tag

```xml
      <intent-filter>
      <!--  Make sure to not include the brackets <> in the scheme -->
        <data android:scheme="ramper<appId>" />
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
      </intent-filter>
```

## Run your app

### iOS

```sh
$ npx react-native run-ios
```

### Android

```sh
$ npx react-native run-android
```

# Usage

In your starting file import Ramper as below

```js
import { Ramper } from '@ramper/react-native-core';
```

call configure passing your <b>appId (required)</b>, <b>locale (default: en)</b>, <b>chainName (required)</b>

```js
Ramper.configure({
  appId: 'appId',
  locale: 'kr' | 'ko' | 'en',
  chainName: 'ethereum',
  network: 'matic' | 'maticmum' | 'mainnet' | 'ropsten' | 'goerli',
});
```

## Authentication

### Show Sign In Screen
We have a pre-built screen that you can use to display all the sign in options for the customer:

```js
import { RamperScreen } from '@ramper/react-native-core';
```

```js
<RamperScreen
  providers={[
    {
      name: 'google' | 'facebook' | 'twitter' | 'apple',
    },
  ]}
  theme="light | dark"
  onSuccess={(user) => {
    //handle user
  }}
  onFailure={(error) => {
    // handle error
  }}
  onClose={() => {}}
  logo={require('mylogo') | { uri: 'mylogourl' }}
  browserProps // optional
/>
```

Check supported browser props for [iOS](https://github.com/proyecto26/react-native-inappbrowser/#ios-options) and [Android](https://github.com/proyecto26/react-native-inappbrowser/#android-options)

### Signing In Directly
If you want to create a custom Sign In page and only allow the user to sign in with a specific provider, you can invoke the signin method directly instead.

```js
import { Auth } from '@ramper/react-native-core';
```

Auth.signin accecpts two parameters <b>Provider (google | facebook | twitter | apple)</b>, <b>browserProps (optional): check supported browser props for [iOS](https://github.com/proyecto26/react-native-inappbrowser/#ios-options) and [Android](https://github.com/proyecto26/react-native-inappbrowser/#android-options)</b>

```js
try {
  let response = await Auth.signin(
    'google' | 'facebook' | 'twitter' | 'apple',
    browserProps //optional,
  );
  // handle response
} catch (error) {
  // handle error
}
```

### Get User
After a user logs in or on app relaunch, you can call the getUser method to get the currently logged-in user's information.

```js
try {
  let user = await Auth.getUser();
  // handle user
} catch (error) {
  // handle error
}
```

## Wallet View
We also provide a Wallet View that allows your user to see their Ethereum wallet balance and conduct common actions.

## Step 1

```sh
$ yarn add @ramper/react-native-evm
```

<b>Note:</b> follow the further installation instruction of [@ramper/react-native-evm](https://www.npmjs.com/package/@ramper/react-native-evm)

## Step 2

```js
import { WalletView } from '@ramper/react-native-core';
import { EthDataProvider } from '@ramper/react-native-evm';
```

## Step 3

### Use the wallet view component like this

```js
<WalletView
  dataProviders={[{ name: 'ethereum', dataProvider: EthDataProvider }]}
  onCLose={() => {}} // will be called when the user clicks on the close button of wallet view
/>
```

<b>Note:</b> before using this component please make sure that the user is logged in by calling getUser method mentioned above.

## Transactions

Please refer to [@ramper/react-native-evm](https://www.npmjs.com/package/@ramper/react-native-evm) for transaction instructions.

## Sign Out

```js
import { Auth } from '@ramper/react-native-core';

try {
  const signout = await Auth.signOut(
    browserProps //optional
  );
  // handle signout
} catch (error) {
  // handle error
}
```