# Installation

## Install Core Package <a href="#install-core-package" id="install-core-package"></a>

{% tabs %}
{% tab title="npm" %}
{% code title="Install with npm" %}

```jsx
npm install @ramper-v2/native-core
```

{% endcode %}
{% endtab %}

{% tab title="pnpm" %}
{% code title="Install with pnpm" %}

```jsx
pnpm add @ramper/native-core
```

{% endcode %}
{% endtab %}

{% tab title="yarn" %}
{% code title="Install with yarn" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

## Install Peer Dependencies <a href="#install-peer-dependencies" id="install-peer-dependencies"></a>

{% tabs %}
{% tab title="npm" %}
{% code title="Install with npm" %}

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

{% endcode %}
{% endtab %}

{% tab title="pnpm" %}
{% code title="Install with pnpm" %}

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

{% endcode %}
{% endtab %}

{% tab title="yarn" %}
{% code title="Install with yarn" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

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/).

### IOS setup <a href="#ios-setup" id="ios-setup"></a>

{% code title="Setup Podfile for iOS" %}

```jsx
cd ios && pod install
```

{% endcode %}

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 [the developer page](https://developer.v2.ramper.xyz/).

After getting the app id, add the below code in your AppDelegate.m file:

{% code title="AppDelegate.m" %}

```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];
}
```

{% endcode %}

Copy your bundle id as shown in the below screenshot:

![Bundle Id](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbundle-id.efc2da3d.png\&w=3840\&q=75)

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:

<figure><img src="https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Furl-scheme-ios.950a92e8.png&#x26;w=3840&#x26;q=75" alt=""><figcaption></figcaption></figure>

### Android setup <a href="#android-setup" id="android-setup"></a>

Add the following in your `<your-project-path>/android/app/src/main/AndroidManifest.xml` file under Activity Tag

{% code title="Setup deep link for Android platform" %}

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

{% endcode %}

### Run the app <a href="#run-the-app" id="run-the-app"></a>

{% tabs %}
{% tab title="iOS" %}
{% code title="Run the app for iOS" %}

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

{% endcode %}
{% endtab %}

{% tab title="Android" %}
{% code title="Run the app for Android" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}