Api Platform conference
Register now

React Native generator

List

# Install

To use this generator you need Node.js.

Create a React Native application using Expo CLI:

npm install -g expo-cli npm init expo-app my-app 

When asked, choose to use the blank template, then move to the created directory:

cd my-app 

Install the required dependencies:

npm install redux react-redux redux-thunk redux-form react-native-elements react-native-router-flux react-native-vector-icons prop-types whatwg-url buffer react-native-event-source react-native-gesture-handler react-native-reanimated react-native-screens 

# Generating a Native App

In the app directory, generate the files for the resource you want:

npm init @api-platform/client https://demo.api-platform.com . -- --generator react-native --resource book 

Replace the URL with the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with -f openapi3.

Omit the resource flag to generate files for all resource types exposed by the API.

Create a Router.js file to import all routes:

// Router.js import React from 'react'; import { Router, Stack } from 'react-native-router-flux'; // Replace "book" with the name of the resource type import BookRoutes from './routes/book';  const RouterComponent = () => (  <Router>  <Stack key="root">{BookRoutes}</Stack>  </Router> );  export default RouterComponent;

Here is an example of an App.js file:

// App.js import React, { Component } from 'react'; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import { createStore, applyMiddleware, combineReducers } from 'redux'; import { View } from 'react-native'; import { reducer as form } from 'redux-form';  // see https://github.com/facebook/react-native/issues/14796 import { Buffer } from 'buffer'; global.Buffer = Buffer;  // see https://github.com/facebook/react-native/issues/16434 import { URL, URLSearchParams } from 'whatwg-url'; global.URL = URL; global.URLSearchParams = URLSearchParams;  // see https://github.com/facebook/react-native/issues/12890 import RNEventSource from 'react-native-event-source'; global.EventSource = RNEventSource;  // Replace "book" with the name of resource type import book from './reducers/book'; import Router from './Router';  export default class App extends Component {  render() {  const store = createStore(  combineReducers({  book,  form,  }),  {},  applyMiddleware(thunk)  );  return (  <Provider store={store}>  <View style={{ flex: 1 }}>  <Router />  </View>  </Provider>  );  } }

The code is ready to be executed!

expo start 

# Screenshots in iOS Simulator

List Show Add Delete

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop