# React Native SDK

**Step 1** : Install react-native-video package

Using npm:

```
npm i react-native-video --save
```

Using yarn:

```
yarn add react-native-video
```

Documentation link:   

{% embed url="<https://www.npmjs.com/package/react-native-video>" %}

**Step 2** : Add video tag to Main.js or App.js

Code Sample:

```
import React, {useEffect, useState} from 'react';
import Video from 'react-native-video';
import {
  SafeAreaView,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
function Main({navigation}) {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsVisible(true);
      setTimeout(() => {
        setIsVisible(false);
      }, 5000);
    }, 10000);
    return () => clearInterval(interval);
  }, []);

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <View style={styles.content}>
          <Text>Content</Text>
        </View>
        <View style={styles.widgetContainer}>
          {isVisible && (
            <View style={styles.textContainer}>
              <Text style={styles.overlayText}>Tap to Navigate</Text>
            </View>
          )}
          <View
            style={styles.videoContainer}
            onStartShouldSetResponder={() => navigation.navigate('WebPage')}>
            <Video source={{
                uri: 'https://client-static.saleassist.ai/2953b7d7-fdf5-4cfd-b4e1-5808863a5f74/VAISHNAVIRAOEDIT-HV.mp4',
              }}
              ref={ref => {
                this.player = ref;
              }}
              muted={true}
              style={styles.video}
              onBuffer={this.onBuffer}
              onError={this.videoError}
              resizeMode={'cover'}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    height: '100%',
  },
  content: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  videoContainer: {
    borderRadius: 100,
    height: 100,
    width: 100,
    backgroundColor: 'white',
    overflow: 'hidden',
    marginLeft: 'auto',
  },
  widgetContainer: {
    bottom: 10,
    right: 10,
    position: 'absolute',
    overflow: 'hidden',
  },
  video: {
    width: '100%',
    height: '100%',
  },
  overlayText: {
    fontSize: 11,
  },
  textContainer: {
    padding: 10,
    margin: 10,
    backgroundColor: 'white',
    borderRadius: 10,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.5,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

export default Main;
```

**Step 3** : Install react-native-webview Package

Using npm:

```
npm i react-native-webview --save
```

Using yarn:

```
yarn add react-native-webview
```

Documentation link:&#x20;

{% embed url="<https://www.npmjs.com/package/react-native-webview>" %}

**Step 4** : Create WebPage.js

Code Sample:

```
import React from 'react';
import {WebView} from 'react-native-webview';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  useColorScheme,
  View,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function WebPage({navigation}) {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <WebView
          source={{
            uri: 'https://jump-stg.saleassist.ai/source/1759ad2b-9059-4f74-ba1b-41c123493666?open=true',
          }}
          style={{flex: 1}}
        />
        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    height: '100%',
  },
});

export default WebPage;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.saleassist.ai/integration-guide/mobile-sdk-integration/react-native-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.