Back to home

react-native/

node

Version: 0.0.25

Last Updated: Unknown

Lift - React Native

Layout

react-native:
  - node:
      projectName: App example
      bucketName: app-example
      files:
        - name: Home
          redux: true
          childStyleClasses: []
          route: Home
          components:
            - VerticalList
            - HorizontalList
            - ListItemNine
          layout:
            - name: View
              style:
                - screenHome
              layout:
                - name: ComponentGAHeadingTwo
                  passProps: true
                  id: homeComponentGaHeadingTwoDolor
      routes:
        - Home
      colors:
        cBlack: '#000'
        cWhite: '#FFF'
        cPrimary: '#ECF0F1'
        cSecondary: '#BDC3C7'
        cLink: '#3498DB'
        cInfo: '#3498DB'
        cSuccess: '#2ECC71'
        cError: '#E74C3C'
        cWarning: '#F1C40F'
        cLight: '#ECF0F1'
        cDark: '#222'
      fonts:
        fPrimary: Open Sans
        fSecondary: Open Sans

Module files

1version: 2
2jobs:
3  build:
4    docker:
5      - image: circleci/node:8.9.4
6    working_directory: ~/repo
7    steps:
8      - checkout
9      - restore_cache:
10          keys:
11            - v-dependencies-{{ checksum "package.json" }}
12            - v-dependencies-
13      - run:
14          name: Install dependencies
15          command: yarn install
16      - save_cache:
17          paths:
18            - node_modules
19          key: v-dependencies-{{ checksum "package.json" }}
20      - run:
21          name: Install expo-cli
22          working_directory: ~/repo
23          command: |
24            sudo npm i -g expo-cli
25      - run:
26          name: Deploy if tests pass
27          working_directory: ~/repo
28          command: |
29            if [ $CIRCLE_BRANCH == 'develop' ]; then
30              echo "Success!"
31            elif [ $CIRCLE_BRANCH == 'master' ]; then
32              expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD
33              expo publish
34            fi

1#!/usr/bin/env node
2
3const fs = require('fs-extra');
4const ejs = require('ejs');
5const dir = __dirname;
6const path = process.cwd();
7const storageDir = process.env.KRATOS_PATH;
8const execa = require('execa');
9const appDir = path;
10let filesErr = [];
11
12/**
13 * Check component exists in project
14 * If not - copy it in.
15 * @param {*} components
16 */
17const exists = (data) => {
18    const mapComponents = (data) => {
19        data
20            .components
21            .map((d, i) => {
22                // 1. Does imported component exist
23                const doesExist = fs.pathExistsSync(`${appDir}/app/${d}`);
24                if (!doesExist) {
25                    // 2. Is there a version in storage
26                    if (fs.pathExistsSync(`${storageDir}/react-native/${d}`)) {
27                        execa.shellSync(`kratos install react-native ${d}`, {stdio: 'inherit'});
28                    } else {
29                        // app/components/<%= name %>/<%= name %>View.js Force override to everything
30                        // that exists
31                        /* execa.sync('hygen', ['react', 'component-promptless', `--name=${d}`, `--message="Generated by Lift"`, `--path=src`]); */
32                    }
33                }
34            });
35    };
36
37    const mapReducers = (data) => {
38        data
39            .reducers
40            .map((d, i) => {
41                const doesExist = fs.pathExistsSync(`${appDir}/src/reducers/${d}.js`);
42                if (!doesExist) {
43                    // to do
44                }
45            });
46    };
47
48    try {
49        if (typeof data.components !== 'undefined') {
50            mapComponents(data);
51        }
52        if (typeof data.reducers !== 'undefined') {
53            mapReducers(data);
54        }
55    } catch (err) {
56        console.log(err.message);
57    }
58};
59
60/*
61const build = (filename, data) => {
62    // TODO: Scaffold screens
63    /*
64    const files = [
65        {
66            name: 'view',
67            out: `index.js`
68        }, {
69            name: 'readme',
70            out: `README.md`
71        }, {
72            name: 'styles',
73            out: 'styles.scss'
74        }, {
75            name: 'story',
76            out: `${filename}.storybook.js`
77        }, {
78            name: 'mocha',
79            out: `${filename}.mocha.js`
80        }
81    ];
82
83    files.map((file, i) => {
84        ejs
85            .renderFile(`${dir}/${file.name}.ejs`, data, {}, function (err, str) {
86                // str => Rendered HTML string
87                if (err) {
88                    filesErr.push(filename);
89                    throw err;
90                }
91
92                fs.outputFileSync(`${appDir}/app/screens/${filename}/${file.out}`, str);
93            });
94    });
95
96    exists(data);
97};
98*/
99
100/**
101 * Kratos install components
102 *
103 * @param {*} components
104 */
105const build = components => {
106    components.map((d, i) => {
107        console.log(d);
108        // 1. Does imported component exist
109        const doesExist = fs.pathExistsSync(`${appDir}/app/${d}`);
110        if (!doesExist) {
111            // 2. Is there a version in storage
112            if (fs.pathExistsSync(`${storageDir}/react-native/${d}`)) {
113                execa.shellSync(`kratos install react-native ${d}`, {stdio: 'inherit'});
114            } else {
115                // app/components/<%= name %>/<%= name %>View.js Force override to everything
116                // that exists
117                /* execa.sync('hygen', ['react', 'component-promptless', `--name=${d}`, `--message="Generated by Lift"`, `--path=src`]); */
118            }
119        }
120    });
121}
122
123/**
124 * Scaffold the required screens
125 *
126 * @param {*} data
127 */
128const buildScreens = (data) => {
129    console.log('\t buildScreens()');
130    console.log(data);
131
132    // Return if no navigator defined
133    data.map(d => {
134        ejs
135            .renderFile(`${dir}/screen.ejs`, d, {}, function (err, str) {
136                // str => Rendered HTML string
137                if (err) {
138                    console.log(err);
139                    throw err;
140                }
141
142                fs.outputFileSync(`${appDir}/app/screens/${d.screenName}/index.js`, str);
143            });
144    });
145}
146
147/**
148 * Scaffold the router
149 *
150 * @param {*} data
151 */
152const buildRouter = (data) => {
153    console.log('\t buildRouter()');
154    console.log(data);
155
156    // Return if no navigator defined
157    if (!data.navigator.length) {
158        return;
159    }
160
161    // 1. Get navigator routes
162    if (data.stackName.includes('TabBar')) {
163        // 2.a If includes TabBar, create TabBar
164        ejs
165            .renderFile(`${dir}/stackTabBar.ejs`, data, {}, function (err, str) {
166                // str => Rendered HTML string
167                if (err) {
168                    console.log(err);
169                    throw err;
170                }
171
172                fs.outputFileSync(`${appDir}/app/router/${data.stackName}/navigator.js`, str);
173            });
174    } else if (data.stackName.includes('Stack')) {
175        // 2.b If includes Stack, create normal Stack
176        ejs
177            .renderFile(`${dir}/stack.ejs`, data, {}, function (err, str) {
178                // str => Rendered HTML string
179                if (err) {
180                    console.log(err);
181                    throw err;
182                }
183
184                fs.outputFileSync(`${appDir}/app/router/${data.stackName}/navigator.js`, str);
185            });
186    }
187
188    ejs
189        .renderFile(`${dir}/stackIndex.ejs`, data, {}, function (err, str) {
190            // str => Rendered HTML string
191            if (err) {
192                console.log(err);
193                throw err;
194            }
195
196            fs.outputFileSync(`${appDir}/app/router/${data.stackName}/index.js`, str);
197        });
198
199    // recursively iterate
200    data
201        .navigator
202        .map(child => {
203            // buildRouter(child);
204            const keys = Object.keys(child);
205            keys.map(d => buildRouter(child[d]));
206        });
207}
208
209// somelib.js
210module.exports = function (data) {
211    console.log('Bridging React Native');
212    try {
213        // map the correct types across
214        if (data.components) {
215            build(data.components);
216        }
217
218        if (data.router) {
219            buildRouter(data.router);
220        }
221
222        if (data.screens) {
223            buildScreens(data.screens);
224        }
225
226        // Build circleci
227        ejs
228            .renderFile(`${dir}/circleci.ejs`, {
229                data: null
230            }, {}, function (err, str) {
231                // str => Rendered HTML string
232                if (err) {
233                    console.log(err);
234                    throw err;
235                }
236
237                fs.outputFileSync(`${appDir}/.circleci/config.yml`, str);
238            });
239
240        /*
241        if (data.files && data.files.length) {
242            data
243                .files
244                .map((file, i) => {
245                    console.log('\t - Scaffolding:', file.name);
246                    build(file.name, file);
247                });
248        }
249
250        if (data.colors) {
251            buildColors(data.colors);
252        }
253
254        if (data.fonts) {
255            buildTypography(data.fonts);
256        }
257
258        if (data.projectName) {
259            buildIndexHtml(data);
260        }
261
262        if (data.bucketName) {
263            buildConfig(data);
264        }
265        */
266    } catch (err) {
267        console.error(err);
268    }
269};

1yarn add fs-extra execa ejs @sindresorhus/slugify --dev

1import React from 'react';
2import {
3    View<% if (typeof type !== 'undefined' && type === 'scrollDetail') { %>, ScrollView<%_ } _%>
4} from 'react-native';
5<%_ if (typeof components !== 'undefined') components.forEach(function(d){ _%>
6import <%= d %> from 'components/<%= d %>';
7<%_ if (typeof type !== 'undefined' && type === 'list') { _%>
8import VerticalList from 'components/VerticalList';
9<%_ } _%>
10<%_ }); _%>
11import DecoratorRedux from 'components/DecoratorRedux';
12import StatusBar from 'components/StatusBar';
13<%_ if (typeof type !== 'undefined' && type === 'login') { _%>
14import debounce from 'debounce';
15<%_ } _%>
16
17class <%= screenName %> extends React.Component {
18    <%_ if (typeof detailScreen !== 'undefined') { _%>
19    handlePress = (item) => {
20        const {navigation} = this.props;
21        navigation.push('<%= detailScreen %>', {
22            item: item
23        });
24    }
25    <%_ } _%>
26
27    <%_ if (typeof type !== 'undefined' && type === 'login') { _%>
28    /**
29     * Base route handling for sign in on env=dev.
30     *
31     * @memberof Login
32     */
33    login = debounce(() => {
34        const {navigation} = this.props;
35        navigation.replace('StackTabBar');
36        setTimeout(() => navigation.push('Onboarding'), 1000);
37    }, 2000, true);
38
39    /**
40     * Base route handling for sign up on env=dev.
41     *
42     * @memberof Login
43     */
44    signUp = debounce(() => {
45        const {navigation} = this.props;
46        navigation.push('SignUp');
47    }, 2000, true);
48    <%_ } _%>
49
50    render() {
51        <% if (typeof type !== 'undefined' && type !== 'detail') { %>
52        const {copy} = this.props;
53        <%_ } _%>
54        return (
55            <View style={{
56                flex: 1
57            }}>
58                <StatusBar bgColor="transparent" />
59                <% if (typeof type !== 'undefined' && type === 'scrollDetail') { %><ScrollView><%_ } _%>
60                <%_ if (typeof components !== 'undefined') components.forEach(function(d){ _%>
61                <%_ if (typeof type !== 'undefined' && type === 'list') { _%>
62                <VerticalList
63                    testID="<%= screenName %>"
64                    listItem={<%= d %>}
65                    data={copy['<%= id %>'].items}
66                    handlePress={this.handlePress ? this.handlePress : console.log('Pressed')}/>
67                <%_ } else { _%>
68                <<%= d %> {...this.props} 
69                    <% if (typeof type !== 'undefined' && type === 'login') { %>login={this.login} signUp={this.signUp}<% } %>
70                    <% if (typeof type !== 'undefined' && type !== 'detail' && type !== 'scrollDetail') { %>copy={copy['<%= id %>']}<%_ } _%>/>
71                <%_ } _%>
72                <%_ }); _%>
73                <% if (typeof type !== 'undefined' && type === 'scrollDetail') { %></ScrollView><%_ } _%>
74            </View>
75        );
76    }
77}
78
79export default DecoratorRedux(<%= screenName %>);

1import {createStackNavigator} from 'react-navigation';
2
3// Tab-Navigators
4<% if (typeof navigator !== 'undefined') navigator.forEach(function(key){ %>
5<% if (Object.keys(key)[0].includes('Stack')) { %>
6import <%= Object.keys(key)[0] %> from 'app/router/<%= Object.keys(key)[0] %>/navigator';
7<% } else { %>
8import <%= Object.keys(key)[0] %> from 'app/screens/<%= Object.keys(key)[0] %>';
9<% } %>
10<%_ }); _%>
11
12const routeConfiguration = {
13<% if (typeof navigator !== 'undefined') navigator.forEach(function(key){ %>
14    <%= Object.keys(key)[0] %>: {
15        screen: <%= Object.keys(key)[0] %>
16    },
17<%_ }); _%>
18};
19
20const stackNavigatorConfiguration = {
21    headerMode: 'none',
22    initialRouteName: '<%= initialRouteName %>'
23};
24
25export default createStackNavigator(routeConfiguration, stackNavigatorConfiguration);

1import {addNavigationHelpers} from 'react-navigation';
2import Navigator from './navigator';
3import React, {Component} from 'react';
4import {connect} from 'react-redux';
5
6class Nav extends Component {
7    render() {
8        return (<Navigator
9            navigation={addNavigationHelpers({dispatch: this.props.dispatch, state: this.props.navigation})}/>)
10    }
11}
12
13const mapStateToProps = state => ({navigation: state.navigation});
14export default connect(mapStateToProps)(Nav);

1import {createBottomTabNavigator} from 'react-navigation-tabs';
2import React from 'react';
3import {Image} from 'react-native';
4
5const list = 'https://res.cloudinary.com/gitgoodclub/image/upload/v1537662172/grid-45.png';
6// Tab-Navigators
7<% if (typeof navigator !== 'undefined') navigator.forEach(function(key){ %>
8<% if (Object.keys(key)[0].includes('Stack')) { %>
9import <%= Object.keys(key)[0] %> from 'app/router/<%= Object.keys(key)[0] %>/navigator';
10<% } else { %>
11import <%= Object.keys(key)[0] %> from 'app/screens/<%= Object.keys(key)[0] %>';
12<% } %>
13<%_ }); _%>
14
15const routeConfiguration = {
16<% if (typeof navigator !== 'undefined') navigator.forEach(function(key){ %>
17    <%= Object.keys(key)[0] %>: {
18        screen: <%= Object.keys(key)[0] %>,
19        navigationOptions: {
20            tabBarAccessibilityLabel: '<%= Object.keys(key)[0] %>',
21            tabBarLabel: '<%= Object.keys(key)[0] %>',
22            tabBarTestID: '<%= Object.keys(key)[0] %>',
23            tabBarIcon: obj => {
24                const image = obj.focused
25                    ? list
26                    : list;
27                return (<Image
28                    style={{
29                    width: 20,
30                    height: 20
31                }}
32                    source={{
33                    uri: image
34                }}/>)
35            }
36        }
37    },
38<%_ }); _%>
39};
40
41const stackNavigatorConfiguration = {
42    headerMode: 'none',
43    initialRouteName: '<%= initialRouteName %>'
44};
45
46export default createBottomTabNavigator(routeConfiguration, stackNavigatorConfiguration);

Install

Lift generate

Repository

https://github.com/okeeffed/pkg-lift-react-native

Sections

Layout

Module files