Lines Matching refs:modal

2 title: Create a modal
13 React Native provides a [`<Modal>` component](https://reactnative.dev/docs/modal) that presents con…
14 we used `alert()` to display a placeholder when a button is pressed. That's how a modal component d…
16 In this chapter, we'll create a modal that shows an emoji picker list.
22 Before implementing the modal, we are going to add three new buttons. These buttons will only be vi…
23 or decides to use the placeholder image. One of these buttons will trigger the emoji picker modal.
25 …**App.js**. We'll use this variable to show or hide buttons that open the modal alongside a few ot…
112 …d in a row. The button in the middle with the plus icon (+) will open the modal and is styled diff…
272 ## Create an emoji picker modal
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.
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.
351 …the `useState` hook. It has a default value of `false` to ensure that the modal is hidden until th…
357 label="Create a modal"
358 templateId="tutorial/04-modal/App"
366   'components/EmojiPicker.js': 'tutorial/04-modal/EmojiPicker.js',
403   /* @info Update functions to control the modal's visibility.*/
432   alt="A modal working on all platforms"
433   src="/static/images/tutorial/modal-creation.jpg"
444 Let's implement a horizontal list of emoji in the modal's content. We'll use the [`<FlatList>`](htt…
537 …List>` component selects the emoji and the `onCloseModal` prop closes the modal after emoji is sel…
592   'components/EmojiPicker.js': 'tutorial/04-modal/EmojiPicker.js',
627 We successfully created the emoji picker modal and implemented the logic to select an emoji and dis…