Appboxo SDK for React Native

A react native wrapper over Appboxo SDK for IOS and Android.

Getting started:

yarn add @appboxo/react-native-sdk 

or

npm install @appboxo/react-native-sdk 

Next for IOS:

cd ios && pod install

Usage:

import React from 'react';
import appboxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    appboxo.setConfig('[client_id]', false, false);  //set your Appboxo client_id, sandbox mode (by default is "false") and specify multitask mode (by default is "true")
  }, [])

  const handleOpenMiniapp = () => {
    appboxo.openMiniapp('[miniapp_id]', {'key': 'value'});  //launch miniapp by id with data as {[key: string]: any} | undefined that is sent to miniapp.
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});

To listen miniapp lifecycle events:

Important

Miniapp lifecycle events available in 1.0.8+ versions

import React from 'react';
import appboxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    appboxo.setConfig('[client_id]', false, false);  //set your Appboxo client_id, sandbox mode and specify multitask mode (by default is "true")
    
    const subscription = appboxo.lifecycleHooksListener({
      onLaunch: (appId: string) => console.log('onLaunch', appId),  // called when the miniapp will launch with openMiniapp(...)
      onResume: (appId: string) => console.log('onResume', appId),  // called when the miniapp will start interacting with the user
      onPause: (appId: string) => console.log('onPause', appId),    // called when clicked close button in miniapp or when destroyed miniapp activity
      onClose: (appId: string) => console.log('onClose', appId),    // called when the miniapp loses foreground state
      onAuth: (appId: string) => console.log('onAuth', appId),    // called when authorization flow starts
      onError: (appId: string, error: string) => console.log('onError', appId, error),  // handle error
    });

    return () => subscription();
  }, [])

  const handleOpenMiniapp = () => {
    appboxo.openMiniapp('[miniapp_id]');  //launch miniapp by id
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});