react-native-mini-app-view v2.0.3

react-native-mini-app-view

Getting started

$ yarn add react-native-mini-app-view

Mostly automatic installation

$ react-native link react-native-mini-app-view

Usage

import React, { Component } from "react";
import {
  ActivityIndicator,
  Alert,
  Button,
  StyleSheet,
  Text,
  View,
  Dimensions,
} from "react-native";
import { MiniAppView } from "react-native-mini-app-view";

const DEVICE_HEIGHT = Dimensions.get("screen").height;
const DEVICE_WIDTH = Dimensions.get("screen").width;

interface Props {
  navigation: any;
}

interface State {
  isLoading: boolean;
}

class DemoScreenComponent extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isLoading: true,
    };
  }

  renderLoading = () => {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={"blue"} />
        <Text>Loading JS bundle...</Text>
      </View>
    );
  };

  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading && this.renderLoading()}
        <MiniAppView
          style={{ flex: 1 }}
          bundleAssetName="Path to main.jsbundle mini app. Example: demo_module/main"
          mainComponentName="Main component is appName in your app.json"
          launch={true}
          onBackPressed={() => this.props.navigation.goBack()}
          onViewLoaded={() => {
            this.setState({ isLoading: false });
          }}
          onNavigate={(name: string) => {
            this.props.navigation.navigate(name);
          }}
        />
      </View>
    );
  }
}

const DemoScreen = DemoScreenComponent;

export default ChatScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    position: "absolute",
    width: DEVICE_WIDTH,
    height: DEVICE_HEIGHT,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFFFFF",
  },
});