Up and coding with React Native¶

# Create our screens
mkdir -p src/containers/HomeScreen

# Our home screen container has 3 files (index, styles, and container component)

# 1. Our index file to export our component
cat <<'-EOF' > src/containers/HomeScreen/index.js
import HomeScreen from './HomeScreen';
export default HomeScreen;
-EOF

# 2. Our styles file to hold the styles of our component
cat <<'-EOF' > src/containers/HomeScreen/styles.js
import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    instructions: {
        margin: 10,
    },
});
-EOF

# 3. Our component file to hold the main container component
cat <<'-EOF' > src/containers/HomeScreen/HomeScreen.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from './styles'

type Props = {};
export default class HomeScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>
                    This is the home screen
                </Text>
            </View>
        );
    }
}
-EOF

# Create our screens
mkdir -p src/containers/DataScreen

# Our data screen container has 3 files (index, styles, and container component)

# 1. Our index file to export our component
cat <<'-EOF' > src/containers/DataScreen/index.js
import DataScreen from './DataScreen';
export default DataScreen;
-EOF

# 2. Our styles file to hold the styles of our component
cat <<'-EOF' > src/containers/DataScreen/styles.js
import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});
-EOF

# 3. Our component file to hold the main container component
cat <<'-EOF' > src/containers/DataScreen/DataScreen.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from './styles'

type Props = {};
export default class DataScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>
                    This is the data screen
                </Text>
            </View>
        );
    }
}
-EOF

cat <<'-EOF' > src/screens.js
import { Navigation } from 'react-native-navigation';

import HomeScreen from './containers/HomeScreen';
import DataScreen from './containers/DataScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('rn.HomeScreen', () => HomeScreen);
  Navigation.registerComponent('rn.DataScreen', () => DataScreen);
  Navigation.registerComponent('rn.FirstDrawerScreen', () => HomeScreen);
  Navigation.registerComponent('rn.PushedScreen', () => HomeScreen);
}
-EOF

cat <<'-EOF' > index.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './src/screens';
import Ionicons from 'react-native-vector-icons/Ionicons';

/**
 * Register all the screens our app will use (internal and external)
 */
registerScreens();

/**
 * When loading icons, we have to load them via a promise.
 * We must wait for the promise to be resolved before we can start our app
 * This happens very quickly so you don't notice it.
 */
const replaceSuffixPattern = /--(active|big|small|very-big)/g;
const icons = {
    'ios-home': [30, '#000000'], 'ios-home-outline': [30, '#bbb'],
    'ios-list': [30, '#000000'], 'ios-list-outline': [30, '#bbb'],
};

const iconsMap = {};
const iconsLoaded = new Promise((resolve, reject) => {
    new Promise.all(
        Object.keys(icons).map(iconName =>
            // IconName--suffix--other-suffix is just the mapping name in iconsMap
            Ionicons.getImageSource(
                iconName.replace(replaceSuffixPattern, ''),
                icons[iconName][0],
                icons[iconName][1]
            ))
    ).then(sources => {
        Object.keys(icons).forEach((iconName, idx) => (iconsMap[iconName] = sources[idx]));
        resolve(true); // Call resolve all our icons exist in the iconMap
    });
});

/**
 * Once our icons have loaded, then start our app
 */
iconsLoaded.then(() => {
    // Start the app
    Navigation.startTabBasedApp({
        tabs: [
            {
                title: 'Home Screen',
                label: 'HomeScreen',
                screen: 'rn.HomeScreen', // this is a registered name for a screen
                icon: iconsMap['ios-home-outline'],
                selectedIcon: iconsMap['ios-home'],
            },
            {
                title: 'Data Screen',
                label: 'Data',
                screen: 'rn.DataScreen',
                icon: iconsMap['ios-list-outline'],
                selectedIcon: iconsMap['ios-list']
            }
        ]
    });
});
-EOF

rm App.js

cat <<'-EOF' > src/actions/index.js
import * as AppActions from './app';

// Merge all our actions together and return all creators
export const ActionCreators = Object.assign({},
    AppActions,
);
-EOF

cat <<'-EOF' > src/actions/types.js
// App wide actions
export const SET_APP_LOADING = 'SET_APP_LOADING';
-EOF

cat <<'-EOF' > src/actions/app.js
import * as types from './types';

/**
 * Trigger a loading state (to show an indicator)
 *
 * @param loading bool true or false
 * @returns {{type, loading: *}}
 */
export function setAppLoading(loading) {
    return {
        type: types.SET_APP_LOADING,
        loading,
    };
}
-EOF

cat <<'-EOF' > src/reducers/index.js
import { combineReducers } from 'redux';
import appReducer from './app';

// Combine all our reducers
// The keys we define here will be used in our component as "this.props.app.loading"
export default combineReducers({
    app: appReducer
});
-EOF

cat <<'-EOF' > src/reducers/app.js
import * as types from 'src/actions/types';

export default function appReducer(state = {loading: false}, action) {
    switch (action.type) {
        case types.SET_APP_LOADING:
            return {
                ...state,
                loading: action.loading
            };
        default:
            return state
    }
}
-EOF

cat <<'-EOF' > src/containers/HomeScreen/HomeScreen.js
import React, { Component } from 'react';
import { ActivityIndicator, Text, View, TouchableOpacity } from 'react-native';
import styles from './styles'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from "src/actions";

type Props = {};
class HomeScreen extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <View style={{height: 50}}>
                    {this.props.app.loading && <ActivityIndicator size="large" color="#000000" />}
                </View>
                <Text style={styles.instructions}>
                    Home screen {this.props.app.loading === true ? 'is loading' : 'is not loading'}
                </Text>
                <TouchableOpacity onPress={() => this.props.actions.setAppLoading(!this.props.app.loading)}>
                    <Text>Toggle Loading</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        ...state,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(ActionCreators, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
-EOF

# Install app logger (so we can log on our real device ipad)
brew install libimobiledevice

# you might need to do this
sudo chmod 777 /var/db/lockdown

# pair the device (tap trust on the ipad)
idevicepair pair

# !! dumps all the logs as they happen!! close the app, start it, all logs will output to terminal
idevicesyslog

# <Critical>: Attempting to change configurable attribute of unconfigurable property.
# <Critical>: Module AppRegistry is not a registered callable module (calling runApplication)