Activity modals

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

type ActivityProps = {
  visible: boolean;
  size?: "small" | "large";
};
export default function Activity({ visible, size = "large" }: ActivityProps) {
  return (
    <Modal visible={visible} transparent>
      <View style={styles.modalContainer}>
        <ActivityIndicator size={size} />
      </View>
    </Modal>
  );
}

You might be tempted to pass the promise to the component so that it automatically hides when the promise resolves. I don’t think this is a good idea because then you would have to introduce the state into this component. Furthermore, it would depend on a promise in order to function. With the...