Modal animation
- React Native course
- Beginner
- Lesson 98/116
- 5 min
Learn modal animationType.
animationType
To add an animation when the Modal opens and closes you use the animationType prop. It takes three values: slide (slides in from the bottom), fade (appears with opacity) and none (no animation, instantly visible).
<Modal visible={visible} animationType="slide">
{/* content */}
</Modal>The default value is none; it opens without animation. slide is the most common choice in mobile apps; it gives a vertical sliding feel. fade provides a smoother transition.
Practice Your turn: animated Modal
Add a Modal. Set visible to {visible} and animationType to "slide". Inside place a <Text> and a close button.
Starter code
import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';
function Screen() {
const [visible, setVisible] = useState(false);
return (
<View>
<Button title="Open" onPress={() => setVisible(true)} />
{/* add an animated Modal */}
</View>
);
}Sample solution
import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';
function Screen() {
const [visible, setVisible] = useState(false);
return (
<View>
<Button title="Open" onPress={() => setVisible(true)} />
<Modal visible={visible} animationType="slide">
<View>
<Text>Content</Text>
<Button title="Close" onPress={() => setVisible(false)} />
</View>
</Modal>
</View>
);
}The transparent prop
By default the Modal opens with a fully opaque white background. But sometimes you want to keep the content behind the modal partially visible. To do this you set the transparent prop to true.
When transparent is active the Modal background becomes transparent; only the View you wrote as content is visible. This is suitable for a custom card or dropdown effect. To make the background semi-transparent you can style the View with backgroundColor: 'rgba(0,0,0,0.5)'.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Fill in the blank: slide animation
<Modal animationType="____" visible={visible}><Modal animationType="slide" visible={visible}>Explanation: With slide the Modal slides in from the bottom.
2 Which is a valid animationType value?
<Modal animationType="?">- bounce
- zoom
- rotate
- fade Correct answer
Explanation: fade opens the Modal with opacity.
3 Match: animationType and effect
| Term | Meaning |
|---|---|
slide |
slides in from bottom |
fade |
fades in with opacity |
none |
opens without animation |