Rn_addtoapp_bridge NPM

rn_addtoapp_bridge

react-native addtoapp bridge and use shared single engine.

features

react-native

RNAddtoappBridge.tsx
- RNAddtoappBridge.nativeModule
- RNAddtoappBridge.callPlatform -> return null if MissingPluginException
- RNAddtoappBridge.getPlatformVersion
- RNAddtoappBridge.isAddToApp -> check env is default or addtoapp
- RNAddtoappBridge.putString
- RNAddtoappBridge.getString
- RNAddtoappBridge.putLong
- RNAddtoappBridge.getLong
- RNAddtoappBridge.putFloat
- RNAddtoappBridge.getFloat
- RNAddtoappBridge.showToast
- RNAddtoappBridge.exitApp
- RNAddtoappBridge.back -1 to home, if count==1 and all page size == 1, will exit app
- RNAddtoappBridge.openContainer
RNAddtoappBridgeNativeLifecycles.tsx
- RNAddtoappBridgeNativeLifecycles.addNativeLifecyclesListener
- RNAddtoappBridgeNativeLifecycles.removeNativeLifecyclesListener
RNAddtoappBridgeBasePage.tsx
- RNAddtoappBridgeBasePageProperties
  - initialProps
    - uniqueID
    - page
    - params
- getShortUniqueID
- tag
- onPageWillShow
- onPageDidShow
- onPageWillHide
- onPageDidHide
- componentWillUnmount

android

setOnGlobalMethodCall
back
exitApp
sendMessageToRN
isReactContextInitialized
showToast
openContainer
getIntent
activityLinkedHashMapString

ios

setOnGlobalMethodCall
topmostViewController
showToast
sendMessageToRN
runBlockInMainThread
back
exitApp
openContainer
getViewController

Installation

npm install rn_addtoapp_bridge

Usage

import React from 'react';
import { Platform, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNAddtoappBridge, RNAddtoappBridgeBasePage, RNAddtoappBridgeBasePageProperties } from 'rn_addtoapp_bridge';

export default class BridgePage extends RNAddtoappBridgeBasePage {

  constructor(props: RNAddtoappBridgeBasePageProperties) {
    super(props);
    console.log(this.tag(), `constructor page=${props.initialProps.page}`, `params=${props.initialProps.params}`);
  }

  componentDidMount() {
    if (Platform.OS === 'android') StatusBar.setTranslucent(true);
    StatusBar.setBarStyle('light-content', false);
  }

  onPageWillShow() {
    super.onPageWillShow();
  }

  onPageDidShow() {
    super.onPageDidShow();
  }

  onPageWillHide() {
    super.onPageWillHide();
  }

  onPageDidHide() {
    super.onPageDidHide();
  }

  componentWillUnmount() {
    super.componentWillUnmount();
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
        <ScrollView style={styles.root} showsVerticalScrollIndicator={true}>
          <View style={styles.titleBar}>
            <Text style={styles.titleText}>Bridge1</Text>
          </View>
          <TouchableOpacity activeOpacity={0.9} style={styles.item} onPress={() => this.onItemClick('getPlatformVersion')}>
            <Text style={styles.text}>get platform version</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.9} style={styles.item} onPress={() => this.onItemClick('isAddToApp')}>
            <Text style={styles.text}>is add to app</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.9} style={styles.item} onPress={() => this.onItemClick('back')}>
            <Text style={styles.text}>back</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.9} style={styles.item} onPress={() => this.onItemClick('showToast')}>
            <Text style={styles.text}>show toast</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.9} style={styles.item} onPress={() => this.onItemClick('openContainer')}>
            <Text style={styles.text}>open new react-native container</Text>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    );
  }

  onItemClick = (type: any) => {
    switch (type) {
      case 'getPlatformVersion': {
        RNAddtoappBridge.getPlatformVersion().then((result) => {
          console.log('result', result);
          RNAddtoappBridge.showToast(`platform version : ${result}`);
        });
        break;
      }
      case 'isAddToApp': {
        RNAddtoappBridge.isAddToApp().then((result) => {
          console.log('result', result);
          RNAddtoappBridge.showToast(`isAddToApp : ${result}`);
        });
        break;
      }
      case 'back': {
        RNAddtoappBridge.back();
        break;
      }
      case 'showToast': {
        RNAddtoappBridge.showToast('This message is from react-native page');
        break;
      }
      case 'openContainer': {
        RNAddtoappBridge.openContainer('bridge2');
        break;
      }
    }
  };
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#000e2b',
    flex: 1,
    display: 'flex',
  },
  titleBar: {
    height: 48,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleText: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'white',
    fontSize: 22,
    fontStyle: 'normal',
    fontWeight: 'bold',
  },
  item: {
    backgroundColor: '#013b63',
    flex: 5,
    marginBottom: 2.5,
    padding: 15,
  },
  itemEdit: {
    backgroundColor: 'white',
    color: 'black',
    flex: 2,
    fontSize: 15,
    fontStyle: 'italic',
    fontWeight: 'bold',
  },
  itemMulti: {
    flexDirection: 'row',
  },
  root: {
    flex: 1,
    paddingTop: 0,
  },
  text: {
    color: 'white',
    fontSize: 15,
    fontStyle: 'italic',
    fontWeight: 'bold',
    textAlign: 'left',
  },
});