Modal, ActivityIndicator and StatusBar
Three small moments in Sprout: a panel slides up to confirm "Delete this plant?", a spinner shows while the plant list loads, and the clock and battery icons at the top must stay readable on a dark header. Each has its own component.
The rule
Modal overlays, ActivityIndicator waits, StatusBar sets the top strip.
Modal shows content above the current screen. You control it with state:
const [confirmOpen, setConfirmOpen] = useState(false);
<Modal
visible={confirmOpen}
animationType="slide"
transparent
onRequestClose={() => setConfirmOpen(false)}
>
<View style={styles.sheet}>
<Text>Delete this plant?</Text>
<Button title="Cancel" onPress={() => setConfirmOpen(false)} />
</View>
</Modal>visibleshows or hides it.animationTypeis'none','slide'or'fade'.transparentlets the screen behind show through, so you can dim it instead of covering it.onRequestCloseruns when the user presses Android's back button (or swipes down a page-sheet modal on iOS). Always handle it, or the user can get stuck.
With transparent, the backdrop is your job: make the modal's outer View fill the screen with flex: 1 and a see-through dark colour such as 'rgba(0,0,0,0.4)', then place the white panel inside it.
ActivityIndicator is the platform's spinner:
{loading ? <ActivityIndicator size="large" color="#2e7d32" /> : <PlantList />}It takes size ('small' or 'large'), color, and animating. Show it only while something is actually happening, and replace it with content or an error when the work ends.
StatusBar controls the strip with the time and battery. In an Expo project, use the one from expo-status-bar:
import { StatusBar } from 'expo-status-bar';
<StatusBar style="light" />style can be 'light' (white icons, for dark backgrounds), 'dark', or 'auto' to follow the system theme. React Native's own StatusBar does the same job with barStyle="light-content" or "dark-content".
The shortcut
For every moment, ask "is this blocking, waiting, or framing?" A decision that blocks the screen: Modal. Waiting on work: ActivityIndicator. The frame of the device itself: StatusBar.
Delete confirmation
Blocking: the user must answer first.
Modalwithvisiblefrom state andonRequestClose.
Drills
Answer fast — trust the rule.
What does onRequestClose on a Modal handle?
Sprout's header is dark green. Which status bar setting keeps the icons readable?
Which prop lets the screen behind a Modal show through?
Which component shows the platform's loading spinner?
Remember
Modaloverlays,ActivityIndicatorwaits,StatusBarsets the top strip.- Ask "blocking, waiting, or framing?"
- Trap: a
ModalwithoutonRequestClosecan trap Android users.