Lines Matching refs:the
13 …the rest of your app. In general, modals are used to draw a user's attention toward critical infor…
22 …e implementing the modal, we are going to add three new buttons. These buttons will only be visibl…
23 or decides to use the placeholder image. One of these buttons will trigger the emoji picker modal.
25 …` in **App.js**. We'll use this variable to show or hide buttons that open the modal alongside a f…
27 This variable is a boolean. When the app screen loads, we'll set it to `false` so that the options …
32 …/* @info Create a state variable inside the App component. */const [showAppOptions, setShowAppOpti…
33 // ...rest of the code remains same
37 … this variable will be set to `true` when the user picks an image from the media library or decide…
39 Next, modify the `pickImageAsync()` function to set the value of `showAppOptions` to `true` after t…
44 // ...rest of the code remains same
48 …/* @info After selecting the image, set the App options to true. */ setShowAppOptions(true); /* @e…
51 // ...rest of the code remains same
56 Then, update the button with no theme by adding an `onPress` prop with the following value:
60 <Button label="Use this photo" /* @info Update the onPress prop.*/ onPress={() => setShowAppOptions…
63 Now, we can remove the `alert` on the `<Button>` component and update the `onPress` prop when rende…
67 <Pressable style={styles.button} /* @info Replace the alert() with the onPress.*/ onPress={onPress}…
70 …js** to conditionally render the `<Button>` component based on the value of `showAppOptions`. Also…
78 /* ...rest of the code remains same */
79 …/* @info Based on the value of showAppOptions, the buttons will be displayed. Also, move the exist…
95 For now, when the value of `showAppOptions` is `true`, let's render an empty `<View>` component. We…
103 Let's break down the layout of the option buttons we will implement in this chapter. The design loo…
106 alt="Break down of the layout of the buttons row."
112 …aligned in a row. The button in the middle with the plus icon (+) will open the modal and is style…
114 Inside the **components** directory, create a new file called **CircleButton.js** with the followin…
150 To render the plus icon, this button uses the `<MaterialIcons>` icon set from the `@expo/vector-ico…
152 … text labels and icons. Next, create a file named **IconButton.js** inside the **components** dire…
154 - `icon`: the name that corresponds to the icon in the `MaterialIcons` library.
155 - `label`: the text label displayed on the button.
156 - `onPress`: the function called when the button is pressed.
183 …eplace the empty `<View>` component from the previous step to display them. Let's also create the …
199 // ... rest of the import statements
204 // ...rest of the code remains same
205 /* @info Add placeholder functions that we will add logic for in the next sections. */
221 /* ...rest of the code remains same */
233 /* ...rest of the code remains same */
242 /* @info Add styles for the new View components. */
257 In the above snippet, the `onReset()` function is called when the user presses the reset button. Wh…
259 Let's take a look at our app on iOS, Android and the web:
274 The modal allows the user to choose an emoji from a list of available emoji. Create an **EmojiPicke…
276 - `isVisible`: a boolean that determines whether the modal is visible or not.
277 - `onClose`: a function that closes the modal.
302 Let's learn what the above code does.
305 - Its `visible` prop takes the value of `isVisible` and controls if the modal is open or closed.
306 - Its `transparent` prop is a boolean value that determines whether the modal fills the entire view.
307 …pe` prop determines how it enters and leaves the screen. In this case, it is sliding from the bott…
308 - Lastly, the `<EmojiPicker>` `onClose` prop is called when the user presses the close `<Pressable>…
310 The next step is to add the corresponding styles for the `<EmojiPicker>` component:
348 Now, let's modify the **App.js** to:
350 - Import the `<EmojiPicker>` component.
351 …ate variable with the `useState` hook. It has a default value of `false` to ensure that the modal …
352 …ce the comment in the `onAddSticker()` function to update the `isModalVisible` variable to `true` …
353 - Create a`onModalClose()` function to update the `isModalVisible` state variable.
354 - Place the `<EmojiPicker>` component at the bottom of the `<App>` component, above the `<StatusBar…
371 // ...rest of the import statements remain same
372 /* @info import the EmojiPicker component.*/ import EmojiPicker from "./components/EmojiPicker"; /*…
403 /* @info Update functions to control the modal's visibility.*/
415 /* ...rest of the code remains same */
416 …/* @info Render the EmojiPicker component at the bottom of the App component, just before the Stat…
429 Here is the result after this step:
444 Let's implement a horizontal list of emoji in the modal's content. We'll use the [`<FlatList>`](htt…
446 Create a file named **EmojiList.js** file in the **components** directory and add the following cod…
501 The `<FlatList>` component above renders all the emoji images using a `<Image>` component wrapped w…
502 Later, we will improve it so that the user can tap an emoji on the screen to make it appear as a st…
504 …nt takes an array of items, which in the above snippet is provided by the `emoji` array variable a…
505 Then, the `renderItem` prop takes the item from the `data` and returns the item in the list. Finall…
507 …the list horizontally instead of vertically. The `showsHorizontalScrollIndicator` checks the platf…
509 …w, modify the `App` component. Import the `<EmojiList>` component and replace the comments where t…
513 //...rest of the import statements remain same
514 /* @info Import the EmojiList component.*/ import EmojiList from './components/EmojiList';/* @end */
516 // Inside App component to select the emoji from the list
520 // ...rest of the code remain same
524 /* rest of the code remains unchanged */
526 /* @info Render the EmojiList component inside the EmojiPicker component. */
537 The `onSelect` prop on the `<EmojiList>` component selects the emoji and the `onCloseModal` prop cl…
539 Let's take a look at our app on iOS, Android and the web:
547 ## Display the selected emoji
549 Now we'll put the emoji sticker on the image.
551 Start by creating a new file in the **components** directory and call it **EmojiSticker.js**. Then,…
571 … `imageSize`: a value defined inside the `<App>` component. We will use this value in the next cha…
572 - `stickerSource`: the source of the selected emoji image.
574 …t in the **App.js** file and update the `<App>` component to display the emoji sticker on the imag…
599 // ...rest of the import statements
603 // ...rest of the code remains same
611 /* ...rest of the code remains same*/
619 Let's take a look at our app on iOS, Android and the web:
627 We successfully created the emoji picker modal and implemented the logic to select an emoji and dis…
632 …description="In the next chapter, let's add user interactions with gestures to drag the emoji and …