React and React Native

Activity modals

In this final section of the chapter, you'll implement a modal that shows a progress indicator. The idea is to display the modal, then hide it when the promise resolves. Here's the code for the generic Activity component that shows a modal with an activity indicator:

import React, { PropTypes } from 'react'; import { View, Modal, ActivityIndicator, } from 'react-native'; import styles from './styles'; // The "Activity" component will only display // if the "visible" property is try. The modal // content is an "<ActivityIndicator>" component. const Activity = props => ( <Modal visible={props.visible} transparent> <View style={styles.modalContainer}> <ActivityIndicator size={props.size} /> </View> </Modal> ); Activity.propTypes = ...