# rn_addtoapp_bridge

> test

Latest version **0.1.6** (published 2022-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn_addtoapp_bridge
pnpm add rn_addtoapp_bridge
yarn add rn_addtoapp_bridge
bun add rn_addtoapp_bridge
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2022-08-30 |
| First published | 2022-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 172.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kr.mao |
| Maintainers | krmao |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/rn_addtoapp_bridge
- Repository: https://github.com/krmao/rn_addtoapp_bridge
- Homepage: https://github.com/krmao/rn_addtoapp_bridge#readme
- Issues: https://github.com/krmao/rn_addtoapp_bridge/issues
- npm.io page: https://npm.io/package/rn_addtoapp_bridge

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2022-08-30
- 0.1.5 — 2022-08-28
- 0.1.4 — 2022-08-28
- 0.1.3 — 2022-08-28
- 0.1.2 — 2022-08-28
- 0.1.1 — 2022-08-22

## README

# [rn_addtoapp_bridge](https://www.npmjs.com/package/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

```sh
npm install rn_addtoapp_bridge
```

## Usage

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

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---
_Source: https://npm.io/package/rn_addtoapp_bridge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._