|
| 1 | +React Native generator |
| 2 | +====================== |
| 3 | + |
| 4 | +Create a React Native application using [React Community's Create React Native App](https://github.com/react-community/create-react-native-app) |
| 5 | + |
| 6 | +```bash |
| 7 | +$ yarn add -g expo-cli |
| 8 | +$ expo init my-app |
| 9 | +$ cd my-app |
| 10 | +``` |
| 11 | + |
| 12 | +Install: React Native Elements, React Native Router Flux, React Native Vector Icons, Redux, React Redux, Redux Thunk, Redux Form, Prop Types |
| 13 | + |
| 14 | +```bash |
| 15 | +$ yarn add redux react-redux redux-thunk redux-form react-native-elements react-native-router-flux |
| 16 | +react-native-vector-icons prop-types |
| 17 | +``` |
| 18 | + |
| 19 | +Install the generator globally: |
| 20 | + |
| 21 | +```bash |
| 22 | +$ yarn global add @api-platform/client-generator |
| 23 | +``` |
| 24 | + |
| 25 | +In the app directory, generate the files for the resource you want: |
| 26 | + |
| 27 | +``` |
| 28 | + $ generate-api-platform-client https://demo.api-platform.com -g react-native --resource foo |
| 29 | + # Replace the URL by the entrypoint of your Hydra-enabled API |
| 30 | + # Omit the resource flag to generate files for all resource types exposed by the API |
| 31 | +``` |
| 32 | +Create **Router.js** file to import all routes |
| 33 | + |
| 34 | +```javascript |
| 35 | +import React from 'react'; |
| 36 | +import { Router, Stack } from 'react-native-router-flux'; |
| 37 | +//replace "book" with the name of resource type |
| 38 | +import BookRoutes from './routes/book'; |
| 39 | + |
| 40 | +const RouterComponent = () => { |
| 41 | + return ( |
| 42 | + <Router> |
| 43 | + <Stack key="root"> |
| 44 | + {BookRoutes} |
| 45 | + </Stack> |
| 46 | + </Router> |
| 47 | + ); |
| 48 | +}; |
| 49 | + |
| 50 | +export default RouterComponent; |
| 51 | +``` |
| 52 | +Here is an example of **App.js** |
| 53 | + |
| 54 | +```javascript |
| 55 | +import React, { Component } from 'react'; |
| 56 | +import { Provider } from 'react-redux'; |
| 57 | +import thunk from 'redux-thunk'; |
| 58 | +import { createStore, applyMiddleware, combineReducers} from 'redux'; |
| 59 | +import { View } from 'react-native'; |
| 60 | +import {reducer as form} from 'redux-form'; |
| 61 | +//replace "book" with the name of resource type |
| 62 | +import book from './reducers/book'; |
| 63 | +import Router from './Router'; |
| 64 | + |
| 65 | +export default class App extends Component { |
| 66 | + render() { |
| 67 | + const store = createStore(combineReducers({ |
| 68 | + book, |
| 69 | + form |
| 70 | + }), {}, applyMiddleware(thunk)); |
| 71 | + return ( |
| 72 | + <Provider store={store}> |
| 73 | + <View style={{flex: 1}}> |
| 74 | + <Router/> |
| 75 | + </View> |
| 76 | + </Provider> |
| 77 | + ); |
| 78 | + } |
| 79 | +} |
| 80 | +``` |
| 81 | + |
| 82 | +The code is ready to be executed! |
| 83 | +```bash |
| 84 | +$ expo start |
| 85 | +``` |
| 86 | + |
| 87 | +#### Example of running application on IOS simulator |
| 88 | + |
| 89 | +  |
| 90 | +   |
0 commit comments