React Native Starter
Search…
Adding Pages and Components
RNS comes with predefined set of components and screens, but we sure you'd love to add your own! And we've tried to make it as simple as possible for you with a help of plop generator: https://plopjs.com/
We our predefined plop templates you can generate 3 different features for your app:
- 1.A component.
- 2.A stateless module.
- 3.A stateful module.
Let's talk about each of them.
Adding new Components
As described in Arhitecture, components are stateless (usually), reusable react elements. They are placed under the
src/components folder and simply exports an element from the js file.So, basically, creating a new component is just:
- 1.Create a new file under
componentsfolder. - 2.Create a react element inside the newly created file and export it as a default.
- 3.Create a spec file for writing tests.
And we automated this steps with a single command. Open your terminal and type.
1
plop component MyButton
Copied!
This command will:
- 1.Create an
src/components/MyButton/index.jsfile. - 2.And add the following content inside:
src/components/MyButton/index.js
1
// @flow
2
import React from 'react';
3
import {
4
View,
5
} from 'react-native';
6
7
import { colors } from '../styles';
8
9
type Props = {}
10
11
export default (props: Props) => (
12
<View />
13
);
14
15
const styles = StyleSheet.create({});
Copied!
3. Create a spec file called
src/components/MyButton/index.spec.js with the following content:src/components/MyButton/index.spec.js
1
/* eslint-disable no-undef */
2
import React from 'react';
3
import { shallow } from 'enzyme';
4
5
import {
6
MyButton,
7
} from '../index';
8
9
describe('{{properCase name }} Component', () => {
10
it('renders as expected', () => {
11
const wrapper = shallow(
12
<MyButton />,
13
);
14
expect(wrapper).toMatchSnapshot();
15
});
Copied!
Adding a new Module
To create a new module, simply run this command in your console:
1
plop module CalendarScreen
Copied!
Then, plop will ask you to if you want statefull or stateless module.
- 1.Statefull module has connection to redux store.
- 2.Stateless doesn't :)
After you making your choice, the generator will:
- 1.Create a new folder under
modulescalledcalendarScreen - 2.Add a new file called
CalendarScreenView.jswith a sample view for the new screen. - 3.Add a new file
CalendarScreenViewContainer.jswith a connection calendar view to the redux (if you picked a statefull component) and wrapping it with recompose. - 4.If your component is statefull, it will create
CalendarScreenState.jsfile and fill it with redux-related code (described in Architecture as well). - 5.For statefull components, your screen will be imported into the redux store.
Have a look at example files content:
src/modules/calendarScreen/CalendarScreenState.js
src/modules/calendarScreen/CalendarScreenView.js
src/modules/calendarScreen/CalendarScreenViewContainer.js
1
// @flow
2
type CalendarScreenStateType = {};
3
4
type ActionType = {
5
type: string,
6
payload?: any,
7
};
8
9
export const initialState: CalendarScreenStateType = {};
10
11
export const ACTION = 'CalendarScreenState/ACTION';
12
13
export function actionCreator(): ActionType {
14
return {
15
type: ACTION,
16
};
17
}
18
19
export default function CalendarScreenStateReducer(state: {{properCase name }}StateType = initialState, action: ActionType): {{properCase name }}StateType {
20
switch (action.type) {
21
case ACTION:
22
return {
23
...state,
24
};
25
default:
26
return state;
27
}
28
}
Copied!
1
// @flow
2
import React from 'react';
3
import {
4
View,
5
Text,
6
} from 'react-native-ui-lib';
7
8
type Props = {};
9
10
export default (props: Props) => (
11
<View flex centerV centerH>
12
<Text>CalendarScreen View</Text>
13
</View>
14
);
Copied!
1
// @flow
2
import { compose } from 'recompose';
3
import { connect } from 'react-redux';
4
5
import CalendarScreenView from './{{properCase name }}View';
6
7
export default compose(
8
connect(
9
state => ({}),
10
dispatch => ({}),
11
),
12
)(CalendarScreenView);
Copied!
Last modified 3yr ago
Copy link