To use this generator you need Node.js and Yarn (or NPM) installed. To run the command line tool, we also recommend using npx.
Create a React Native application using Expo CLI.
$ yarn global add expo-cli
$ expo init my-app
# When asked, choose to use the blank template
$ cd my-app
Install the required dependencies:
$ yarn add 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
In the app directory, generate the files for the resource you want:
$ npx @api-platform/client-generator https://demo.api-platform.com . --generator react-native --resource book
Replace the URL with the entrypoint of your Hydra-enabled API. Omit the resource flag to generate files for all resource types exposed by the API.
Create a Router.js
file to import all routes:
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 = () => {
return (
<Router>
<Stack key="root">
{BookRoutes}
</Stack>
</Router>
);
};
export default RouterComponent;
Here is an example of an App.js
file:
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
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