Modal animation

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.

Exercise Your turn: animated Modal

Add a Modal. Set visible to {visible} and animationType to "slide". Inside place a <Text> and a close button.

Show example 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)'.

Test yourself

Fill in the blank: slide animation

<Modal animationType="____" visible={visible}>

Show answer

<Modal animationType="slide" visible={visible}>

Which is a valid animationType value?
```
<Modal animationType="?">
```
- bounce
- zoom
- rotate
- fade
Show answer

fade — fade opens the Modal with opacity.
Match: animationType and effect

slide

slides in from bottom
fade

fades in with opacity
none

opens without animation

Next lesson: Summary - Alerts

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies