Embedding with React Native And Flutter app

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.

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,
  },
});

To embed the Flutter app, please click the link below.

Flutter App

←iFrame

Portal Guide→

On this page