O'Reilly logo

React and React Native by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 = ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required