ionage-rnsdk

Ionage WebView component for iOS, Android

Installation

Requires react-native-webview to be installed

npm install ionage-rnsdk react-native-webview

or if yarn is used

yarn add ionage-rnsdk react-native-webview

Additional Steps

iOS

Open your project's Info.plist and add the following lines inside the outermost <dict> tag:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Location.</string>

Android

Open your project's AndroidManifest.xml and add the following lines inside the <manifest> tag:

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Usage

🔴 !!!!! Important : Ask User for Location & Camera Permissions before opening IonageWebView

Minimal Usage

import { IonageWebView } from 'ionage-rnsdk';

// ...

<IonageWebView options={{ apikey: '' }} />

All Feature Usage

import {
  IonageWebView,
  handleAndroidBackPress,
  type IonageWebViewRef,
  type IonageMessageType,
} from 'ionage-rnsdk';

// ...

const webViewRef = useRef<IonageWebViewRef>(null);

// Handle Hardware Back Button for Ionage
useEffect(() => {
  if (Platform.OS === 'android') {
    const onAndroidBackPress = () => {
      if (webViewRef.current) {
        handleAndroidBackPress(webViewRef.current);
        return true;
      }
      return false;
    };
    BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
    };
  }
  return () => {};
}, [webViewRef]);

// Handle Messages from Ionage Web
const onIonageMessageHandler = useCallback(
  async (message: IonageMessageType) => {
    switch (message) {
      case 'ionage_close_app':
        //hide or close Webview
        break;
      case 'ionage_camera_permission':
        //Ask for Camera Permission for QR Scanner to work
        break;
      case 'ionage_location_permission':
        //Ask for Fine Location Permission for Current Location in Maps
        break;
    }
  },
  []
);

// ...

<IonageWebView
  ref={webViewRef}
  options={{
    apikey: '',
  }}
  onIonageMessageHandler={onIonageMessageHandler}
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library