创建模态

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.

!!!IG11!!!

!!!IG0!!!

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:

!!!IG12!!!

!!!IG1!!!

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:

!!!IG2!!!

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.

!!!IG3!!!

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.

!!!IG13!!!

!!!IG4!!!

Let's take a look at our app on Android, iOS and the web:

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.

!!!IG14!!!

!!!IG5!!!

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 <EmojiPicker> 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.

!!!IG15!!!

!!!IG6!!!

Here is the result after this step:

Display a list of emoji

Let's add a horizontal list of emoji in the modal's content. We'll use the <FlatList> component from React Native for it.

Create a EmojiList.tsx file inside the components directory and add the following code:

!!!IG16!!!

!!!IG7!!!

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:

!!!IG17!!!

!!!IG8!!!

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:

!!!IG9!!!

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:

!!!IG18!!!

!!!IG10!!!

Let's take a look at our app on Android, iOS and the web: