ReactNative: Stably Ramp Websdk inside WebViewWidget and open external links in another Webview example

App.ts

import React from 'react';
import RampWebview from './Ramp';
import Browser from './Browser';
// This is where the navigation code is being imported
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';

// creating stack navigator to handle navigtion between views
const Stack = createNativeStackNavigator();

function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Ramp">
        <Stack.Screen name="Ramp" component={RampWebview} />
        <Stack.Screen name="Browser" component={Browser} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Browser.ts

/**
 * This is Browser Webview component.
 * It is used to render url in a browser.
 * @param {Object} navigation - The navigation object.
 * @returns {React.FunctionComponent} - The Browser Webview component.
 */

import React, {Component} from 'react';
import {TouchableOpacity, Text} from 'react-native';
import WebView from 'react-native-webview';

// This is a custom back button component that will be used to navigate back to the previous screen
const BackButton = ({navigation}: any) => (
  <TouchableOpacity
    onPress={() => {
      navigation.goBack();
    }}>
    <Text>&lt; Back</Text>
  </TouchableOpacity>
);

export default class Browser extends Component {
  // This is a custom navigation bar that will be used as the header for this screen
  static navigationOptions = ({navigation}: any) => ({
    title: 'Browser',
    headerLeft: <BackButton navigation={navigation} />,
  });

  render() {
    // This is the browser screen, which will be used to display the web view
    const {route} = this.props as any;
    const {uri} = route.params;

    return (
      <WebView
        source={{
          uri: uri,
        }}
      />
    );
  }
}

Ramp.ts

/**
 * This is the Ramp Webview component.
 * It is used to render the Ramp iframe in the app.
 * It also handles the redirect to the browser when the iframe redirects to socure.com or plaid.com.
 * @param {Object} navigation - The navigation object.
 * @returns {React.FunctionComponent} - The Ramp Webview component.
 */

import React from 'react';
import {WebView} from 'react-native-webview';

// ...
function RampWebview({navigation}: any) {
  return (
    <WebView
      source={{
        uri: 'https://ramp-beta.stably.io/?integrationId=test_younis_reactnative',
      }}
      onNavigationStateChange={state => {
        console.log(state);
      }}
      onShouldStartLoadWithRequest={request => {
        if (
          request.url !== 'about:blank' &&
          !request.url.includes('stably.io') &&
          (request.url.includes('socure.com') ||
            request.url.includes('plaid.com'))
        ) {
          navigation.navigate('Browser', {
            uri: request.url,
          });
          console.log('open in new browser window here');
          return false;
        }
        return true;
      }}
    />
  );
}

export default RampWebview;