{"id":6067,"date":"2020-07-24T13:15:51","date_gmt":"2020-07-24T07:45:51","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6067"},"modified":"2020-07-24T14:36:34","modified_gmt":"2020-07-24T09:06:34","slug":"react-navigation-5","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/","title":{"rendered":"React navigation 5"},"content":{"rendered":"\r\n

Introduction<\/strong><\/p>\r\n\r\n\r\n\r\n

React navigation is a library that enables a developer to navigate between the screens in react native.Its the most popular solution when it comes for navigation in react native apps which also supports both expo and CLI.The latest update of the react\u00a0 navigation brings a huge change from the previous versions.<\/p>\r\n\r\n\r\n\r\n

The latest react navigation version comes with an improved API design which brings the simplicity and new features to define the routes .<\/p>\r\n\r\n\r\n\r\n

Requirements to install React navigation<\/strong><\/p>\r\n\r\n\r\n\r\n

    \r\n
  1. Node above version 10.x.x<\/li>\r\n
  2. Npm or yarn\u00a0<\/li>\r\n
  3. Latest CLI or expo version<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n

    Installation for CLI<\/strong><\/p>\r\n\r\n\r\n\r\n

    Installation Command<\/p>\r\n\r\n\r\n\r\n

    NPM<\/p>\r\n\r\n\r\n\r\n

    npm install @react-navigation\/native\u00a0\u00a0\u00a0<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n

    Yarn<\/p>\r\n\r\n\r\n\r\n

    yarn add @react-navigation\/native<\/code><\/strong><\/p>\r\n\r\n\r\n\r\n

    Installation of following dependencies is necessary to support the navigation library.<\/p>\r\n\r\n\r\n\r\n

    Just paste the following commands in the terminal and you are good to go.<\/p>\r\n\r\n\r\n\r\n

    For npm\u00a0<\/p>\r\n\r\n\r\n\r\n

    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community\/masked-view<\/code><\/p>\r\n\r\n\r\n\r\n

    For Yarn<\/p>\r\n\r\n\r\n\r\n

    yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community\/masked-view<\/code><\/p>\r\n\r\n\r\n\r\n

    \u00a0For IOS we need to install the cocoapods using the following command<\/p>\r\n\r\n\r\n\r\n

    npx pod-install ios<\/code><\/p>\r\n\r\n\r\n\r\n

    Installation for expo<\/strong><\/p>\r\n\r\n\r\n\r\n

    Install the dependencies from the following commands<\/p>\r\n\r\n\r\n\r\n

    expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community\/masked-view<\/code><\/p>\r\n\r\n\r\n\r\n

    Getting Started<\/strong><\/p>\r\n\r\n\r\n\r\n

    The latest version of navigation comes with dynamic Imports and makes the navigation more dynamic and easy for developers.<\/p>\r\n\r\n\r\n\r\n

    In the top level file such as app.js or index.js\u00a0 initialise the react-native-gesture-handler \u00a0with import ‘react-native-gesture-handler’;<\/p>\r\n\r\n\r\n\r\n

    This step is very important as the react\u00a0 navigation uses the native gesture handler for gestures. If not initialised then the app may crash in production build.<\/p>\r\n\r\n\r\n\r\n

    Now we have to wrap the whole app into a single component NavigationContainer<\/code>.<\/p>\r\n\r\n\r\n\r\n

    For example:<\/p>\r\n\r\n\r\n\r\n

    \r\n
    \r\n
    \r\n
    \r\n
    import 'react-native-gesture-handler';\r\nimport * as React from 'react';\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\n\r\n\r\nexport default function App() {\r\n return (\r\n \t<NavigationContainer>\r\n{\/* Rest of your app code *\/}\r\n<\/NavigationContainer>\r\n );\r\n}\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
    Creating a stack navigator<\/strong><\/h3>\r\n\r\n\r\n\r\n
    To implement stack navigator we have to import createStackNavigator <\/code>. The create stack navigator is a function that returns two properties which are used to create the stack i.e Stack and Navigator<\/code> .So, first, we have to call the function and then use the properties.<\/p>\r\n\r\n\r\n\r\n
    The\u00a0 following example shows the implementation.<\/p>\r\n\r\n\r\n\r\n
    import * as React from 'react';\r\nimport { View, Text } from 'react-native';\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\n\r\nfunction HomeScreen() {\r\n return (\r\n   <View>\r\n     <Text>Home Screen<\/Text>\r\n   <\/View>\r\n );\r\n}\r\nconst Stack = createStackNavigator(); \/\/ calling the Stack Navigator\r\n\r\nfunction App() {\r\n return (\r\n   <NavigationContainer>\r\n     <Stack.Navigator>  \/\/wrapping the components into the stack Navigator \r\n       <Stack.Screen name=\"Home\" component={HomeScreen} \/>\r\n     <\/Stack.Navigator>\r\n   <\/NavigationContainer>\r\n );\r\n}\r\nexport default App;\r\n<\/pre>\r\n\r\n\r\n\r\n
    The \u00a0name<\/code> props refer to the name of the component and the\u00a0 component<\/code> props refer to<\/p>\r\n\r\n\r\n\r\n
    the\u00a0 component to be rendered.<\/p>\r\n\r\n\r\n\r\n
    NOTE-The component props receives a component name .we cannot pass a callback function.<\/p>\r\n\r\n\r\n\r\n
    To set the initial route set the props initialRouteName<\/code> to the initial component to be rendered in the stackNavigator.<\/p>\r\n\r\n\r\n\r\n
    Specify the options for each screen<\/strong><\/p>\r\n\r\n\r\n\r\n
    In the latest version of react navigation we can specify the options of each screen by options props.<\/p>\r\n\r\n\r\n\r\n
    <Stack.Screen name='Home' component={Home} options={{ title: 'Home Screen}} \/><\/pre>\r\n\r\n\r\n\r\n
    Navigation between the screens\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n
    We can navigate between screens by props provided by the navigation library for all the components within the navigation container.<\/p>\r\n\r\n\r\n\r\n
    The navigation props are accessible to all the components and we need to call the navigation functions provided in the props. \u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n
    Let\u2019s consider we have to pass the props from one screen to another defined in the stack navigator.<\/p>\r\n\r\n\r\n\r\n
    function HomeScreen(props) {\r\n return (\r\n   <View>\r\n     <TouchableOpacity onPress={()=>props.navigation.navigate(\u201cScreen B\u201d) }>To screen B <\/TouchableOpacity>\r\n   <\/View>\r\n );\r\n}\r\n<\/pre>\r\n
     <\/p>\r\n\r\n\r\n\r\n
    The following functions are used to navigate from one screen to another.<\/p>\r\n\r\n\r\n\r\n
    1.navigate(\u2018screen name\u2019)<\/p>\r\n\r\n\r\n\r\n
    The navigation function is used to go from one screen to another.It searches for the screen passed in the arguments and if the screen is not\u00a0 present in the stack it will create\u00a0 the instance of the screen at top of the stack and if the screen is present in the stack it will navigate it at the top of the stack .The navigation function do not allow duplication in the stack.<\/p>\r\n\r\n\r\n\r\n
    NOTE- If you are passing the same screen name in which you are present then it will not do anything.<\/p>\r\n\r\n\r\n\r\n
    2. push(\u2018screen name\u2019)<\/p>\r\n\r\n\r\n\r\n
    Let\u2019s say we have a case in which we want to create a copy of the same screen multiple times then we can use the push function .This will allow us to create a copy of the screen multiple times even if the screen is present in the stack.It works similarly to the stack push operation.<\/p>\r\n\r\n\r\n\r\n
    \u00a0Example below.<\/p>\r\n\r\n\r\n\r\n
    function HomeScreen(props) {\r\n return (\r\n   <View>\r\n     <TouchableOpacity   onPress={()=>props.navigation.push(\u201cHomeScreen\u201d) }>Push homescreen again <\/TouchableOpacity>\r\n   <\/View>\r\n );\r\n}<\/pre>\r\n\r\n\r\n\r\n
     <\/p>\r\n
    3.goback()<\/p>\r\n\r\n\r\n\r\n
    The goback<\/code> function does not require any arguments to be passed in. This function behaves similar to the back button in any smartphone. The header bar automatically shows the back button that works the same as the goback <\/code>function. Example below.<\/p>\r\n\r\n\r\n\r\n
    function HomeScreen(props) {\r\n return (\r\n   <View>\r\n     <TouchableOpacity   onPress={()=>props.navigation.goBack()}>Go back <\/TouchableOpacity>\r\n   <\/View>\r\n );\r\n}\r\n<\/pre>\r\n\r\n\r\n\r\n
    Passing parameters to screen\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/strong>We can pass params to a route by putting them in an object and then passing it as a second parameter in the navigation.navigate function.\u00a0<\/p>\r\n\r\n\r\n\r\n
    To read the parameter in the routed screen we can use route.params.<\/p>\r\n\r\n\r\n\r\n
    Hooks Api<\/strong><\/p>\r\n\r\n\r\n\r\n
    With react hooks ,it’s much easier to to use stateful logic in react native.The new api v5 comes with some additional hooks .<\/p>\r\n\r\n\r\n\r\n
      \r\n
    1. useNavigation- It can access the navigation props from any child component.<\/li>\r\n
    2. useRoute- It can access the route route props of the parent component.<\/li>\r\n
    3. useIsFocused-It can get the current focus state of the component ,useful for rendering\u00a0 content based on focus.<\/li>\r\n
    4. useFocusEffect- It is used to subscribe to the event listeners only when the screen is focused.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
      Final verdict\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n
      I recommend that it’s the best library to manage react native navigation. If you are building a new project then you should give a try react-navigation 5. It’s developer-friendly and really awesome!!!<\/p>\r\n","protected":false},"excerpt":{"rendered":"
      Introduction React navigation is a library that enables a developer to navigate between the screens in react native.Its the most popular solution when it comes for navigation in react native apps which also supports both expo and CLI.The latest update of the react\u00a0 navigation brings a huge change from the previous versions. The latest react […]<\/p>\n","protected":false},"author":1,"featured_media":6070,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,6,257,412],"tags":[],"class_list":["post-6067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-mobile-web-app","category-react","category-react-native"],"yoast_head":"\nReact navigation 5 - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/react-navigation-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React navigation 5 - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Introduction React navigation is a library that enables a developer to navigate between the screens in react native.Its the most popular solution when it comes for navigation in react native apps which also supports both expo and CLI.The latest update of the react\u00a0 navigation brings a huge change from the previous versions. The latest react […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-24T07:45:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-24T09:06:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"React navigation 5\",\"datePublished\":\"2020-07-24T07:45:51+00:00\",\"dateModified\":\"2020-07-24T09:06:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/\"},\"wordCount\":796,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/React-Navigation.png\",\"articleSection\":[\"Mobile\",\"Mobile Web App\",\"React\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/\",\"name\":\"React navigation 5 - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/React-Navigation.png\",\"datePublished\":\"2020-07-24T07:45:51+00:00\",\"dateModified\":\"2020-07-24T09:06:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/React-Navigation.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/React-Navigation.png\",\"width\":1141,\"height\":634},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React navigation 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React navigation 5 - InnovationM - Blog","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.innovationm.com\/blog\/react-navigation-5\/","og_locale":"en_US","og_type":"article","og_title":"React navigation 5 - InnovationM - Blog","og_description":"Introduction React navigation is a library that enables a developer to navigate between the screens in react native.Its the most popular solution when it comes for navigation in react native apps which also supports both expo and CLI.The latest update of the react\u00a0 navigation brings a huge change from the previous versions. The latest react […]","og_url":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-07-24T07:45:51+00:00","article_modified_time":"2020-07-24T09:06:34+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"React navigation 5","datePublished":"2020-07-24T07:45:51+00:00","dateModified":"2020-07-24T09:06:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/"},"wordCount":796,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png","articleSection":["Mobile","Mobile Web App","React","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/","url":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/","name":"React navigation 5 - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png","datePublished":"2020-07-24T07:45:51+00:00","dateModified":"2020-07-24T09:06:34+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/react-navigation-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/07\/React-Navigation.png","width":1141,"height":634},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React navigation 5"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6067"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6067\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6070"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}