Api Platform conference
Register now
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

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