{"id":5140,"date":"2020-10-27T17:52:54","date_gmt":"2020-10-27T17:52:54","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5140"},"modified":"2020-10-27T17:58:17","modified_gmt":"2020-10-27T17:58:17","slug":"create-your-first-modal-popup-in-react-native","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/","title":{"rendered":"Create your first modal popup in react native"},"content":{"rendered":"\n

React native offers a list of reusable components to select from. Using these reusable components saves time and avoids duplication. However, developers can easily create custom components as per need.
<\/p>\n\n\n\n

The Modal component provides a foundation to present content above an enclosing view. It can be used to show popovers, alerts, dialogs and much more. React Native offers a basic Modal component which can be customized as per need.<\/p>\n\n\n\n

Modal needs to be imported from react-native and we can control its visibility by setting visible <\/strong>prop.<\/p>\n\n\n\n

The transparent<\/strong> prop can be used to toggle between the entire view and transparent background.<\/p>\n\n\n\n

import {Modal} from 'react-native';\n \n class Modal extends Component {\n   constructor(props) {\n   \tthis.state = {\n\t\tisVisible: false,\n};\n   }\n   setVisibility(visible) {\n     this.setState({isVisible: visible});\n   }\n    render() {\n     return (\n       <View>\n         <Modal transparent visible={this.state.isVisible}>\n           <View>\n             <View>\n               <Text>Demo Modal!<\/Text>\n                <TouchableHighlight\n                 onPress={() => { this.setVisibility(!this.state.isVisible); }}>\n                 <Text>Hide<\/Text>\n               <\/TouchableHighlight>\n             <\/View>\n           <\/View>\n         <\/Modal>\n          <TouchableHighlight onPress={() => { this.setVisibility(true); }}>\n           <Text>Show<\/Text>\n         <\/TouchableHighlight>\n       <\/View>\n     );\n   }\n }\n<\/code><\/pre>\n\n\n\n
Full list of props can be found in the official documentation<\/a> of react-native.<\/p>\n\n\n\n
React native is very popular among developers around the world as a large and growing community. React native community offers a more enhanced, animated, and customizable react-native modal. Built on top of react-native modal with much more options animations and styles.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
How to make Transparent Background<\/strong><\/h4>\n\n\n\n
Modal offers a transparent<\/strong> prop that determines if your modal fills the entire view or not. Setting transparent prop value to true will render the modal over a transparent background and takes away the focus of screen to modal.<\/p>\n\n\n\n
How to animate modal<\/strong><\/h4>\n\n\n\n
Developers can easily pass animation type in animationIn<\/strong> and animationOut<\/strong> prop. By default animationIn<\/strong> is set to slideInUp<\/strong> and animationOut<\/strong> is set to slideOutDown<\/strong>. Developers can set the timing of animation in ms.<\/p>\n\n\n\n
Disabling gestures<\/h4>\n\n\n\n
Gestures can be controlled by passing value in swipeDirection <\/strong>prop. By default, there is no gesture set. Possible values for the direction where the modal can be swiped are Up, Down, Left or Right. It also supports multiple values that can be passed in an array like ['left', 'right']<\/code>.<\/p>\n\n\n\n
How to center align<\/h4>\n\n\n\n
To control the alignment of modal content especially in larger devices like iPad or tabs, modal offers presentationStyle<\/strong> property that controls how the modal appears. Possible values are fullScreen (covers the screen completely), formSheet<\/strong>, overFullScreen<\/strong> (Allows transparency, cover full screen).<\/p>\n\n\n\n
By default, the presentationStyle <\/strong>prop is set overFullScreen<\/strong> or fullScreen<\/strong> depending on the transparent<\/code> prop.<\/p>\n\n\n\n
Scrollable Content<\/strong>
<\/p>\n\n\n\n
React Native Modal supports scrollable content inside the modal box. It supports Horizontal scroll too & it can be enabled by setting scrollHorizontal <\/strong>prop to true which is by default false. By setting scrollOffset, <\/strong>content gets scrollable, and swipe to close gesture gets disabled.<\/p>\n\n\n\n
I recommend using the community version as it has more options, animations, and features. Documentation can be found at https:\/\/github.com\/react-native-community\/react-native-modal<\/a>
<\/p>\n\n\n\n
Have I missed something? please feel free to post in the comments.
<\/p>\n","protected":false},"excerpt":{"rendered":"
React native offers a list of reusable components to select from. Using these reusable components saves time and avoids duplication. However, developers can easily create custom components as per need. The Modal component provides a foundation to present content above an enclosing view. It can be used to show popovers, alerts, dialogs and much more. … Continue reading “Create your first modal popup in react native”<\/span><\/a><\/p>\n","protected":false},"author":9,"featured_media":5143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-5140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"yoast_head":"\nBest Guide to Create your first Modal Popup in React Native<\/title>\n<meta name=\"description\" content=\"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Guide to Create your first Modal Popup in React Native\" \/>\n<meta property=\"og:description\" content=\"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-27T17:52:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-27T17:58:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"681\" \/>\n\t<meta property=\"og:image:height\" content=\"474\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"msaqlain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"msaqlain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\"},\"author\":{\"name\":\"msaqlain\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73\"},\"headline\":\"Create your first modal popup in react native\",\"datePublished\":\"2020-10-27T17:52:54+00:00\",\"dateModified\":\"2020-10-27T17:58:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\"},\"wordCount\":433,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\",\"name\":\"Best Guide to Create your first Modal Popup in React Native\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg\",\"datePublished\":\"2020-10-27T17:52:54+00:00\",\"dateModified\":\"2020-10-27T17:58:17+00:00\",\"description\":\"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg\",\"width\":681,\"height\":474,\"caption\":\"first modal popup in react native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create your first modal popup in react native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73\",\"name\":\"msaqlain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g\",\"caption\":\"msaqlain\"},\"description\":\"A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/msaqlain\/\",\"noc\"],\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/msaqlain\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Best Guide to Create your first Modal Popup in React Native","description":"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Best Guide to Create your first Modal Popup in React Native","og_description":"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/","og_site_name":"Mobile App Development Services","article_published_time":"2020-10-27T17:52:54+00:00","article_modified_time":"2020-10-27T17:58:17+00:00","og_image":[{"width":681,"height":474,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg","type":"image\/jpeg"}],"author":"msaqlain","twitter_card":"summary_large_image","twitter_misc":{"Written by":"msaqlain","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/"},"author":{"name":"msaqlain","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73"},"headline":"Create your first modal popup in react native","datePublished":"2020-10-27T17:52:54+00:00","dateModified":"2020-10-27T17:58:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/"},"wordCount":433,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg","articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/","name":"Best Guide to Create your first Modal Popup in React Native","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg","datePublished":"2020-10-27T17:52:54+00:00","dateModified":"2020-10-27T17:58:17+00:00","description":"The Folio3 provides a great guide with code examples\u00a0on how to develop your first modal popup through the easy use of\u00a0 react native development.\u00a0","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/first-modal-popup-in-react-native.jpg","width":681,"height":474,"caption":"first modal popup in react native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/create-your-first-modal-popup-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Create your first modal popup in react native"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/d7e0ef02800a3f681aaafbd99d7a1c73","name":"msaqlain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b06cfd7df7ee148f3c3b752c732984c8?s=96&d=mm&r=g","caption":"msaqlain"},"description":"A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.","sameAs":["https:\/\/www.linkedin.com\/in\/msaqlain\/","noc"],"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/msaqlain\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5140"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5140"}],"version-history":[{"count":1,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5140\/revisions"}],"predecessor-version":[{"id":5141,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5140\/revisions\/5141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5143"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}