Server driven mobile apps with React Native

hyperview

Native mobile apps, as easy as creating a website.

Hyperview is a new hypermedia format and React Native client for developing server-driven mobile apps.

• react-native-keyboard-aware-scrollview 2.0.0

Getting Started

This repo contains an example XML server that serves Hyperview XML to showcase the available features.
It also contains a demo Expo project that can connect to the example XML server, or any other Hyperview endpoint.

1. Run the example server

From the repo root directory:

yarn
yarn test:xmlserver

This will start an HTTP server listening on port 8085.

2. Start the demo app

In a separate shell, install the demo dependencies and start the development server. From the repo root directory:

cd demo
yarn

The next step depends on whether you want to run the demo app in the iOS simulator, on an Android Virtual Device, or on a physical mobile device.

Running on the iOS simulator

From the demo/ directory:

yarn ios

This will open the iOS simulator and install the demo app in the simulator. It will then start the Expo development server to load the demo app.

Running on an Android Virtual Device

From the demo/ directory:

yarn android

This will open an AVD and install the demo app in the emulator. It will then start the Expo development server to load the demo app.

Running on a physical device

On your physical mobile device, install the Expo client

• iOS App Store
• Google Play Store

Make sure your mobile device and development machine are connected to the same network.

Open /demo/navigation/AppNavigator.js in a text editor. In initialRouteParams, replace the host in the url (http://0.0.0.0:8085/index.xml) with the IP of your machine. This is needed in order for your physical device to be able to request the example XML files from your development machine.

From the demo/ directory on your development machine:

yarn start

This command will start an Expo development server and open a webpage (http://localhost:19002). This webpage will display a QR code.

• On your iOS device, open the Camera app and point it at the QR code on your screen. The Camera app should show an "Open in Expo" notification. Tap this notification.
• On your Android device, use the Expo app to scan the QR code on your screen.

3. You're all set!

Whether you're using a physical device or simulator, you should now see a Hyperview screen rendered from the example server:

GitHub