Skip to content

Commit d6cb035

Browse files
potik1mysiar
authored andcommitted
rn doc (#611)
1 parent 4076f7c commit d6cb035

File tree

6 files changed

+91
-0
lines changed

6 files changed

+91
-0
lines changed

client-generator/images/adnew.png

53.7 KB
Loading

client-generator/images/del.png

45.3 KB
Loading

client-generator/images/item.png

52.6 KB
Loading

client-generator/images/list.png

52.9 KB
Loading

client-generator/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
API Platform Client Generator is a generator for scaffolding apps with Create-Retrieve-Update-Delete features for any API exposing a Hydra documentation. Currently the following targets are available:
44

55
* React/Redux
6+
* React Native
67
* Vue.js
78

89
The generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.

client-generator/react-native.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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+
![List](images/list.png) ![Show](images/item.png)
90+
![Add](images/adnew.png) ![Delete](images/del.png)

0 commit comments

Comments
 (0)