Search
The SuperApp can be embedded inside a React Native app using a WebView component, allowing the full web experience to run seamlessly within the mobile application.
To embed the Flutter app, please click the link below.
On this page
import { useState, useRef } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { WebView } from 'react-native-webview';
export default function App() {
const [url, setUrl] = useState('https://superapp.inspektlabs.com/#<token>');
const webViewRef = useRef(null);
const handleMessage = (event) => {
try {
const data = JSON.parse(event.nativeEvent.data);
if (data?.link) setUrl(data.link);
} catch (e) {
console.log("Message error:", e);
}
};
return (
<View style={styles.container}>
{url && (
<>
<WebView
ref={webViewRef}
style={styles.webview}
source={{ uri: url }}
javaScriptEnabled
domStorageEnabled
geolocationEnabled
allowsInlineMediaPlayback
mediaPlaybackRequiresUserAction={false}
cacheEnabled
onShouldStartLoadWithRequest={() => true}
onMessage={handleMessage}
startInLoadingState
/>
<TouchableOpacity style={styles.closeIcon} onPress={() => setUrl(null)}>
<Icon name="close" size={24} color="#fff" />
</TouchableOpacity>
</>
)}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#000' },
webview: { flex: 1 },
closeIcon: {
position: 'absolute',
top: 35,
left: 10,
zIndex: 1000,
padding: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
borderRadius: 20,
},
});