-
-
Save unijad/f141edaab7807fe11e6e48bb990ea434 to your computer and use it in GitHub Desktop.
ReactNative: Stably Ramp Websdk inside WebViewWidget and open external links in another Webview example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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>< 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, | |
}} | |
/> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment