# Get Started on Mobile

{% hint style="info" %}

## Installation

{% endhint %}

Our `@ramper/react-native-core` library handles authentication for our users through a supported SSO account. Once the user logs in, an ethereum wallet will be created for the user. If you are new to react native, we recommend you set up your environment properly first by visiting <https://reactnative.dev/docs/environment-setup>. &#x20;

#### npm

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

#### yarn

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

### Install peer dependencies&#x20;

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

**Note:** 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

```jsx
$ 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 <https://developer.ramper.xyz> and apply the following steps:

#### iOS

Add the below code in your AppDelegate.m file

```jsx
// 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)

Paste your bundle id in the 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)

#### Android

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

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

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

#### Android

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

## Usage

In your starting file import Ramper as below

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

call configure passing your **appId (required)**, **locale (default: en)**, **chainName (required)** and **authUrl (optional)**

```jsx
Ramper.configure({
  appId: 'appId',
  locale: 'kr' | 'en',
  chainName: 'ethereum',
});
```

## 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:

![](https://2309458538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA4lEcolAe1xxpS9iPO2F%2Fuploads%2F3a59N18XEfEZ241o0Gea%2Fimage.png?alt=media\&token=280d7d55-640b-47d7-a717-5a3fe738fc0e)

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

```jsx
<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.

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

`Auth.signin` accepts three parameters:

**Provider: (google | facebook | twitter | apple)**\
**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)

```jsx
try {
  const user = 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.

```jsx
try {
  const 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

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

### Step 2

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

### Step 3

**Use the wallet view component like this**

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

**Note:** before using this component please make sure that the user is logged in by calling `getUser` method mentioned above.

#### Transactions

Please refer to [#transactions](https://docs.ramper.xyz/embedded-wallet-sdk/quickstart/for-web-apps/version-1/react-native-evm#transactions "mention") for transaction instructions

#### Sign out

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

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