HelloReact Demo sample app overview

A sample app called HelloReact demonstrates the supported way for a wrapped app built with the React Native development framework to use various React Native modules and components. Ivanti has verified that when you wrap React Native apps that use these modules and components as demonstrated, the behavior of the wrapped app is functionally the same as the behavior of the unwrapped app.

Demonstrated functionality

The sample app HelloReact includes the following demonstrations:

AppConfig Demo

The AppConfig demo shows how to request, receive, and process app-specific configurations from the Ivanti server. Within HelloReact, Ivanti provides files that provide the APIs to get the app-specific configurations from the Ivanti server.

An AppConfig demo that demonstrates the legacy app-specific configuration handling is available only in releases prior to AppConnect 8.6.0.0 for Android.

See the README.txt for HelloReact for details on:

  • Adding necessary files to your app.
  • Adding ConfigServicePackage to the React Native packages that your app uses.
  • Adding necessary permissions for using the package to your AndroidManifest.xml file.
  • Using the ConfigService API to get and process the app-specific configurations.
  • HelloReact/README.txt
  • HelloReact/src/AppConfigScreen.js
  • HelloReact/android/app/src/main/java/com/helloreact/MainApplication.java

Network API Demo

The Network API demo shows how to use network APIs available in the React Native framework.

You provide a URL in a text field and then choose whether the demo:

  • loads the URL into a WebView.

  • uses the Fetch API to do a GET request.

    (https://facebook.github.io/react-native/docs/network.html#using-fetch)

  • HelloReact/src/NetworkScreen.js

Capture Image Demo

The Capture Image demo shows how to use the React Native camera module at:

https://github.com/lwansbrough/react-native-camera

The demo shows how to use the camera’s view, capture a photo, and receive the result with image properties. The camera module is responsible for storing the resulting image to the specified place.

Allow the Camera DLP on the Ivanti server so that the app can access the camera to take a photo. The image is available only to other wrapped apps.

  • HelloReact/src/CaptureImageScreen.js

Pick Image Demo

The Pick Image demo shows how to use the image picker component at:

https://github.com/react-community/react-native-image-picker

The demo shows how to request a picker and process the response to display the chosen image.

Allow the Gallery DLP on the Ivanti server to pick images from the device's gallery. Allow the Camera DLP to take pictures.

  • HelloReact/src/PickImageScreen.js

Video View Demo

The Video View demo shows how to use the video view component at:

https://github.com/react-native-community/react-native-video

The demo shows how to pick a video file from gallery storage, or record a video, and then play the video in the Video View.

Allow the Gallery DLP on the Ivanti server to pick video from the device's gallery. Allow the Camera DLP to record videos.

  • HelloReact/src/VideoViewScreen.js

Firebase Cloud Messaging Demo

The Firebase Cloud Messaging (FCM) demo shows how to use the React Native module for FCM and local notifications at:

https://github.com/evollu/react-native-fcm

The demo shows how to verify required permissions, subscribe to topics, receive the FCM token, and catch the notifications.

  • HelloReact/src/FCMscreen.js