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 components folder.

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.

plop component MyButton

This command will:

1. Create an src/components/MyButton/index.js file.

2. And add the following content inside:

src/components/MyButton/index.js
// @flow
import React from 'react';
import {
  View,
} from 'react-native';
​
import { colors } from '../styles';
​
type Props = {}
​
export default (props: Props) => (
  <View />
);
​
const styles = StyleSheet.create({});

3. Create a spec file called src/components/MyButton/index.spec.js with the following content:

src/components/MyButton/index.spec.js
/* eslint-disable no-undef */
import React from 'react';
import { shallow } from 'enzyme';
​
import {
  MyButton,
} from '../index';
​
describe('{{properCase name }} Component', () => {
  it('renders as expected', () => {
  const wrapper = shallow(
    <MyButton />,
  );
  expect(wrapper).toMatchSnapshot();
});

Adding a new Module

Have a loot at what's module in our Arhitecture documentation.

To create a new module, simply run this command in your console:

plop module CalendarScreen

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 modules called calendarScreen

2. Add a new file called CalendarScreenView.js with a sample view for the new screen.

3. Add a new file CalendarScreenViewContainer.js with 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.js file 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:

// @flow
type CalendarScreenStateType = {};
​
type ActionType = {
  type: string,
  payload?: any,
};
​
export const initialState: CalendarScreenStateType = {};
​
export const ACTION = 'CalendarScreenState/ACTION';
​
export function actionCreator(): ActionType {
  return {
    type: ACTION,
  };
}
​
export default function CalendarScreenStateReducer(state: {{properCase name }}StateType = initialState, action: ActionType): {{properCase name }}StateType {
  switch (action.type) {
    case ACTION:
      return {
        ...state,
      };
    default:
      return state;
  }
}

// @flow
import React from 'react';
import {
  View,
  Text,
} from 'react-native-ui-lib';
​
type Props = {};
​
export default (props: Props) => (
  <View flex centerV centerH>
    <Text>CalendarScreen View</Text>
  </View>
);

// @flow
import { compose } from 'recompose';
import { connect } from 'react-redux';
​
import CalendarScreenView from './{{properCase name }}View';
​
export default compose(
  connect(
    state => ({}),
    dispatch => ({}),
  ),
)(CalendarScreenView);

Further documentation on Plop could be found on https://plopjs.com/​