Problem

Your application has a <Header /> on every screen. With over a dozen screens, how do you avoid writing a haiku of configuration every time you build a new part of the application?

Solution

Cut down the repetition by implementing your own <ScreenHeader /> component.

In this example, I’m using the react-native-elements component library to render a <Header /> component. See Recipe 2.3 for an example of how to import a custom component.

A Home screen has the following JSX inside the render() function:

<View style={globalStyles.headerContainer}>
 <Header
   leftComponent={
     <Button
       icon={{name: 'arrow-back'}}
       buttonStyle={{
         backgroundColor: null,
         padding: 0,
       }}
       title=''
       color={colors.WHITE}
       onPress={this.backPressed}
     />}
   centerComponent={
     <Text
       style={globalStyles.siteHeaderText}
     >{this.props.data.me.first_name}</Text>
   }
   rightComponent={
     <Button
       icon={{name: 'home'}}
       buttonStyle={{
         backgroundColor: null,
         padding: 0,
       }}
       title=''
       color={colors.WHITE}
       onPress={this.goHome}
     />}
 />
</View>

A Course screen has something that looks very similar:

<View style={globalStyles.headerContainer}>
  <Header
    leftComponent={
      <Button
        icon={{name: 'arrow-back'}}
        buttonStyle={{
          backgroundColor: null,
          padding: 0,
        }}
        title=''
        color={colors.WHITE}
        onPress={this.back}
      />}
    centerComponent={
      <Text
        style={globalStyles.siteHeaderText}
      >{this.course().name}</Text>
    }
    rightComponent={
      <Button
        icon={{name: 'settings'}}
        buttonStyle={{
          backgroundColor: null,
          padding: 0,
        }}
        title=''
        color={colors.WHITE}
        onPress={this.goHome}
      />}
  />
</View>

I see a lot of repetition, especially given that every single screen will have some variation of this <Header />. Ideally, I would be able to reference a component that emphasizes the differences and hides the complexity:

<ScreenHeader
  leftComponentIcon='arrow-back'
  leftOnPress={this.back}
  centerText={this.course().name}
  rightIcon='settings'
  rightOnPress{this.goHome}
  />

Create a new file in your project in a components folder—components/screenHeader.js:

import React, { Component } from 'react';

import {
  Text,
  View,
} from 'react-native';

import {
  Button,
  Header,
} from 'react-native-elements';

import { colors, globalStyles } from '../styles';

import PropTypes from 'prop-types';

class ScreenHeader extends Component {

  render() {
    return <View style={globalStyles.headerContainer}>
      <Header
      leftComponent={
        <Button
          icon={{name: this.props.leftIcon}}
          buttonStyle={{
            backgroundColor: null,
            padding: 0,
          }}
          title=''
          color={colors.WHITE}
          onPress={this.props.leftOnPress}
        />
      }
      centerComponent={
        <Text style={globalStyles.siteHeaderText}>{this.props.centerText}</Text>
      }
      rightComponent={
        <Button
          icon={{name: this.props.rightIcon}}
          buttonStyle={{
            backgroundColor: null,
            padding: 0,
          }}
          title=''
          color={colors.WHITE}
          onPress={this.props.rightOnPress}
        />}
      />
    </View>
  }
}
ScreenHeader.propTypes = {
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  centerText: PropTypes.string,
  leftOnPress: PropTypes.func,
  rightOnPress: PropTypes.func,
};
export default ScreenHeader;

We can now keep our screen code focused on the different implementations and expose an API with a handful of PropTypes that the developer can pass to <ScreenHeader />.

Problem

How do we communicate to users that they need to wait?

Solution

Let’s add a progress bar. This is a great task to introduce the steps required to import React Native components. Here we will import the component and discuss linking the libART.a library to our project. In Recipe 3.4 we will create an indeterminate progress animation.

Most open source React Native components have comprehensive README.md files that describe how to include the component and whether it’s been designed to work in iOS, Android, or both.

Discussion

Start by adding react-native-progress to your project:

$> npm install react-native-progress --save
$> react-native link

Usually calling react-native link is all that’s required to add the necessary iOS or Android libraries to the project build process. In this case, react-native-progress relies on a special library for iOS called ReactART for drawing pie charts.

Let’s link the ReactART library manually after calling react-native link. Figure 2-1 shows a project I created called RNScratchPad in Xcode.

Figure 2-1. The RNScratchPad project shown in the Xcode interface

Expand the Libraries folder in the project view, as shown in Figure 2-2.

Figure 2-2. Choose Libraries → Add Files to add a new reference under Libraries

Start by adding a reference to the ART.xcodeproject file included with React Native in node_modules/react-native/Libraries/ART (Figure 2-3).

Figure 2-3. Find ART.xcodeproject in the react-native project files

Under Linked Frameworks and Libraries, find the + symbol. libART.a should be available as a library to add to your project (Figure 2-4).

Figure 2-4. Select libART.a from the list

Your project configuration should now include this reference (Figure 2-5).

Figure 2-5. Reference the project in your configuration

Now rebuild the project and deploy the app on your Simulator or development device. Let’s add a simple progress bar to one of our components:

import React, { Component } from 'react';
import {
  View
} from 'react-native';

import * as Progress from 'react-native-progress';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Progress.Pie progress={0.2} size={50} color="#2245FF" />
      </View>
    );
  }
}

You should see something like this in the Simulator:

Notice that by changing the progress attribute, the progress bar changes.

We can animate progress changes by relying on a local this.state.progress variable. Here is a more complete example:

import React, { Component } from 'react';
import {
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import * as Progress from 'react-native-progress';

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = { progress: 0.2 }
  }

  randomProgress = () => {
    const progress = Math.random();
    this.setState({ progress });
  }

  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <View style={{marginBottom: 10}}>
          <Progress.Pie borderWidth={2} borderColor='#62321B'
          unfilledColor='#F5F5F5'
            progress={this.state.progress} size={100} color='#D6C598' />
        </View>
        <TouchableHighlight onPress={this.randomProgress }
          style={{padding: 10, backgroundColor: '#CACACA', borderRadius: 5 }}>
          <Text style={{fontSize: 18, fontWeight: 'bold' }} >Apple Pie Me!</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Tapping <TouchableHighlight /> will result in different pie servings!

See Also

Learn how to animate the progress bar in Recipe 3.4.

Problem

How do you reuse a whole section of your React Native application in another project? For example, you might have created a component library that includes all of the visual identity requirements for your product. Naturally, you want to share this across multiple projects and only have to make visual changes for these components in one place. This approach enables reuse and also means that you can version portions of your application more easily and reinforce your product’s architectural boundaries. In my case, I’ve built a <PastryPicker /> component—critical to visualizing the relative amount of flour, sugar, butter, and eggs across baked goods (Figure 2-6).

Figure 2-6. The PastryPicker Component

Solution

The sample project includes one component that I will separate into its own NPM package, pastryPicker.js. See Recipe 1.1 for details.

The main application, App.js, references <PastryPicker />:

// App.js
import React, { Component } from 'react';
import {
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import { PastryPicker } from './pastryPicker';
export default class App extends Component {
  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <PastryPicker />
        </View>
    );
  }
};

The PastryPicker component lives in one file (note that the pastry icon characters pictured in Figure 2-6 have been omitted from the code for font reasons):

// pastryPicker.js
import React, { Component } from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

const PASTRIES = {
  croissant:    { label: 'Croissants',   flour: 0.7, butter: 0.5, sugar: 0.2,
  eggs: 0 },
  cookie:       { label: 'Cookies',      flour: 0.5, butter: 0.4, sugar: 0.5,
  eggs: 0.2},
  pancake:      { label: 'Pancakes',     flour: 0.7, butter: 0.5, sugar: 0.3,
  eggs: 0.3 },
  doughnut:     { label: 'Dougnuts',     flour: 0.5, butter: 0.2, sugar: 0.8,
  eggs: 0.1 },
};

export default class PastryPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPastry: 'croissant'
    }
  }

  setPastry = (selectedPastry) => {
    this.setState({ selectedPastry });
  }

  renderIngredient(backgroundColor, flex, label) {
    return <View  style={styles.ingredientColumn}>
      <View style={styles.bar} />
      <View style={{ backgroundColor, flex }} />
      <View style={styles.label}><Text>{label}</Text></View>
    </View>
  }

  render() {
    const { flour, butter, sugar, eggs } = PASTRIES[this.state.selectedPastry];
    return <View style={styles.pastryPicker}>
        <View style={styles.buttons}>
          {
            Object.keys(PASTRIES).map( (key) => <View key={key}
            style={styles.buttonContainer}>
              <TouchableHighlight
                style={[styles.button, {
                  backgroundColor: key === this.state.selectedPastry ?
                  '#CD7734' : '#54250B' }
                ]} underlayColor='CD7734' onPress={() => {
                this.setPastry(key) } }>
                <Text style={styles.buttonText} >{PASTRIES[key].label}</Text>
              </TouchableHighlight>
            </View>)
          }
        </View>
      <View style={styles.ingredientContainer}>
        {this.renderIngredient('#F2D8A6', flour, 'Flour')}
        {this.renderIngredient('#FFC049', butter, 'Butter')}
        {this.renderIngredient('#CACACA', sugar, 'Sugar')}
        {this.renderIngredient('#FFDE59', eggs, 'Eggs')}
      </View>
    </View>
  }
}

const styles = StyleSheet.create({
  pastryPicker: {
    flex: 1,
    flexDirection: 'column',
    margin: 20,
  },
  ingredientContainer: {
    flex: 1,
    flexDirection: 'row',
  },
  ingredientColumn: {
    flexDirection: 'column',
    flex: 1,
    justifyContent: 'flex-end',
  },
  buttonContainer: {
    margin: 10,
  },
  bar: {
    alignSelf: 'flex-start',
    flexGrow: 0,
  },
  button: {
    padding: 10,
    minWidth: 140,
    justifyContent: 'center',
    backgroundColor: '#5A8282',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 18,
    color: '#FFF',
  },
  buttons: {
    flexDirection: 'column',
    flexWrap: 'wrap',
    paddingRight: 20,
    paddingLeft: 20,
    flex: 0.3,
  },
  label: {
    flex: 0.2,
  },
});

Discussion

Let’s go through the steps required to pull a collection of components into a separate project where they can be included in multiple React Native projects.

In Recipe 2.2 we referenced an external NPM package for rendering progress bars. Our component is much simpler: it relies entirely on existing React Native components, which means that in our case we can simply create an NPM package with the correct dependencies.

Assuming you have NPM correctly installed, you should be able to create a new package from the command line. Create a folder for the package and run npm init inside it:

$> mkdir react-native-pastry-picker
$> cd react-native-pastry-picker
$> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

package name: (projects) react-native-pastry-picker
...

You will be presented with a series of questions (package name, version, main entry point, etc.). Use the defaults for now; you can change them later. Only the package name is important since that will be the package folder and the reference for the main application.

If the command is successful, a package.json file should be automatically created. Let’s add React as a development dependency—a required package for development purposes:

$> npm i --save-dev react

You should now have a node_modules folder and a package.lock file in the project file. Your package.json file should look something like this:

{
  "name": "react-native-pastry-picker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jon Lebensold",
  "license": "MIT",
  "devDependencies": {
    "react": "^16.0.0"
  }
}

You will notice that key main points to index.js. The index.js file should serve as a manifest for all public components. Let’s do a sanity check of our component by creating an index.js file that wraps a simple <Text /> component:

import React, { Component } from 'react';
import {
  Text,
  View,
} from 'react-native';

export class SanityCheck extends Component {
  render() {
    return <View><Text>I am an externally referenced component!</Text></View>
  }
}

We can now add the component to our main project with a relative reference and restart our development server. Once the package is ready to be published, we can change our package.json file to reference the published name on npmjs.com.

$> npm install --save ../react-native-pastry-picker
$> yarn start --reset-cache

We can adjust our App.js file to reference the new dependency:

import React, { Component } from 'react';
import {
  View
} from 'react-native';
import { SanityCheck } from 'react-native-pastry-picker'
export default class App extends Component<{}> {
  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center',
        alignItems: 'center' }}>
          <SanityCheck />
      </View>
    );
  }
}

The main application should render <SanityCheck /> as though it was part of the local library. You can now safely move the components out of the main project and update the index.js in react-native-pastry-picker to reference the components internally like this:

export { default as PastryPicker } from './pastryPicker';

See Also

Once your component library is taking shape, make sure you update the package.json file with the appropriate metadata fields. You will probably want to publish the project to NPM so that it can be referenced like any other React Native package.

If you need to call native libraries, then more setup will be required. I recommend looking at well-supported packages like react-native-camera. Remember that you can use this same approach for sharing application constants, stylesheets, and default typography or image assets as well!

Problem

How do we maintain all these different screens without losing track of the global state of our application? How do we ensure seamless transitions between pages? The React Navigation community project aims to address these challenges by providing a set of nesting navigator components.

Solution

Start by adding react-navigation to your project:

$> npm install --save react-navigation

Let’s break out our application into three navigators:

Root navigator

The top-level navigator for the application.

Guest navigator

Provides screen navigation before a user is logged in.

User navigator

Provides screen navigation inside the application. The root navigator is passed by reference via screenProps.

See how the navigators deliver the Login, About, Profile, and Dashboard screens in Figure 2-7.

Figure 2-7. Nested navigation route structure

This example uses two navigators, one of which relies on tab navigation at the bottom of the screen in iOS. See Recipe 3.3 for more information on dealing with vector images.

The styles were pulled into a styles.js file in order to keep the navigation code focused on the problem at hand:

// styles.js
import {
  StyleSheet
} from 'react-native';

export const styles = StyleSheet.create({

  container: {
    paddingTop: 30,
    flex: 1
  },

  paragraphText: {
    fontSize: 16,
    lineHeight: 20,
  },

  titleText: {
    fontSize: 24,
    lineHeight: 30,
  },

  primaryButton: {
    padding: 20,
    backgroundColor: '#124473'
  },

  primaryButtonText: {
    color: '#FFF',
    textAlign: 'center',
  },

  altButton: {
    padding: 20,
    backgroundColor: '#23CdA4'
  },

  altButtonText: {
    color: '#FFF',
    textAlign: 'center',
  }
});

There are four screens in this example: AboutScreen, LoginScreen, DashboardScreen, and ProfileScreen. Each screen has its own file and is referenced in App.js. The flow through the different screens can be seen in Figure 2-8.

// About Screen
import React, { Component } from 'react';
import {
  TouchableHighlight,
  View,
  Text
} from 'react-native';

import { styles } from './styles';

export default class AboutScreen extends Component<{}> {
  render() {
    return <View style={styles.container}>
      <Text style={styles.titleText} >About Screen</Text>
      <TouchableHighlight style={styles.primaryButton}
        onPress={this.props.navigation.goBack}
        <Text style={styles.primaryButtonText}>Go Back</Text>
      </TouchableHighlight>
    </View>
  }
}

Figure 2-8. The About Screen

See Figure 2-9 for an example of the LoginScreen component.

Figure 2-9. The Login Screen

// Login Screen
import React, { Component } from 'react';
import {
  TouchableHighlight,
  View,
  Text
} from 'react-native';

import { styles } from './styles';

export default class LoginScreen extends Component<{}> {
  about = () => {
    const { navigate } = this.props.navigation
    navigate('about');
  }

  login = () => {
    const { navigate } = this.props.navigation;
    // some login code here...
    navigate('user', { user: { name: 'Sam Smith',
    email: 'sam.smith@example.com' } })
  }

  render() {
    return <View style={styles.container}>
      <Text style={styles.titleText} >Login Screen</Text>
      <TouchableHighlight style={styles.primaryButton}
      onPress={this.about}>
        <Text style={styles.primaryButtonText}>About</Text>
      </TouchableHighlight>
      <TouchableHighlight style={[styles.altButton, { marginTop: 20 } ]}
      onPress={this.login}>
        <Text style={styles.altButtonText}>Login</Text>
      </TouchableHighlight>
    </View>
  }
}

The Dashboard Screen component extracts user() state from the RootNavigator (Figure 2-10).

Figure 2-10. The Dashboard Screen

// Dashboard Screen
import React, { Component } from 'react';
import {
  View,
  Text
} from 'react-native';

import { styles } from './styles';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class Screen extends Component {
  static navigationOptions = {
    title: 'Dashboard',
    tabBarIcon: ({ tintColor }) => <Icon name='home' color={tintColor} />
  }

  user() {
    const { rootNavigation } = this.props.screenProps;
    return rootNavigation.state.params.user;
  }

  render() {
    const { name, email } = this.user();
    return <View style={styles.container}>
      <Text style={styles.titleText} >{`Welcome, ${name} <${email}>,
      let's get cooking!`}</Text>
    </View>
  }
}

The Profile Screen (seen in Figure 2-11) demonstrates resetting the navigation state with the logout().

Figure 2-11. The Profile Screen

// Profile Screen
import React, { Component } from 'react';
import {
  TouchableHighlight,
  View,
  Text
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { styles } from './styles';

export default class Screen extends Component<{}> {
  static navigationOptions = {
    title: 'Profile',
    tabBarIcon: ({ tintColor }) => <Icon name='user' color={tintColor} />
  }

  logout = () => {
    const { rootNavigation } = this.props.screenProps;
    rootNavigation.goBack()
  }

  render() {
    return <View style={styles.container}>
      <Text style={styles.titleText} >Profile Screen</Text>
      <TouchableHighlight style={styles.primaryButton} onPress={this.logout}>
        <Text style={styles.primaryButtonText}>Log Out</Text>
      </TouchableHighlight>
    </View>
  }
}

Finally, App.js ties the whole thing together with three navigators:

// App.js
import React, { Component } from 'react';
import { StackNavigator, TabNavigator } from 'react-navigation';

// Screens
import DashboardScreen from './dashboardScreen';
import ProfileScreen from './profileScreen';
import LoginScreen from './loginScreen';
import AboutScreen from './aboutScreen';

// Navigators
const GuestRouteConfig = {
  login: { screen: LoginScreen },
  about: { screen: AboutScreen },
}
const GuestNavigator = StackNavigator(GuestRouteConfig, { headerMode: 'none'} );

const UserRouteConfig = {
  dashboard: { screen: DashboardScreen },
  profile:   { screen: ProfileScreen },
}

const UserNavigator = TabNavigator(UserRouteConfig, {
activeTintColor: '#125000' });

// Pass the RootNavigator down to the UserNavigator:
const WrappedNavigator = ({ navigation }) => <UserNavigator
  screenProps={ { rootNavigation: navigation } } />

const RootRouteConfig = {
  guest: { screen: GuestNavigator },
  user: { screen: WrappedNavigator },
}

export default StackNavigator(RootRouteConfig, { headerMode: 'none' });

Discussion

Even though this is a lengthy example, it is a very common pattern and worth exploring. You will notice that the UserNavigator is actually wrapped in a higher order component, which passes the RootNavigator down as an additional screenProp called rootNavigation. This parameter is critical for passing successful login parameters down to the UserNavigator and enables the ProfileScreen to trigger a logout, resetting the RootNavigator to a default state.

See Also

React Navigation works very well with libraries like Redux and the ApolloClient for handling client/server interactions. The React Navigation Redux Integration guide provides a starting point. React Navigation isn’t the only navigation library available to React Native developers. React Native Navigation is a well-maintained alternative.

Problem

How do you manage state components without creating bidirectional dependencies? These problems are everywhere in application design. A common case is a long-running task that can be interrupted by a user, but also must announce its completion. Enter global state management with Redux. This example app will store a password based on four word-tiles. Once logged in, users will be able to set some secret text. This app enables a user to:

1. Set a tile-based password and log in (like a pin-pad)

2. Set some secret text

3. Log out

4. Log in with the password

5. Reset the application state

6. Correct their login attempt and retry

Solution

First we need a few libraries for Redux and React to work together. I also use redux-logger in development mode to log all state transitions in the React remote debugger.

Install react-redux, redux, and redux-logger (optional):

$>npm i --save react-redux
$>npm i --save redux
$>npm i --save redux-logger

The project folder structure looks like this:

App.js
reduxStore.js
...
src
├── actions.js
├── appContainer.js
├── components
│   ├── tile.js
│   └── tileMap.js
├── constants.js
├── loginForm.js
├── myHome.js
├── reducers.js
├── setPassword.js
├── styles.js
└── types.js

The same TileMap component can be used to set a password, as in Figure 2-12.

Figure 2-12. Users can access a secret message after setting a visual password by selecting a set of tiles

// App.js
import React, { Component } from 'react';
import AppContainer from './src/appContainer';
import { Provider } from 'react-redux';
import store from './reduxStore';

export default class App extends Component<{}> {
  render() {
    return  <Provider store={store}><AppContainer /></Provider>
  }
}

// reduxStore.js
import * as reducers from './src/reducers'
import { createStore, applyMiddleware, combineReducers, compose} from 'redux';
import logger from 'redux-logger';
export default createStore(
  combineReducers(reducers),
  applyMiddleware(logger)
);

// src/appContainer.js
import ActionCreators from './actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import SetPassword from './setPassword';
import LoginForm from './loginForm';
import MyHome from './myHome';
import { styles } from './styles';

class AppContainer extends Component {

  renderLoginMessage() {
    return <Text style={styles.loginMessage}>
      {this.props.appState.loginMessage}
    </Text>
  }

  render() {
    const { isLoggedIn, loginMessage, isPasswordSet } = this.props.appState;
    return <View style={styles.container}>
      { isLoggedIn && <MyHome /> }
      { !isLoggedIn && !isPasswordSet && <SetPassword /> }
      { !isLoggedIn && isPasswordSet && <LoginForm /> }
      { loginMessage && this.renderLoginMessage() }
    </View>
  }
}

export default connect(
  ({ appState }) => { return { appState } },
  (dispatch) => bindActionCreators(ActionCreators, dispatch)
)(AppContainer);

// src/types.js
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
export const RESET = 'RESET';
export const SET_PASSWORD_AND_LOGIN = 'SET_PASSWORD_AND_LOGIN';
export const SET_SECRET = 'SET_SECRET';
export const SET_LOGIN_MESSAGE = 'SET_LOGIN_MESSAGE';

// src/actions.
import * as types from './types';
// Used for authentication
import store from '../reduxStore';

function setSecret(secret) {
  return {
    type: types.SET_SECRET,
    secret
  }
}

function setPasswordAndLogin(password) {
  return {
    type: types.SET_PASSWORD_AND_LOGIN,
    password
  }
}

function attemptLogin(password) {
  const { user } = store.getState();
  return (user.password === password) ? { type: types.LOGIN } : {
    type: types.SET_LOGIN_MESSAGE,
    loginMessage: "Login Incorrect"
  }
}

function reset() {
  return {
    type: types.RESET,
  }
}

function logout() {
  return {
    type: types.LOGOUT,
  }
}

function setLoginMessage(message) {
  return {
    type: types.SET_LOGIN_MESSAGE,
    message
  }
}

export default ActionCreators = {
  setSecret,
  setPasswordAndLogin,
  attemptLogin,
  reset,
  logout,
  setLoginMessage,
}

// src/reducers.js
import * as types from './types'
// Helper function for avoiding switch() statements (commonly viewed
// as a code smell) in reducers:
function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action);
    } else {
      return state;
    }
  }
}

export const user = createReducer({ password: null, secret: null }, {
  [types.RESET](state, { } ) {
    return { password: null, secret: null }
  },
  [types.SET_SECRET](state, { secret } ) {
    return { ...state, secret }
  },
  [types.SET_PASSWORD_AND_LOGIN](state, { password } ) {
    return { ...state, password };
  },
});

const initialAppState = {
  loginMessage: null,
  isLoggedIn: false,
  isPasswordSet: false
};

export const appState = createReducer(initialAppState, {
  [types.LOGOUT](state, {} ) {
    return { ...state, isLoggedIn: false }
  },
  [types.LOGIN](state, {} ) {
    return { ...state, isLoggedIn: true, loginMessage: null }
  },
  [types.SET_LOGIN_MESSAGE](state, { loginMessage } ) {
    return { ...state, loginMessage }
  },
  [types.RESET](state, { } ) {
    return { ...initialAppState };
  },
  [types.SET_PASSWORD_AND_LOGIN](state, { } ) {
    return { isLoggedIn: true, isPasswordSet: true, loginMessage: null }
  },

});

// src/styles.js
import {
  StyleSheet
} from 'react-native';

export const styles = StyleSheet.create({
  loginMessage: {
    margin: 10,
    fontSize: 16,
    padding: 10
  },

  rootContainer: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#FFF',
  },

  buttonGroup: {
    marginTop: 10,
  },

  container: {
    paddingTop: 30,
    flex: 1
  },

  title: {
    fontSize: 24,
    lineHeight: 30,
    textAlign: 'center',
  },

  tileRow: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-around' ,
  },

  button: {
    borderWidth: 1,
    borderColor: '#333',
    borderStyle: 'solid',
    height: 50,
  },

  buttonText: {
    color: '#144595',
    fontWeight: 'bold',
    fontSize: 16,
    padding: 10,
    textAlign: 'center',
  },
});

// src/constants.js
export const TILES = {
  'Pizza': {    text: 'Pizza',     value: 'pizza',     index: null,
  isActive: false },
  'Pie': {      text: 'Pie',       value: 'pie',       index: null,
  isActive: false },
  'Salad': {    text: 'Salad',     value: 'salad',     index: null,
  isActive: false },
  'Omelette': { text: 'Omelette',  value: 'omelette',  index: null,
  isActive: false },
}

// src/components/tile.js
import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  Text
} from 'react-native'

export default function Tile({ text, id, isActive, onPress }) {
  const activeStyle = isActive ? { borderColor: '#F00' } : null;
  return <TouchableHighlight style={[styles.tile, activeStyle ]}
  onPress={() => onPress(id) }>
    <Text style={styles.tileText}>{text}</Text>
  </TouchableHighlight>
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#FFF',
  },

  headerText: {
    color: '#144595',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },

  header: {
    borderBottomWidth: 1,
    borderBottomColor: '#222',
    borderStyle: 'solid',
  },

  tileText: {
    fontSize: 16,
    textAlign: 'center',
    marginTop: 60,
  },

  tile: {
    width: 150,
    height: 150,
    alignItems: 'center',
    backgroundColor: '#CCC',
    borderRadius: 20,
    borderColor: '#222',
    borderWidth: 1,
    borderStyle: 'solid',
    margin: 10,

  }
})

// src/components/tileMap.js
import React, { Component } from 'react';
import {
  View,
  TouchableHighlight,
  Text
} from 'react-native';

import Tile from './tile';
import { TILES  } from '../constants';
import { styles } from '../styles';

function computePassword(tiles) {
  let password = []
  Object.keys(tiles).forEach( (key) => {
    const tile = tiles[key];
    if (tile.isActive) {
      password[tile.index] = tile.value;
    }
  });
  // chop off the 0
  return password.slice(1).join('-');
}

export default class TileMap extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = { tiles: {...TILES}, index: 0 }
  }

  reset = () => {
    this.setState( { tiles: {...TILES}, index: 0 });
    this.props.onTileChanged(computePassword(this.state.tiles));
  }

  setPassword = () => {
    this.props.setPasswordAndLogin(this.state.tiles);
  }

  tilePressed = (id) => {
  if (this.state.tiles[id].isActive) { return; }
  this.setState((prevState) => {
    const tiles = prevState.tiles;
    const newIndex = prevState.index + 1;
    const currentTile = tiles[id];
    tiles[id] = { ...currentTile,
      index: newIndex,
      text: `(${newIndex}) - ${currentTile.text}`,
      isActive: true
    }
    return {...tiles, index: newIndex }
  });
  this.props.onTileChanged(computePassword(this.state.tiles));
}

  render() {
    return <View>
      <View style={styles.tileRow}>
        {Object.keys(this.state.tiles).map( (key) => {
            const tile = this.state.tiles[key];
            return <Tile {...tile} id={key} key={key} onPress={this.tilePressed} />
            }
          )}
      </View>
      <View style={styles.buttonGroup}>
        <TouchableHighlight style={styles.button} onPress={this.reset}>
          <Text style={styles.buttonText}>Reset</Text>
        </TouchableHighlight>
        {this.props.children}
      </View>
    </View>
  }
}

// src/setPassword.js
import React, { Component } from 'react';
import {
  View,
  TouchableHighlight,
  Text
} from 'react-native'

import ActionCreators from './actions'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import TileMap from './components/tileMap'
import { styles } from './styles'

class SetPassword extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = { password: null }
  }

  onTileChanged = (password) => {
    this.setState( { password });
  }

  setPassword = () => {
    this.props.setPasswordAndLogin(this.state.password);
  }

  render() {
    return <View>
      <Text style={styles.title}>Set Password</Text>
      <TileMap onTileChanged={this.onTileChanged}>
        <TouchableHighlight style={styles.button} onPress={this.setPassword}>
          <Text style={styles.buttonText}>Set Password and Login</Text>
        </TouchableHighlight>
      </TileMap>
    </View>
  }
}

export default connect(
  ({ user }) => { return { user } },
  (dispatch) => bindActionCreators(ActionCreators, dispatch)
)(SetPassword);

// src/myHome.js
import React, { Component } from 'react';
import {
  TextInput,
  TouchableHighlight,
  View,
  Text
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Tile from './components/tile';
import { TILES  } from './constants';
import { styles } from './styles';

class MyHome extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = { secret: props.user.secret || '' }
  }

  saveSecret = () => {
    this.props.setSecret(this.state.secret);
  }

  logout = () => {
    this.props.logout();
  }

  render() {
    return <View>
      <Text>Enter Your Secret:</Text>
      <TextInput value={this.state.secret}
        style={{borderWidth: 1, borderColor: "#CCC", padding: 5, }}
        onChangeText={(secret) => { this.setState({ secret }) }} />
      <TouchableHighlight style={styles.button} onPress={this.saveSecret}>
        <Text style={styles.buttonText}>Save</Text>
      </TouchableHighlight>
      <TouchableHighlight style={styles.button} onPress={this.logout}>
        <Text style={styles.buttonText}>Logout</Text>
      </TouchableHighlight>
    </View>
  }
}

export default connect(
  ({ user }) => ({ user }),
  (dispatch) => bindActionCreators(ActionCreators, dispatch)
)(MyHome);

import React, { Component } from 'react';
import {
  View,
  TouchableHighlight,
  Text
} from 'react-native';

import ActionCreators from './actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import TileMap from './components/tileMap';
import { styles } from './styles';

class LoginForm extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = { password: null }
  }

  onTileChanged = (password) => {
    this.setState( { password });
  }

  resetAccount = () => {
    this.props.reset();
  }

  login = () => {
    this.props.attemptLogin(this.state.password);
  }

  render() {
    return <View>
      <Text style={styles.title}>Login</Text>
      <TileMap onTileChanged={this.onTileChanged}>
        <TouchableHighlight style={styles.button} onPress={this.login}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.button} onPress={this.resetAccount}>
          <Text style={styles.buttonText}>Reset Account</Text>
        </TouchableHighlight>
      </TileMap>
    </View>
  }

}

export default connect(
  ({ user }) => ({ user }),
  (dispatch) => bindActionCreators(ActionCreators, dispatch)
)(LoginForm);

Discussion

Redux can be intimidating if you are new to JavaScript. This is because the library is simple, but not simplistic: the programming concepts are profound and require some experience to grasp, but there are few of them and they elegantly support one another. It’s helpful to think of Redux as a software design pattern and a JavaScript library at the same time. Adopting one without the other will leave a sour taste in your mouth.

Even if you decide to use another state management library, you will probably face a library, like react-navigation, with Redux under the hood. Understanding the programmer attitudes around mutable state, pure functions, composition, and higher order functions will bring state management in the React ecosystem into focus.

I would not be able to do justice to the fantastic Redux documentation and the incredible wealth of free video tutorials (including some of my own on YouTube). However, there are three principles worth keeping in mind as we implement Redux in our app:

Single source of truth: The state of your whole application is stored in an object tree within a single store. … State is read-only: The only way to change the state is to emit an action, an object describing what happened. … Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.

redux.js.org, Three Principles

See Also

redux-thunk and redux-saga provide some helpful extensions to the Redux architecture for dealing with any asynchronous calls. Given that your app is likely going to talk to a server or read sensor data, asynchronous actions are inevitable.

Problem

How do we reuse as many styles as possible and keep the application’s look and feel consistent?

Solution

All applications will have a common set of applicable fonts, colors, and component styles. These might include how rounded a button corner should be, or what the appropriate padding should be between typographic elements. I like to keep these bits of style information in a styles.js file in my project root with key sections that will broadly define the aesthetic of my application:

1. Color Palette

2. Typography Choices

3. Global Styles

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

// COLOR
export const colors = {
  PRIMARY: '#005D64',
  SECONDARY: '#CA3F27',
}

// TYPOGRAPHY
const scalingFactors = {
  small: 40,
  normal: 30,
  big: 20,
}


export const fontSizes = {
  H1: {
    fontSize: width / scalingFactors.big,
    lineHeight: (width / scalingFactors.big) * 1.3,
  },

  P: {
    fontSize: width / scalingFactors.normal,
    lineHeight: (width / scalingFactors.normal) * 1.3,
  },

  SMALL: {
    fontSize: width / scalingFactors.small,
  },
}

// GLOBAL STYLES
export const globalStyles = {
  textHeader: {...fontSizes.H1,
    color: colors.PRIMARY,
    paddingTop: 20,
    fontWeight: 'bold',
  },
}

import React from 'react';
import {
  Text,
} from 'react-native';
import { globalStyles, colors } from '../styles';

export function TextHeading  (props) {
  return <Text style={globalStyles.textHeader} >{props.children}</Text>
}

export function SecondaryTextHeading(props) {
  return <Text
    style={[globalStyles.textHeader, { color: colors.SECONDARY } ]} >
      {props.children}
  </Text>
}

{
  fontSize: width / scalingFactors.big,
  lineHeight: (width / scalingFactors.big) * 1.3,
  color: colors.SECONDARY,
  paddingTop: 20,
  fontWeight: 'bold',
}

See Also

There are some great component libraries in the React Native ecosystem. react-native-elements provides an excellent set of cross-platform components with some of the most common components. NativeBase accomplishes the same goals with a more featureful component library. These libraries are a great way of ensuring that your app will be functional and consistent.

react-native-material-kit aims to provide a complete component library based on Google’s Material Design.

If you find yourself customizing every component, you might be better off developing your own component library.

Problem

How do you build a flexible layout system that will work with different device sizes? Using just a handful of style declarations we can build complex views like the one in Figure 3-1.

Figure 3-1. A 3-column flexbox layout

Solution

The layout in Figure 3-1 was rendered using this simple component. While I would recommend using the StyleSheet class for performance and reusability, writing the styles inline helps illustrate how each parent <View /> configures the flow direction of the child <View />:

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';

export default class ThreeColumns extends Component {

  sidebar() {
    const avatarStyle = {
      width: 40,
      height: 40,
      borderRadius: 40,
      justifyContent: 'center',
      backgroundColor: '#A0'
    }
    return <View style={{ flex: 0.2,  backgroundColor: '#333' }}>
      <View style={{ flex: 0.2,   backgroundColor: '#666',
      flexDirection: 'row' }}>
        <View style={{ width: 50, padding: 5, backgroundColor: '#000' }}>
          <View style={avatarStyle} />
        </View>
      </View>
      <View style={{ flex: 0.8 }} />
    </View>
  }

  body() {
    return <View style={{ flex: 0.5, backgroundColor: '#FFF' }}>
      <Text style={{padding: 40, fontSize: 22}}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Fusce vestibulum tempor nisl.
      </Text>
    </View>
  }

  rightBar() {
    return <View style={{ flex: 0.1, backgroundColor: '#FFA' }}></View>
  }

  render() {
    return (
      <View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#FFF' }}>
        {this.sidebar()}
        {this.body()}
        {this.rightBar()}
      </View>
    );
  }
}

Discussion

Flexbox layouts originated in the web design community as a mechanism for handling the challenge of an ever-changing browser window. Fortunately for web developers, you are probably already familiar with the CSS implementation of flexbox, so you should have little trouble adjusting to React Native’s implementation.

See Also

The React Native documentation provides a helpful guide for laying out flexbox views.

Problem

How do you decide the best way to display vector images in your application?

Solution

Working with images and binaries is easily done with require() statements, but vectors and icons are special. They do not render out of the box in Android or iOS.

Different solutions exist depending on whether you have a number of vectors files, the complexity of the design, whether or not there are multiple colors in the design, and if you need to target a number of platforms.

Convert to images

The simplest solution in some cases is simply to convert the file into a rasterized file format, like PNG or JPG. The React Native packager is smart enough to detect these dependencies and bundle them together. In order for the file to render correctly for different screen densities, it’s helpful to provide alternative versions of the same file. In this case, I have a vector of a lightbulb, bulb.svg, which has been converted into a number of different pixel density equivalent images:

components
└── images
    ├── bulb.svg
    ├── bulb@1x.android.png
    ├── bulb@1x.ios.png
    ├── bulb@2x.android.png
    ├── bulb@2x.ios.png
    ├── bulb@3x.android.png
    ├── bulb@3x.ios.png
    ├── bulb@4x.android.png
    └── index.js

Vector editing programs like Adobe Illustrator provide an “Export to Screens” function, making exporting different pixel densities easy, as shown in Figure 3-2.

Figure 3-2. Export to Screens capability in Adobe Illustrator

The index.js file uses a require() statement that can infer the correct image and platform to load:

import React, { Component } from 'react';
import { Image } from 'react-native';

export const Bulb = () => <Image source={require('./bulb.png')} />

In the main application, you can now reference the image as though it were any other React component:

import { Bulb } from './components/images'
export default class App extends Component<{}> {
  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center',
        alignItems: 'center' }}>
        <Bulb />
      </View>
    );
  }
}

There are a couple of solutions to vectors: converting them to SVG markup and using a library or converting them to fonts.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
viewBox="0 0 86 114">
   <defs>
      <style>.cls-1{fill:#dcdfe1;}.cls-1,.cls-4,.cls-5{stroke:#555e65;
      stroke-miterlimit:10;
      stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#faf7de;}
      .cls-4,.cls-5{fill:none;}
			.cls-4{opacity:0.5;}
      </style>
   </defs>
   <title>bulb</title>
   <g id="Lightbulb">
      <ellipse class="cls-1" cx="43" cy="96.61" rx="6.77" ry="5.42" />
      <ellipse class="cls-1" cx="43" cy="92.55" rx="10.16" ry="5.42" />
      <ellipse class="cls-1" cx="43" cy="88.48" rx="10.16" ry="5.42" />
      <ellipse class="cls-1" cx="43" cy="84.42" rx="10.16" ry="5.42" />
      <path class="cls-2" d="M70.08,39.06A27.09,27.09,0,1,0,23.44,58,20,20,
				0,0,1,29, 72.21v3.41c0,5.61,6.52,10.16,14,
				10.16s14-4.55,14-10.16v-3.4a19.94,19.94,0,0,1,
				5.52-14.16A26.78,26.78,0,0,0,70.08,39.06Z" />
      <path class="cls-3" d="M44.5,85.1C38.15,85.1,33,81.45,33,77V73.57a22.24,
				22.24,0,0,0-6.45-15.62,25,25,0,0,1,
				16-42.52q.9-.06,1.82-.06a25.08,25.08,0,0,1,25,
				25.05A24.83,24.83,0,0,1,62.27,58,22,22,0,0,0,56,
				73.57V77C56,81.45,50.85,85.1,44.5,85.1Z" />
      <path class="cls-4" d="M34.2,79c0-3,3.94-5.42,8.8-5.42S51.8,76,51.8,79" />
      <path class="cls-5" d="M50.45,42.44h.15A4.62,4.62,0,0,0,46,
				47.18V52h4.45a4.77,4.77,0,0,0,4.74-4.78v0A4.76,
				4.76,0,0,0,50.45,42.44Z" />
      <path class="cls-5" d="M35.55,42.44h-.15A4.62,4.62,0,0,1,40,
				47.18V52H35.55a4.77,4.77,0,0,1-4.74-4.78v0A4.76,
				4.76,0,0,1,35.55,42.44Z" />
      <polyline class="cls-5" points="46 79 46 52 40 52 40 79" />
      <path class="cls-5" d="M70.08,39.06A27.09,27.09,0,1,0,23.44,58,20,20,
				0,0,1,29,72.21v3.41c0,5.61,6.52,10.16,14,
				10.16s14-4.55,14-10.16v-3.4a19.94,19.94,0,0,1,
				5.52-14.16A26.78,26.78,0,0,0,70.08,39.06Z" />
   </g>
</svg>

import React, { Component } from 'react';
import Svg,{
    Ellipse,
    Path,
    Polyline,
} from 'react-native-svg';

export default function() {
  return <Svg height="130" width="100">
    <Ellipse cx="43" cy="96.61" rx="6.77" ry="5.42"   fill="#dcdfe1"
    stroke="#555e65" strokeWidth="2" />
    <Ellipse cx="43" cy="92.55" rx="10.16" ry="5.42"  fill="#dcdfe1"
    stroke="#555e65" strokeWidth="2"/>
    <Ellipse cx="43" cy="88.48" rx="10.16" ry="5.42"  fill="#dcdfe1"
    stroke="#555e65" strokeWidth="2"/>
    <Ellipse cx="43" cy="84.42" rx="10.16" ry="5.42"  fill="#dcdfe1"
    stroke="#555e65" strokeWidth="2"/>
    <Path fill="#Faf7de"  d="M70.08,39.06A27.09,27.09,0,1,0,23.44,58,20,20,0,
			0,1,29,72.21v3.41c0,5.61,6.52,10.16,14,10.16s14-4.55,
			14-10.16v-3.4a19.94,19.94,0,0,1,
			5.52-14.16A26.78,26.78,0,0,0,70.08,39.06Z" />
    <Path fill="none" d="M44.5,85.1C38.15,85.1,33,81.45,33,77V73.57a22.24,22.24,
			0,0,0-6.45-15.62,25,25,0,0,1,16-42.52q.9-.06,
			1.82-.06a25.08,25.08,0,0,1,25,25.05A24.83,24.83,
			0,0,1,62.27,58,22,22,0,0,0,56,73.57V77C56,81.45,50.85,
			85.1,44.5,85.1Z" />
    <Path fill="none" d="M34.2,79c0-3,3.94-5.42,8.8-5.42S51.8,76,51.8,79" />
    <Path stroke="#555e65" strokeWidth="2" fill="none" d="M50.45,42.44h.15A4.62,
			4.62,0,0,0,46,47.18V52h4.45a4.77,4.77,
			0,0,0,4.74-4.78v0A4.76,4.76,0,0,0,
			50.45,42.44Z" />
    <Path stroke="#555e65" strokeWidth="2" fill="none" d="M35.55,42.44h-.15A4.62,
			4.62,0,0,1,40,47.18V52H35.55a4.77,4.77,0,0,
			1-4.74-4.78v0A4.76,4.76,0,0,1,35.55,42.44Z" />
    <Polyline stroke="#555e65" strokeWidth="2" fill="none"
    points="46 79 46 52 40 52 40 79" />
    <Path stroke="#555e65" strokeWidth="2" fill="none" d="M70.08,39.06A27.09,
			27.09,0,1,0,23.44,58,20,20,0,0,1,29,72.21v3.41c0,
			5.61,6.52,10.16,14,10.16s14-4.55,14-10.16v-3.4a19.94,
			19.94,0,0,1,5.52-14.16A26.78,26.78,0,0,0,70.08,39.06Z" />
  </Svg>
}

Converting it to a font

If you plan on using the vector in multiple colors and it doesn’t contain any color details, consider making a custom font. IcoMoon makes it easy to turn your vector art into a single font (Figure 3-3).

Figure 3-3. The IcoMoon website makes it easy to build a custom font from SVGs

This approach harkens to the Wyndings font developed by Microsoft decades ago and uses the font file format to represent vector images.

The react-native-vector-icons library provides a set of font wrapper functions in addition to commonly used icon sets like FontAwesome, MaterialIcons, and Ionicons.

Install it like any other React Native package via NPM:

$> npm install react-native-vector-icons --save
$> react-native link

A folder will be created in android/app/src/main/assets/fonts for Android as shown in Figure 3-4.

Figure 3-4. Android Studio requires a copy of the font

The linker should also add a Resources folder to your iOS project file that contains the set of free fonts. I suggest making sure that the free fonts provided are rendering correctly in your application before loading any custom fonts.

To add an icon set you’ve downloaded from IcoMoon, you will need two files from the ZIP file provided by IcoMoon: selection.json and icomoon.ttf. The IcoMoon package will compile all your vector images into different character keys of a font.

For iOS, you will then need to reference the icomoon.ttf file in the Resources folder and include it as part of the list of Fonts provided by application in the info.plist as shown in Figure 3-5. For Android, copy the icomoon.ttf file to the android/app/src/main/assets/fonts folder.

Figure 3-5. Configure Xcode to reference icomoon.ttf

You can now reference the component by icon name. Following is an example of using the icomoon.ttf file with an icon called webinar next to a FontAwesome icon called rocket:

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

// Custom IcoMoon Icon
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './fonts/selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);


export default class App extends Component<{}> {
  render() {
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Icon name='webinar' size={30} color='#F00' />
        <FontAwesomeIcon name='rocket' size={30} color='#333' />
      </View>
    );
  }
}

Discussion

Any binary assets need to be bundled with your React Native project. iOS and Android will both need references to those assets.

Problem

How do you communicate that a task is in process when you don’t know how long it will take?

Solution

Indeterminate progress indicators help you buy time while your application finishes loading. Let’s start by defining a constructor with a local state variable in the components/loading.js file:

  constructor(props) {
    super(props);
    this.state = {
      loop: new Animated.Value(0),
    };
  }

The loop variable will refer to an instance of Animated.Value that increments from 0 to 1.

componentDidMount() is a special function React will call before it renders a component for the first time. We will use this hook into the render loop to configure our loop:

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.loop, {
        toValue: 1,
        duration: 500,
      }),
    ).start();
  }

Finally we will set up an interpolation function so that a corresponding rotation degree results from every value of this.state.loop between 0 and 1. We do not have a direct reference to the animation loop because all interpolation is happening within native components that we are configuring. This approach ensures smooth animations across platforms.

The render() function relies on react-native-progress first presented in Recipe 2.2:

  render() {
    const interpolation = this.state.loop.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    })
    const animationStyle = {
      transform: [ { rotate: interpolation }  ]
    }
    return <View>
      <Animated.View style={animationStyle}>
        <Pie borderWidth={2} progress={0.2} size={100} color='#2224FF' />
      </Animated.View>
    </View>
  }

The completed <Loading /> component looks like this:

import React, { Component } from 'react';
import {
  Animated,
  View
} from 'react-native';

import Progress, { Pie } from 'react-native-progress';

export default class Loading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loop: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.loop, {
        toValue: 1,
        duration: 500,
      }),
    ).start();
  }

  render() {
    const interpolation = this.state.loop.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    })
    const animationStyle = {
      transform: [ { rotate: interpolation }  ]
    }
    return <View>
      <Animated.View style={animationStyle}>
        <Pie borderWidth={2} progress={0.2} size={100} color='#2224FF' />
      </Animated.View>
    </View>
  }
}

Discussion

In this example, you will notice that the animation is applied to an <Animated.View /> component instead of a regular <View /> component. These components are designed to accept values from either an interpolation or an Animated.Value component. This approach avoids calling on the React.js render pipeline, which would increase the overhead required to render a single frame of the animation.

You should be able to include the <Loading /> component in your application and watch a spinning pie animation.

See Also

The React Native documentation provides an extensive guide explaining some of the design choices. There are also plenty of examples.