Expo Docs MCP Server

--- title: Create a modal description: In this tutorial, learn how to create a React Native modal to select an image. hasVideoLink: true --- React Native provides a [`` component](https://reactnative.dev/docs/modal) that presents content above the rest of your app. In general, modals are used to draw a user's attention toward critical information or guide them to take action. For example, in the [third chapter](/tutorial/build-a-screen/#step-7-enhance-the-reusable-button-component), after pressing the button, we used `alert()` to display some placeholder text. That's how a modal component displays an overlay. In this chapter, we'll create a modal that shows an emoji picker list. --- <Step label="1"> ## Declare a state variable to show buttons Before implementing the modal, we are going to add three new buttons. These buttons are visible after the user picks an image from the media library or uses the placeholder image. One of these buttons will trigger the emoji picker modal. In **app/(tabs)/index.tsx**: 1. Declare a boolean state variable, `showAppOptions`, to show or hide the buttons that open the modal, alongside a few other options. When the app screen loads, we'll set it to `false` so the options are not shown before picking an image. When the user picks an image or uses the placeholder image, we'll set it to `true`. 2. Update the `pickImageAsync()` function to set the value of `showAppOptions` to `true` after the user picks an image. 3. Update the button with no theme by adding an `onPress` prop with the following value. {/* prettier-ignore */} ```tsx app/(tabs)/index.tsx const PlaceholderImage = require('@/assets/images/background-image.png'); const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined); /* @tutinfo Create a state variable inside the <CODE>Index</CODE> component. */ const [showAppOptions, setShowAppOptions] = useState<boolean>(false); /* @end */ const pickImageAsync = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], allowsEditing: true, quality: 1, }); if (!result.canceled) { setSelectedImage(result.assets[0].uri); /* @tutinfo After selecting the image, set the app options to true. */ setShowAppOptions(true); /* @end */ } else { alert('You did not select any image.'); } }; return ( <View style={styles.container}> <View style={styles.imageContainer}> </View> /* @tutinfo Based on the value of <CODE>showAppOptions</CODE>, the buttons will be displayed. Also, move the existing buttons in the conditional operator block. */ {showAppOptions ? ( /* @end */ ) : ( <View style={styles.footerContainer}> /* @tutinfo Replace the <CODE>alert()</CODE> with the <CODE>onPress</CODE>.*/ <Button label="Use this photo" onPress={() => setShowAppOptions(true)} /> /* @end */ </View> /* @tutinfo */)}/* @end */ </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, footerContainer: { flex: 1 / 3, alignItems: 'center', }, }); ``` In the above snippet, we're rendering the `Button` component based on the value of `showAppOptions` and moving the buttons in the ternary operator block. When the value of `showAppOptions` is `true`, render an empty `<View>` component. We'll address this state in the next step. Now, we can remove the `alert` on the `Button` component and update the `onPress` prop when rendering the second button in the **components/Button.tsx**: {/* prettier-ignore */} ```tsx components/Button.tsx <Pressable style={styles.button} /* @tutinfo Replace the <CODE>alert()</CODE> with the <CODE>onPress</CODE>.*/ onPress={onPress}/* @end */ > ``` </Step> <Step label="2"> ## Add buttons Let's break down the layout of the option buttons we'll implement in this chapter. The design looks like this: It contains a parent `<View>` with three buttons aligned in a row. The button in the middle with the plus icon (+) will open the modal and is styled differently than the other two buttons. Inside the **components** directory, create a new **CircleButton.tsx** file with the following code: ```tsx components/CircleButton.tsx type Props = { onPress: () => void; }; return ( <View style={styles.circleButtonContainer}> <Pressable style={styles.circleButton} onPress={onPress}> </Pressable> </View> ); } const styles = StyleSheet.create({ circleButtonContainer: { width: 84, height: 84, marginHorizontal: 60, borderWidth: 4, borderColor: '#ffd33d', borderRadius: 42, padding: 3, }, circleButton: { flex: 1, justifyContent: 'center', alignItems: 'center', borderRadius: 42, backgroundColor: '#fff', }, }); ``` To render the plus icon, this button uses the `<MaterialIcons>` icon set from the `@expo/vector-icons` library. The other two buttons also use `<MaterialIcons>` to display vertically aligned text labels and icons. Create a file named **IconButton.tsx** inside the **components** directory. This component accepts three props: - `icon`: the name corresponding to the `MaterialIcons` library icon. - `label`: the text label displayed on the button. - `onPress`: this function invokes when the user presses the button. ```tsx components/IconButton.tsx type Props = { icon: keyof typeof MaterialIcons.glyphMap; label: string; onPress: () => void; }; return ( <Pressable style={styles.iconButton} onPress={onPress}> <Text style={styles.iconButtonLabel}>{label}</Text> </Pressable> ); } const styles = StyleSheet.create({ iconButton: { justifyContent: 'center', alignItems: 'center', }, iconButtonLabel: { color: '#fff', marginTop: 12, }, }); ``` Inside **app/(tabs)/index.tsx**: 1. Import the `CircleButton` and `IconButton` components to display them. 2. Add three placeholder functions for these buttons. The `onReset()` function invokes when the user presses the reset button, causing the image picker button to appear again. We'll add the functionality for the other two functions later. {/* prettier-ignore */} ```tsx app/(tabs)/index.tsx /* @tutinfo Import <CODE>IconButton</CODE> and <CODE>CircleButton</CODE> components.*/ /* @end */ const PlaceholderImage = require('@/assets/images/background-image.png'); const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined); const [showAppOptions, setShowAppOptions] = useState<boolean>(false); const pickImageAsync = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], allowsEditing: true, quality: 1, }); if (!result.canceled) { setSelectedImage(result.assets[0].uri); setShowAppOptions(true); } else { alert('You did not select any image.'); } }; /* @tutinfo Add placeholder functions that we will add logic for in the next sections. */ const onReset = () => { setShowAppOptions(false); }; const onAddSticker = () => { // we will implement this later }; const onSaveImageAsync = async () => { // we will implement this later }; /* @end */ return ( <View style={styles.container}> <View style={styles.imageContainer}> </View> {showAppOptions ? ( /* @tutinfo Replace empty <CODE>View</CODE> component with this snippet to display App option buttons. */ <View style={styles.optionsContainer}> <View style={styles.optionsRow}> </View> </View> /* @end */ ) : ( <View style={styles.footerContainer}> <Button label="Use this photo" onPress={() => setShowAppOptions(true)} /> </View> )} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, footerContainer: { flex: 1 / 3, alignItems: 'center', }, /* @tutinfo Add styles for the new <CODE>View</CODE> components. */ optionsContainer: { position: 'absolute', bottom: 80, }, optionsRow: { alignItems: 'center', flexDirection: 'row', }, /* @end */ }); ``` Let's take a look at our app on Android, iOS and the web: </Step> <Step label="3"> ## Create an emoji picker modal The modal allows the user to choose an emoji from a list of available emoji. Create an **EmojiPicker.tsx** file inside the **components** directory. This component accepts three props: - `isVisible`: a boolean to determine the state of the modal's visibility. - `onClose`: a function to close the modal. - `children`: used later to display a list of emoji. {/* prettier-ignore */} ```tsx components/EmojiPicker.tsx|collapseHeight=430 type Props = PropsWithChildren<{ isVisible: boolean; onClose: () => void; }>; return ( <View> <Modal animationType="slide" transparent={true} visible={isVisible}> <View style={styles.modalContent}> <View style={styles.titleContainer}> <Text style={styles.title}>Choose a sticker</Text> <Pressable onPress={onClose}> </Pressable> </View> {children} </View> </View> ); } const styles = StyleSheet.create({ modalContent: { height: '25%', width: '100%', backgroundColor: '#25292e', borderTopRightRadius: 18, borderTopLeftRadius: 18, position: 'absolute', bottom: 0, }, titleContainer: { height: '16%', backgroundColor: '#464C55', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, title: { color: '#fff', fontSize: 16, }, }); ``` Let's learn what the above code does: - The `<Modal>` component displays a title and a close button. - Its `visible` prop takes the value of `isVisible` and controls whether the modal is open or closed. - Its `transparent` prop is a boolean value, which determines whether the modal fills the entire view. - Its `animationType` prop determines how it enters and leaves the screen. In this case, it is sliding from the bottom of the screen. - Lastly, the `` invokes the `onClose` prop when the user presses the close `<Pressable>`. Now, let's modify the **app/(tabs)/index.tsx**: 1. Import the `<EmojiPicker>` component. 2. Create an `isModalVisible` state variable with the `useState` hook. Its default value is `false`, which hides the modal until the user presses the button to open it. 3. Replace the comment in the `onAddSticker()` function to update the `isModalVisible` variable to `true` when the user presses the button. This will open the emoji picker. 4. Create the `onModalClose()` function to update the `isModalVisible` state variable. 5. Place the `<EmojiPicker>` component at the bottom of the `Index` component. {/* prettier-ignore */} ```tsx app/(tabs)/index.tsx /* @tutinfo import the <CODE>EmojiPicker</CODE> component. */ /* @end */ const PlaceholderImage = require('@/assets/images/background-image.png'); const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined); const [showAppOptions, setShowAppOptions] = useState<boolean>(false); /* @tutinfo Create a state variable. */ const [isModalVisible, setIsModalVisible] = useState<boolean>(false); /* @end */ const pickImageAsync = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], allowsEditing: true, quality: 1, }); if (!result.canceled) { setSelectedImage(result.assets[0].uri); setShowAppOptions(true); } else { alert('You did not select any image.'); } }; const onReset = () => { setShowAppOptions(false); }; /* @tutinfo Update functions to control the modal's visibility.*/ const onAddSticker = () => { setIsModalVisible(true); }; const onModalClose = () => { setIsModalVisible(false); }; /* @end */ const onSaveImageAsync = async () => { // we will implement this later }; return ( <View style={styles.container}> <View style={styles.imageContainer}> </View> {showAppOptions ? ( <View style={styles.optionsContainer}> <View style={styles.optionsRow}> </View> </View> ) : ( <View style={styles.footerContainer}> <Button label="Use this photo" onPress={() => setShowAppOptions(true)} /> </View> )} /* @tutinfo Render the <CODE>EmojiPicker</CODE> component at the bottom of the <CODE>Index</CODE> component. */ <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}> {/* Emoji list component will go here */} /* @end */ </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, footerContainer: { flex: 1 / 3, alignItems: 'center', }, optionsContainer: { position: 'absolute', bottom: 80, }, optionsRow: { alignItems: 'center', flexDirection: 'row', }, }); ``` Here is the result after this step: </Step> ## Display a list of emoji Let's add a horizontal list of emoji in the modal's content. We'll use the [`<FlatList>`](https://reactnative.dev/docs/flatlist) component from React Native for it. Create a **EmojiList.tsx** file inside the **components** directory and add the following code: {/* prettier-ignore */} ```tsx components/EmojiList.tsx type Props = { onSelect: (image: ImageSourcePropType) => void; onCloseModal: () => void; }; const [emoji] = useState<ImageSourcePropType[]>([ require("../assets/images/emoji1.png"), require("../assets/images/emoji2.png"), require("../assets/images/emoji3.png"), require("../assets/images/emoji4.png"), require("../assets/images/emoji5.png"), require("../assets/images/emoji6.png"), ]); return ( <FlatList horizontal showsHorizontalScrollIndicator={Platform.OS === 'web'} data={emoji} contentContainerStyle={styles.listContainer} renderItem={({ item, index }) => ( <Pressable onPress={() => { onSelect(item); onCloseModal(); }}> </Pressable> )} /> ); } const styles = StyleSheet.create({ listContainer: { borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, image: { width: 100, height: 100, marginRight: 20, }, }); ``` Let's learn what the above code does: - The `<FlatList>` component above renders all the emoji images using the `Image` component, wrapped by a `<Pressable>`. Later, we will improve it so that the user can tap an emoji on the screen to make it appear as a sticker on the image. - It also takes an array of items provided by the `emoji` array variable as the value of the `data` prop. The `renderItem` prop takes the item from the `data` and returns the item in the list. Finally, we added `Image` and the `<Pressable>` components to display this item. - The `horizontal` prop renders the list horizontally instead of vertically. The `showsHorizontalScrollIndicator` uses React Native's `Platform` module to check the value and display the horizontal scroll bar on web. Now, update the **app/(tabs)/index.tsx** to import the `<EmojiList>` component and replace the comments inside the `<EmojiPicker>` component with the following code snippet: {/* prettier-ignore */} ```tsx app/(tabs)/index.tsx|collapseHeight=440 /* @tutinfo Import the <CODE>EmojiList</CODE> component. */ /* @end */ const PlaceholderImage = require('@/assets/images/background-image.png'); const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined); const [showAppOptions, setShowAppOptions] = useState<boolean>(false); const [isModalVisible, setIsModalVisible] = useState<boolean>(false); /* @tutinfo Define a state variable. */ const [pickedEmoji, setPickedEmoji] = useState<ImageSourcePropType | undefined>(undefined); /* @end */ const pickImageAsync = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], allowsEditing: true, quality: 1, }); if (!result.canceled) { setSelectedImage(result.assets[0].uri); setShowAppOptions(true); } else { alert('You did not select any image.'); } }; const onReset = () => { setShowAppOptions(false); }; const onAddSticker = () => { setIsModalVisible(true); }; const onModalClose = () => { setIsModalVisible(false); }; const onSaveImageAsync = async () => { // we will implement this later }; return ( <View style={styles.container}> <View style={styles.imageContainer}> </View> {showAppOptions ? ( <View style={styles.optionsContainer}> <View style={styles.optionsRow}> </View> </View> ) : ( <View style={styles.footerContainer}> <Button label="Use this photo" onPress={() => setShowAppOptions(true)} /> </View> )} <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}> /* @tutinfo Render the <CODE>EmojiList</CODE> component inside the <CODE>EmojiPicker</CODE> component. */ /* @end */ </EmojiPicker> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, footerContainer: { flex: 1 / 3, alignItems: 'center', }, optionsContainer: { position: 'absolute', bottom: 80, }, optionsRow: { alignItems: 'center', flexDirection: 'row', }, }); ``` In the `EmojiList` component, the `onSelect` prop selects the emoji and after selecting it, the `onCloseModal` closes the modal. Let's take a look at our app on Android, iOS and the web: ## Display the selected emoji Now, we'll put the emoji sticker on the image. Create a new file in the **components** directory and call it **EmojiSticker.tsx**. Then, add the following code: ```tsx components/EmojiSticker.tsx|collapseHeight=300 type Props = { imageSize: number; stickerSource: ImageSourcePropType; }; return ( <View style={{ top: -350 }}> </View> ); } ``` This component receives two props: - `imageSize`: a value defined inside the `Index` component. We will use this value in the next chapter to scale the image's size when tapped. - `stickerSource`: the source of the selected emoji image. Import this component in the **app/(tabs)/index.tsx** file and update the `Index` component to display the emoji sticker on the image. We'll check if the `pickedEmoji` state is not `undefined`: {/* prettier-ignore */} ```tsx app/(tabs)/index.tsx /* @tutinfo Import the <CODE>EmojiSticker</CODE> component. */ /* @end */ const PlaceholderImage = require('@/assets/images/background-image.png'); const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined); const [showAppOptions, setShowAppOptions] = useState<boolean>(false); const [isModalVisible, setIsModalVisible] = useState<boolean>(false); const [pickedEmoji, setPickedEmoji] = useState<ImageSourcePropType | undefined>(undefined); const pickImageAsync = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], allowsEditing: true, quality: 1, }); if (!result.canceled) { setSelectedImage(result.assets[0].uri); setShowAppOptions(true); } else { alert('You did not select any image.'); } }; const onReset = () => { setShowAppOptions(false); }; const onAddSticker = () => { setIsModalVisible(true); }; const onModalClose = () => { setIsModalVisible(false); }; const onSaveImageAsync = async () => { // we will implement this later }; return ( <View style={styles.container}> <View style={styles.imageContainer}> /* @tutinfo Add this line to display the emoji sticker on the image. */ {pickedEmoji && } /* @end */ </View> {showAppOptions ? ( <View style={styles.optionsContainer}> <View style={styles.optionsRow}> </View> </View> ) : ( <View style={styles.footerContainer}> <Button label="Use this photo" onPress={() => setShowAppOptions(true)} /> </View> )} <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}> </EmojiPicker> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, footerContainer: { flex: 1 / 3, alignItems: 'center', }, optionsContainer: { position: 'absolute', bottom: 80, }, optionsRow: { alignItems: 'center', flexDirection: 'row', }, }); ``` Let's take a look at our app on Android, iOS and the web: ## Summary