Problem

How do you design an interface that provides informed consent for users? Ideally, you want to delay requesting permission for hardware until you absolutely need it. In this example, we provide context ensuring that the user gives you access to her camera.

Solution

Let’s use the react-native-camera component. Another library, react-native-permissions, will provide us with a standard API for seeing whether we can start using the camera. Begin by installing it from the command line:

$> npm install react-native-camera --save
$> npm install react-native-permissions --save
$> react-native link

Now add a description under “Privacy - Camera Usage Description” in the Info.plist file in Xcode as shown in Figure 4-2.

Figure 4-2. The Info.plist lists your hardware requirements

Create your own <SimpleCamera /> component that will wrap some basic functionality:

// modalCamera.js
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Image,
  View,
  TextInput,
  TouchableHighlight
} from 'react-native'

import Camera from 'react-native-camera';

export default class ModalCamera extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cameraType: Camera.constants.Type.back
    }
  }

  async capturePhoto() {
    const data = await this.camera.capture();
    this.props.onPhoto(data);
  }

  switchCamera = () => {
    const { Type } = Camera.constants;
    const cameraType = this.state.cameraType === Type.back ?
    Type.front : Type.back;
    this.setState({ cameraType });
  }

  takePicture = () => {
    this.capturePhoto();
  }


  render() {
    return <View style={{flex: 1, backgroundColor: 'blue' }}>
      <Camera
          ref={(cam) => { this.camera = cam; }}
          aspect={Camera.constants.Aspect.fill}
          captureTarget={Camera.constants.CaptureTarget.disk}
          captureAudio={false}
          style={styles.container}
          type={this.state.cameraType}>
          <View style={styles.buttonRow}>
            <TouchableHighlight style={styles.button}
            onPress={this.switchCamera}>
              <Text style={styles.buttonText}>Switch</Text>
            </TouchableHighlight>
            <TouchableHighlight style={styles.button}
            onPress={this.takePicture}>
              <Text style={styles.buttonText}>Snap Dish</Text>
            </TouchableHighlight>
          </View>
      </Camera>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "transparent",
  },
  buttonRow: {
    flexDirection: "row",
    position: 'absolute',
    bottom: 25,
    right: 0,
    left: 0,
    justifyContent: "center"
  },
  button: {
    padding: 20,
    borderWidth: 3,
    borderColor: "#FF0000",
    margin: 15
  },
  buttonText: {
    color: "#FFF",
    fontWeight: 'bold'
  },
})

The App.js file will highlight some of the potential states for the camera hardware on the device. By using react-native-permissions, we can create a user experience where someone is alerted only when the camera request needs to be made. This library also claims to support the latest Android permission checks:

// App.js
import React, { Component } from 'react';
import {
  Alert,
  StyleSheet,
  TouchableHighlight,
  View,
  Text
} from 'react-native'
import SimpleCamera from './simpleCamera'
import Permissions from 'react-native-permissions'
export default class App extends Component {

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

  componentDidMount() {
    this.determinePermission();
  }

  async determinePermission(){
    const cameraPermission = await Permissions.check('camera')
    this.setState({ cameraPermission });
  }

  async requestCamera() {
    const cameraPermission = await Permissions.request('camera');
    this.setState({ cameraPermission });
  }

  photoTaken = ({ path }) => {
    Alert.alert(`Photo Path: ${path}`)
  }

  requestPermission = () => {
    this.requestCamera();
  }

  renderDenied() {
    return <View>
      <Text style={styles.textHeading}>Looks like you do not want
      to take any photos.</Text>
      <Text style={styles.textHeading}>
        Please enable camera functionality in your application settings
      </Text>
    </View>
  }

  renderCameraRequest() {
    return <View>
      <Text style={styles.textHeading}>
        Let Pastry Cookbook share your dishes with the world!
      </Text>
      <TouchableHighlight style={styles.button}
      onPress={this.requestPermission}>
        <Text style={styles.buttonText}>Enable Camera</Text>
      </TouchableHighlight>
    </View>
  }


  render() {
    const { cameraPermission } = this.state;
    return <View style={styles.container}>
      { cameraPermission === "undetermined" && this.renderCameraRequest() }
      { cameraPermission === "authorized" && <SimpleCamera
      onPhoto={this.photoTaken} /> }
      { cameraPermission === "denied" && this.renderDenied() }
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#000',
  },
  buttonRow: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 25,
    right: 0,
    left: 0,
    justifyContent: 'center'
  },
  button: {
    padding: 20,
    borderWidth: 3,
    borderColor: '#FFF',
    borderRadius: 20,
    backgroundColor: '#2445A2',
    margin: 15
  },
  buttonText: {
    color: '#FFF',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  textHeading: {
    color: '#44CAE5' ,
    fontSize: 24,
    padding: 20,
    fontWeight: 'bold',
    textAlign: 'center',

  }
})

You can see the different application states in Figure 4-3 and Figure 4-4. When a screenshot is taken, an Alert presents the user with the filepath on the device. In Recipe 4.4 we will explore the filesystem in more depth.

Figure 4-3. Delaying hardware device permissions provides users with a better user experience

Figure 4-4. Handling a case when you don’t have permission to use the camera is critical; with permission granted, photoTaken() presents an Alert with the file path of the photo taken

See Also

This example only scratches the surface of requesting permission from users. If your application will play music in the background, enable payments, track users, or anything that can be deemed invasive, expect to spend development time informing users.

Learn more about requesting permissions from the react-native-permissions GitHub page and the PermissionsAndroid React Native guide.

Problem

How do you present a paginated list of content that can be constantly refreshed?

Solution

Before we tackle the pagination challenge, we need a data provider that we can connect to. Building a web server falls outside the scope of this book, so we will rely on the JSONPlaceholder, a REST API for prototyping and testing, instead of rolling our own.

See the FlatList in Figure 4-5, which renders a paginated set of results.

This example relies on two components as shown in Figure 4-5: <ListItem /> and the container <App />.

Figure 4-5. A FlatList renders a paginated result set

The <ListItem /> is just a simple function that returns JSX. The overlay effect is achieved by relying on absolute positioning of the {title} and a backing <View />, which is semitransparent. The React Native guides recommend always passing height and width information for dynamic images. In this case, we’re relying on a third-party web service called LoremPixel, and we can dictate what format we require:

//listItem.js
import React, { Component } from 'react';

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


export default function ({url, title, width}) {
  return <View style={styles.card}>
    <Image resizeMode='cover'
      source={ { uri: url  } }
      style={[styles.image, {width, height: 200}] } />
    <View style={[styles.overlay, { width }]} />
    <Text style={styles.text}>{title}</Text>
  </View>
}

const styles = StyleSheet.create({
  card: {
    borderBottomWidth: 5,
    borderTopWidth: 2,
    borderBottomColor: '#222',
    borderTopColor: '#CACACA',
    borderStyle: 'solid',
    height: 207,
  },

  overlay: {...StyleSheet.absoluteFillObject,
    height: 30,
    top: 170,
    position: 'absolute',
    backgroundColor: 'rgba(2,2,2,0.8)',

  },

  text: {
    fontSize: 14,
    height: 30,
    top: 170,
    color: '#FFF',
    backgroundColor: 'transparent',
  },

  image: {...StyleSheet.absoluteFillObject, }
});

This component illustrates the critical relationship between <RefreshControl /> and <FlatList />. The fetchRecords() method asynchrously fetches JSON results and appends them to this.state.list. fetchRecords() is called on first load, componentDidMount(), when a refresh happens from a Pull to Refresh event and when the user scrolls to the bottom of the list. appendResults() copies the retrieved list of posts into a new array with the existing list after performing a small set of transformations.

//App.js
import React, { Component } from 'react';
import {
  StyleSheet,
  FlatList,
  Dimensions,
  RefreshControl,
  View,
  Text
} from 'react-native';

import ListItem from './listItem'

const { width } = Dimensions.get('window');
const API = 'https://jsonplaceholder.typicode.com';

export default class App extends Component<{}> {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      page: 1,
      list: []
    }
  }

  resultToListItem({ id, title }) {
    const { page } = this.state;
    const url = `https://lorempixel.com/${width}/200/food/${title}/`
    return { id: `${page}-${id}`, title: `${page} - ${title}`, width, url }
  }

  appendResults(results) {
    let list = [];
    Object.keys(results).forEach( (photoKey) => {
      list.push(this.resultToListItem(results[photoKey]));
    });
    this.setState( (prevState) => ({
      list: prevState.list.concat(list),
      refreshing: false,
      page: (prevState.page + 1)
    }));
  }

  async fetchRecords() {
    this.setState({ refreshing: true });
    const resp = await fetch(`${API}/posts?_limit=5`)
    const results = await resp.json();
    this.appendResults(results);
  }

  onRefresh = () => {
    this.setState({ list: [], page: 1});
    this.fetchRecords();
  }

  onEndReached = () => {
    this.fetchRecords()
  }

  componentDidMount() {
    this.fetchRecords()
  }

  render() {
    const refreshControl = <RefreshControl refreshing={this.state.refreshing}
      onRefresh={this.onRefresh} />
    return <View style={styles.container}>
      <View style={styles.header}>
      { this.state.refreshing ?
      <Text style={styles.headerText}>Refreshing...</Text> :
            <Text style={styles.headerText}>
            {this.state.list.length} Meals
            </Text> }
      </View>
      <FlatList
        renderItem={({item}) => <ListItem {...item} />}
        refreshControl={refreshControl}
        keyExtractor={({id}) => id}
        data={this.state.list}
        onEndReached={this.onEndReached}
      />
    </View>
  }
}

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",
  }
})

Discussion

Implementing this pattern requires a little bit of care. Because the user can trigger a refresh at any point, and because the list of content is expanding, it’s best to use some native data structures for handling the content. Furthermore, the server may return the same content twice, making it necessary to handle duplicates. Page sizes may also vary and so the resulting list on the client might be a mash of slightly different queries to an API.

See Also

For lists that have a section that sticks to the top of the view, consider using the SectionList. The API is very similar.

Managing records inside of a component can also lead to some confusion. For example, if you wanted to tap into one of these records to retrieve further information or perform a route navigation (see Recipe 2.4), then some global state management with Flux, Mobx, Redux, Apollo, or Relay may be worth considering.

Problem

You are already using Redux and have decided to adopt it for your mobile application. You noticed that users like to have data cached locally even after they have closed the application.

Solution

The redux-persist library is an excellent starting point in resolving this issue. This NPM mobile was conceived with support from AsyncStorage. As your Redux architecture grows, some of the most recent design changes in version 5.x of redux-persist will come in handy. This example relies on the project started in Recipe 2.5, but any Redux application should work.

In our case, we begin by installing redux-persist:

$> npm i redux-persist --save

By adjusting the src/appContainer.js and the reduxStore.js files from Recipe 2.5, our appication will automatically store the username and application state in asynchronous storage.

reduxStore.js used to rely on the combineReducers() method. This has been replaced with persistCombineReducers(), which includes a config parameter. storage will automatically resolve to AsyncStorage with React Native:

// reduxStore.js
import * as reducers from './src/reducers';
import { createStore, applyMiddleware, combineReducers, compose} from 'redux';
import { persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage';
import logger from 'redux-logger';
const config = {
  key: 'root',
  storage,
};
export default createStore(
  combineReducers(reducers),
  persistCombineReducers(config, reducers),
  applyMiddleware(logger)
);

redux-persist includes a <PersistGate /> component, which is intended to limit rendering of your application until the application state has been completely hydrated:

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

// newly-added references to redux-persist:
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';
const persistor = persistStore(store);

export default class App extends Component<{}> {

  render() {
    return <Provider store={store}>
      <PersistGate persistor={persistor}>
        <AppContainer />
      </PersistGate>
    </Provider>
  }
}

When the app is terminated and restarted, any state changes should be maintained in AsyncStorage. redux-persist is an excellent example of how the Redux design philosophy enables plugging in libraries by extending the core Redux architecture based on your application’s use case.

See Also

As your app grows, you will undoubtedly want to selectively persist portions of your application. redux-persist provides mechanisms for handling state changes, whitelisting, and blacklisting of reducers and parameters. Consult the documentation for more information. Another excellent library is redux-offline, which depends on redux-persist and provides additional hooks for handling poor network connectivity scenarios.

Problem

How do you tackle some of the common challenges when dealing with the filesystem, such as how to write, delete, list, and view files?

Solution

Our solution involves refactoring App.js from Recipe 4.1 into a <CameraContainer /> component. Our updated App.js file can toggle between a camera view (cameraContainer.js) and a list view (listContainer.js). Figure 4-6 demonstrates the addition of a button group for toggling pages in the App.js file.

Figure 4-6. The App.js now includes a bottom toggle for page switching; CameraContainer and ListContainer are loaded interchangeably

Begin by installing the react-native-fs package:

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

Let’s move the existing App.js file to a new cameraContainer.js file:

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

import SimpleCamera from './simpleCamera';
import Permissions from 'react-native-permissions';

export default class CameraContainer extends Component<{}> {

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

  componentDidMount() {
    this.determinePermission();
  }

  async determinePermission(){
    const cameraPermission = await Permissions.check('camera')
    this.setState({ cameraPermission });
  }

  async requestCamera() {
    const cameraPermission = await Permissions.request('camera');
    this.setState({ cameraPermission });
  }

  photoTaken = ({ path }) => {
    Alert.alert(`Photo Path: ${path}`)
  }

  requestPermission = () => {
    this.requestCamera();
  }

  renderDenied() {
    return <View>
      <Text style={styles.textHeading}>Looks like you do not want to
      take any photos.</Text>
      <Text style={styles.textHeading}>
        Please enable camera functionality in your application settings
      </Text>
    </View>
  }

  renderCameraRequest() {
    return <View>
      <Text style={styles.textHeading}>
        Let Pastry Cookbook share your dishes with the world!
      </Text>
      <TouchableHighlight style={styles.button} onPress={this.requestPermission}>
        <Text style={styles.buttonText}>Enable Camera</Text>
      </TouchableHighlight>
    </View>
  }


  render() {
    const { cameraPermission } = this.state;
    return <View style={styles.container}>
      { cameraPermission === "undetermined" && this.renderCameraRequest() }
      { cameraPermission === "authorized" && <SimpleCamera
          onPhoto={this.photoTaken} /> }
      { cameraPermission === "denied" && this.renderDenied() }
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#000',
  },
  buttonRow: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 25,
    right: 0,
    left: 0,
    justifyContent: 'center'
  },
  button: {
    padding: 20,
    borderWidth: 3,
    borderColor: '#FFF',
    borderRadius: 20,
    backgroundColor: '#2445A2',
    margin: 15
  },
  buttonText: {
    color: '#FFF',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  textHeading: {
    color: '#44CAE5',
    fontSize: 24,
    padding: 20,
    fontWeight: 'bold',
    textAlign: 'center',

  }
});

App.js will now set the page state between the list and camera states:

// App.js
import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  View,
  Text
} from 'react-native';
import CameraContainer from './cameraContainer';
import ListContainer from './listContainer';
export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      page: "list"
    }
  }

  render() {
    const { page } = this.state;
    return <View style={styles.container}>
      { page === "list" && <ListContainer style={styles.page} /> }
      { page === "camera" && <CameraContainer style={styles.page} /> }
      <View style={styles.buttonGroup}>
        <TouchableHighlight
          onPress={ () => { this.setState( { page: 'list' } ) } }
          style={[styles.button, (page === "list" &&
          styles.activeButton) ]} >
            <Text style={[styles.buttonText, (page === "list" &&
            styles.activeButtonText) ]}>
              List
            </Text>
        </TouchableHighlight>
        <TouchableHighlight
          onPress={ () => { this.setState( { page: 'camera' } ) } }
          style={[styles.button, (page === "camera" && styles.activeButton) ]} >
          <Text style={[styles.buttonText,
          (page === "camera" && styles.activeButtonText) ]}>
            Camera
          </Text>
        </TouchableHighlight>
      </View>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#FFF',
  },
  page: {
    flex: 1,
  },
  buttonGroup: {
    flexDirection: 'row',
  },
  activeButton: {
    backgroundColor: '#343678',
  },
  activeButtonText: {
    color: '#FFF'
  },
  button: {
    borderWidth: 1,
    borderColor: '#242668',
    flex: 1,
    height: 50,
    justifyContent: 'center',
  },
  buttonText: {
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#242668',
  }
});

The new <ListContainer /> component will begin by scanning the documents directory and populating a local this.state variable on componentDidMount():

// listContainer.js
import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  Image,
  TouchableHighlight,
  View,
  Text
} from 'react-native';

import {
  unlink,
  readDir,
  DocumentDirectoryPath
} from 'react-native-fs';

export default class ListContainer extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = { photos: [] }
  }

  componentDidMount() {
    this.refreshPhotoList();
  }

  async deletePhoto(path){
    await unlink(path)
    this.refreshPhotoList();
  }

  async refreshPhotoList() {
    const allFiles = await readDir(DocumentDirectoryPath);
    const photos = allFiles.filter( (file) =>
    { return file.path.split('.')[1] === "jpg" })
    this.setState({ photos });
  }

  renderRow(file) {
    return <View style={styles.row}>
      <Image style={{width: 100, height: 100}} resizeMode='cover'
      source={{ uri: file.path }} />
      <Text numberOfLines={2}
        style={styles.rowText} >{file.name}</Text>
      <TouchableHighlight style={styles.deleteButton}
        onPress={() => this.deletePhoto(file.path)}>
        <Text style={styles.deleteButtonText} >Delete</Text>
      </TouchableHighlight>
    </View>
  }

  render() {
    return <View style={styles.container}>
      <Text style={styles.titleText}>My Dishes</Text>
      <FlatList
        keyExtractor={ ({ name }) => name }
        data={this.state.photos}
        renderItem={ ({ item }) => this.renderRow(item) }
        />
    </View>
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#FFF',
  },
  row: {
    flexDirection: 'row',
    margin: 5,
  },
  rowText: {
    fontSize: 12,
    flex: 1,
    paddingLeft: 10,
    paddingTop: 40
  },
  titleText: {
    fontSize: 16,
    textAlign: 'center',
    fontWeight: 'bold',
    height: 20,
  },
  deleteButton: {
    backgroundColor: '#A22',
    justifyContent: 'center',
    margin: 20,
    width: 80,
    borderRadius: 5,
  },
  deleteButtonText: {
    color: '#FFF',
    textAlign: 'center',
    justifyContent: 'center',
  }
});

We render the photos using a <FlatList /> component (discussed further in Recipe 4.2). Notice that refreshPhotoList is called asynchronously: all calls to the filesystem are blocking calls and therefore do not happen synchronously. By relying on React’s this.state variable, we can trigger a render on setState(), whenever it happens next. DocumentDirectoryPath is a global variable that react-native-fs resolves based on the platform and the application. Any absolute path manipulations (such as reading a directory with readDir) will require using this constant.

See Also

This example only scratches the surface of what’s possible. Use react-native-fs in combination with react-native-zip-archive to ZIP files before sending them. react-native-fs can also provide large data storage with redux-persist on the Android platform thanks to projects like redux-persist-filesystem-storage.