Ramper Documentation
  • 🌟WELCOME
  • 👨‍💻Developer Guide
    • Developer Dashboard
  • 🔐EMBEDDED WALLET SDK
    • Quickstart
      • For Web Apps
        • Multichain Supported
          • Wallet Integration
          • Approve NFT
          • Approve Token
          • Sign Typed
        • Get Started on Viction
      • For Unity Apps
      • For Telegram Mini Apps
        • Set up Telegram bot
        • Implement Ramper Telegram SDK
      • For React Native Apps
        • Installation
        • Getting Started
        • Wallet Integration
        • Sign Typed
        • Approve
    • Terms & Conditions
    • Privacy Policy
  • 💜RAMPER WALLET
    • About Ramper Wallet
    • 📖User Guides
      • Authentication
      • How to send NFTs
      • How to sign in to a new account
      • Wallet settings
      • How to Send & Receive tokens
      • How to add custom tokens
      • Manage Tokens
      • General settings
      • How to send assets via email
      • How to use Vault
      • How to send assets via OneID
      • How to migrate accounts from Old version to New version
    • ❓User FAQs
      • Which networks are supported on Ramper?
      • What social accounts can I use to log in to Ramper?
      • What is the difference between a Password and a Passphrase?
      • Zero-gas transactions
      • Does Ramper hold my funds?
      • Can I import my wallet from Ramper to another Web3 wallet?
      • Can I import my wallet to Ramper?
      • Why can't I see my assets?
      • What is gas fee?
      • Can I get my assets back if I send them to the wrong addresses?
      • I forgot the password of my social accounts. How can I access my funds on Ramper?
      • What happens if my social account is compromised?
      • Can I recover my wallet if I lose my social account?
      • Can I change the email that is associated with my wallet address?
      • I can't find the answer to my question. How can I get support?
      • What is a Protected Account?
      • I forgot the PIN code to log in to Ramper Wallet. How can I access my funds?
      • Which email domains are blocked?
    • Ramper Wallet (Extension) Integration
      • EVM Dapp Integration
      • Sei Dapp Integration
    • Privacy Policy
    • Terms of Service
  • 💸NFT CHECKOUT SDK
    • About Ramper NFT Checkout
    • Get Started on EVM
    • Get Started on NEAR
    • Setting Up Your Collection
    • Moving Your Collection to Production
    • Purchase History
    • Terms of Service
    • Privacy Policy
  • Import
Powered by GitBook
On this page
  • Install peer dependencies
  • Step 1
  • Step 2
  • Run your app
  • Usage
  • Authentication
  • Wallet View
  • Step 1
  • Step 2
  • Step 3
  1. EMBEDDED WALLET SDK
  2. Quickstart
  3. For Web Apps
  4. Version 1
  5. CONNECT MOBILE SDK

Get Started on Mobile

Ramper's React Native SDK helps developers provide easy access to the Blockchain for non-native crypto users through their SSO accounts.

Last updated 10 months ago

Installation

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 .

npm

$ npm install @ramper/react-native-core

yarn

$ yarn add @ramper/react-native-core

Install peer dependencies

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 &

Step 1

$ 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 and apply the following steps:

iOS

Add the below code in your AppDelegate.m file

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

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

Android

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

      <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

$ npx react-native run-ios

Android

$ npx react-native run-android

Usage

In your starting file import Ramper as below

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

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

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:

import { RamperScreen } from '@ramper/react-native-core';
<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
/>

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.

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

Auth.signin accepts three parameters:

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.

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

$ yarn add @ramper/react-native-evm

Step 2

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

Step 3

Use the wallet view component like this

<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

Sign out

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

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

Check supported browser props for and

Provider: (google | facebook | twitter | apple) browserProps (optional): check supported browser props for and

Please refer to for transaction instructions

🔐
https://reactnative.dev/docs/environment-setup
react-native-inappbrowser-reborn
react-navigation
https://developer.ramper.xyz
iOS
Android
iOS
Android
Transactions