--- title: Bitovi Academy - Storing State in Navigation Parameters description: Maintain the React state with React Native Navigation Parameters --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [Bitovi](https://www.bitovi.com/?hsLang=en-us) - [Services](https://www.bitovi.com/services?hsLang=en-us) - [Client Work](https://www.bitovi.com/client-work?hsLang=en-us) - [Our Team](https://www.bitovi.com/about?hsLang=en-us) - [Open Source](https://www.bitovi.com/open-source?hsLang=en-us) - [Blog](https://www.bitovi.com/blog?hsLang=en-us) - [Academy](https://www.bitovi.com/academy/?hsLang=en-us) [Contact Us](https://www.bitovi.com/contact?hsLang=en-us) - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Introduction to React Native ](https://www.bitovi.com/academy/learn-react-native/intro-to-react-native.html?hsLang=en-us) - [ Setting Up Your Environment ](https://www.bitovi.com/academy/learn-react-native/setting-up-your-environment.html?hsLang=en-us) - [ Creating a New Application ](https://www.bitovi.com/academy/learn-react-native/creating-a-new-app.html?hsLang=en-us) - [ Introduction to JSX ](https://www.bitovi.com/academy/learn-react-native/intro-to-jsx.html?hsLang=en-us) - [ Introduction to Testing ](https://www.bitovi.com/academy/learn-react-native/intro-to-testing.html?hsLang=en-us) - [ Building Custom Components ](https://www.bitovi.com/academy/learn-react-native/building-custom-components.html?hsLang=en-us) - [ Debugging and DevTools ](https://www.bitovi.com/academy/learn-react-native/debugging-devtools.html?hsLang=en-us) - [ Styling in React Native ](https://www.bitovi.com/academy/learn-react-native/styling.html?hsLang=en-us) - [ Using React Context ](https://www.bitovi.com/academy/learn-react-native/react-context.html?hsLang=en-us) - [ Managing State with useState ](https://www.bitovi.com/academy/learn-react-native/managing-state.html?hsLang=en-us) - [ Navigation in React Native ](https://www.bitovi.com/academy/learn-react-native/navigation.html?hsLang=en-us) - [ Storing State in Navigation Parameters ](https://www.bitovi.com/academy/learn-react-native/navigation-params.html?hsLang=en-us) - [ Storing State in Navigation Parameters ](https://www.bitovi.com/academy/learn-react-native/storing-state.html?hsLang=en-us) - [ Making HTTP Requests ](https://www.bitovi.com/academy/learn-react-native/making-http-requests.html?hsLang=en-us) - [ Handling User Inputs ](https://www.bitovi.com/academy/learn-react-native/user-inputs.html?hsLang=en-us) - [ Using AsyncStorage ](https://www.bitovi.com/academy/learn-react-native/using-asyncstorage.html?hsLang=en-us) - [ Security and Authentication ](https://www.bitovi.com/academy/learn-react-native/security-and-auth.html?hsLang=en-us) - [ Adding Offline Support ](https://www.bitovi.com/academy/learn-react-native/offline-support.html?hsLang=en-us) - [ Integrating Maps ](https://www.bitovi.com/academy/learn-react-native/google-maps.html?hsLang=en-us) - [ Performance and Optimization ](https://www.bitovi.com/academy/learn-react-native/performance-optimization.html?hsLang=en-us) - [ Building React Native Apps ](https://www.bitovi.com/academy/learn-react-native/building.html?hsLang=en-us) - [ Publishing and Updating ](https://www.bitovi.com/academy/learn-react-native/publishing-and-updating.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Storing State in Navigation Parameters `page` Maintain the React state with React Native Navigation Parameters ## Overview In this section, you will: - Strongly type the navigation parameters of an application. - Maintain and pass the state using route params through navigation. ## Objective 1: Intro to navigation parameters Now that we've successfully implemented React Navigation in our application, we can navigate between screens easily. The only remaining issue is that we lack away to pass information, or state, between screens. So, our new goal for this section is passing state between screens using navigation parameters. ### Navigation Parameters As mentioned in the previous section, since our React Native application isn't navigated through URLs, we aren't able to pass the parameters through a URL. Instead, we'll be using the Stack we've already made. ``` import * as React from "react" import { createStackNavigator } from "@react-navigation/stack" export type ShopStackParamList = { Home: undefined UserProfile: { user: { firstName: string lastName: string email: string } theme: "dark" | "light" } Storefront: { user: { firstName: string lastName: string email: string } slug: string favorites: string[] } } const ShoppingStack = createStackNavigator() const ShopApp = () => { return ( ) } ``` Before we get into using `route` on each `Screen` of the `Navigator`, considering we're using TypeScript, we need to make an effort to make sure the properties for each component are properly typed. For this, we will create a type, `ShopStackParamList`. For each screen we will type the expected properties that will be passed along each route. The `Home` in this case doesn't expect any parameters to be passed to it, so we leave it undefined. The `UserProfile` and `Storefront` contain a few properties. Now, our `createStackNavigator` includes a type we've made `ShopStackParamList`. Because of this, now if we provide our screen components `Props` as route params, TypeScript will be able to able to identify what parameters are accessible from the components `route.params`. While the `route` is accessible from the `Navigator`, it is also accessible from the component that is being navigated to through props. ``` import type { FC } from "react" import { View, Text, Pressable } from "react-native" import { useNavigation } from "@react-navigation/native" import type { StackScreenProps } from "@react-navigation/stack" import { ShopStackParamList } from "./StackRoute" type ProfileProps = StackScreenProps const UserProfile: FC = ({ route }) => { const { user } = route.params const navigation = useNavigation() return ( Hello! {user.firstName} {user.lastName}. Is your {user.email} correct? { navigation.navigate("Storefront", { user, slug: "mainPage" }) }} > Shop Here! ) } ``` To make sure the `Props` for our component match up to what we have for our `StackNavigator`, we can import the type we made and reference the `UserProfile` properties specifically. As you can see, in the `UserProfile` component, we can access the `route.params` of the component if any are provided. We grab the `user`, and are able to use it's properties throughout the component. This includes passing the state of `user` through `navigation`. We can add `user`, and other properties as an object for the second argument of `navigation.navigate`. Thus on the `Storefront` screen, all of those params passed will be accessible within its component. ### Setup 1 ✏️ Update **src/App.tsx** to be: ``` import type { FC } from "react" import { Pressable, SafeAreaView } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createBottomTabNavigator } from "@react-navigation/bottom-tabs" import Icon from "react-native-vector-icons/Ionicons" import ThemeProvider, { useTheme } from "./design/theme/ThemeProvider" import StateList from "./screens/StateList" import Settings from "./screens/Settings" import RestaurantDetails from "./screens/RestaurantDetails" import RestaurantList from "./screens/RestaurantList" import CityList from "./screens/CityList" import Box from "./design/Box" import Typography from "./design/Typography" import { createStackNavigator } from "@react-navigation/stack" declare global { // eslint-disable-next-line @typescript-eslint/no-namespace namespace ReactNavigation { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface RootParamList extends RestaurantsStackParamList {} } } export type RestaurantsStackParamList = { StateList: undefined CityList: { state: { name: string short: string } } } const RestaurantsStack = createStackNavigator() const RestaurantsNavigator: FC = () => { return ( { if (!navigation.canGoBack()) return null return ( {/* @ts-ignore */} {[route.params?.city?.name, route.params?.state?.name] .filter(Boolean) .join(", ")} ) }, }} > ) } const AppTabs = createBottomTabNavigator() export const AppNavigator: FC = () => { const theme = useTheme() return ( ({ headerStyle: { backgroundColor: theme.palette.screen.main, }, headerTitleStyle: { color: theme.palette.screen.contrast, ...theme.typography.title, }, tabBarStyle: { backgroundColor: theme.palette.screen.main, }, tabBarActiveTintColor: theme.palette.primary.strong, tabBarInactiveTintColor: theme.palette.screen.contrast, tabBarIcon: ({ focused, color }) => { let icon = "settings" if (route.name === "Settings") { icon = focused ? "settings" : "settings-outline" } else if (route.name === "Restaurants") { icon = focused ? "restaurant" : "restaurant-outline" } return }, })} > ) } const App: FC = () => { return ( ) } export default App ``` ✏️ Update **src/screens/StateList/StateList.tsx** to be: ``` import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import Card from "../../design/Card" import Typography from "../../design/Typography" import Screen from "../../design/Screen" import Button from "../../design/Button" export interface State { name: string short: string } const states: State[] = [ { name: "Illinois", short: "IL", }, { name: "Wisconsin", short: "WI", }, ] type Props = StackScreenProps const StateList: FC = () => { const navigation = useNavigation() return ( Place My Order: Coming Soon To... ( )} keyExtractor={(item) => item.short} /> ) } export default StateList ``` ### Verify 1 ✏️ Update **src/screens/StateList/StateList.test.tsx** to be: ``` import { NavigationContainer } from "@react-navigation/native" import { render, screen } from "@testing-library/react-native" import StateList from "./StateList" describe("StateList", () => { it("renders states", async () => { render( , ) expect(screen.getByText(/Illinois/i)).toBeOnTheScreen() expect(screen.getByText(/Wisconsin/i)).toBeOnTheScreen() }) }) ``` ### Exercise 1 - Update the typing of `StateList` component, using the type `Props` made by the `StackScreenProps`. - Update the `navigation.navigate` to accept `stateItem` as a parameter. ### Solution 1 If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`! Click to see the solution ✏️ Update **src/screens/StateList/StateList.tsx** to be: ``` import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import Card from "../../design/Card" import Typography from "../../design/Typography" import Screen from "../../design/Screen" import Button from "../../design/Button" export interface State { name: string short: string } const states: State[] = [ { name: "Illinois", short: "IL", }, { name: "Wisconsin", short: "WI", }, ] type Props = StackScreenProps const StateList: FC = () => { const navigation = useNavigation() return ( Place My Order: Coming Soon To... ( )} keyExtractor={(item) => item.short} /> ) } export default StateList ``` ## Objective 2: Implement city and restaurant params ### Setup 2 ✏️ Update **src/App.tsx** to be: ``` import type { FC } from "react" import { Pressable, SafeAreaView } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createBottomTabNavigator } from "@react-navigation/bottom-tabs" import Icon from "react-native-vector-icons/Ionicons" import ThemeProvider, { useTheme } from "./design/theme/ThemeProvider" import StateList from "./screens/StateList" import Settings from "./screens/Settings" import RestaurantDetails from "./screens/RestaurantDetails" import RestaurantList from "./screens/RestaurantList" import CityList from "./screens/CityList" import Box from "./design/Box" import Typography from "./design/Typography" import { createStackNavigator } from "@react-navigation/stack" declare global { // eslint-disable-next-line @typescript-eslint/no-namespace namespace ReactNavigation { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface RootParamList extends RestaurantsStackParamList {} } } export type RestaurantsStackParamList = { StateList: undefined CityList: { state: { name: string short: string } } RestaurantList: { state: { name: string short: string } city: { name: string state: string } } RestaurantDetails: { state: { name: string short: string } city: { name: string state: string } slug: string } } const RestaurantsStack = createStackNavigator() const RestaurantsNavigator: FC = () => { return ( { if (!navigation.canGoBack()) return null return ( {/* @ts-ignore */} {[route.params?.city?.name, route.params?.state?.name] .filter(Boolean) .join(", ")} ) }, }} > ) } const AppTabs = createBottomTabNavigator() export const AppNavigator: FC = () => { const theme = useTheme() return ( ({ headerStyle: { backgroundColor: theme.palette.screen.main, }, headerTitleStyle: { color: theme.palette.screen.contrast, ...theme.typography.title, }, tabBarStyle: { backgroundColor: theme.palette.screen.main, }, tabBarActiveTintColor: theme.palette.primary.strong, tabBarInactiveTintColor: theme.palette.screen.contrast, tabBarIcon: ({ focused, color }) => { let icon = "settings" if (route.name === "Settings") { icon = focused ? "settings" : "settings-outline" } else if (route.name === "Restaurants") { icon = focused ? "restaurant" : "restaurant-outline" } return }, })} > ) } const App: FC = () => { return ( ) } export default App ``` ✏️ Update **src/screens/CityList/CityList.tsx** to be: ``` import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import Screen from "../../design/Screen" import Button from "../../design/Button" const cities = [ { name: "Madison", state: "WI" }, { name: "Springfield", state: "IL" }, ] type Props = StackScreenProps const CityList: FC = () => { const navigation = useNavigation() return ( ( )} keyExtractor={(item) => item.name} /> ) } export default CityList ``` ✏️ Update **src/screens/RestaurantList/RestaurantList.tsx** to be: ``` import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import Box from "../../design/Box" import Button from "../../design/Button" type Props = StackScreenProps const restaurants = [ { name: "Cheese Curd City", slug: "cheese-curd-city", images: { // thumbnail: CheeseThumbnail, }, address: { street: "2451 W Washburne Ave", city: "Green Bay", state: "WI", zip: "53295", }, _id: "Ar0qBJHxM3ecOhcr", }, { name: "Poutine Palace", slug: "poutine-palace", images: { // thumbnail: PoutineThumbnail, }, address: { street: "230 W Kinzie Street", city: "Green Bay", state: "WI", zip: "53205", }, _id: "3ZOZyTY1LH26LnVw", }, ] const RestaurantList: FC = () => { const navigation = useNavigation() const navigateToDetails = () => { navigation.navigate("RestaurantDetails") } return ( <> ( )} keyExtractor={(item) => item._id} /> ) } export default RestaurantList ``` ### Verify 2 ✏️ Update **src/screens/CityList/CityList.test.tsx** to be: ``` import { NavigationContainer } from "@react-navigation/native" import { render, screen } from "@testing-library/react-native" import CityList from "./CityList" describe("CityList component", () => { it("renders city List", () => { render( , ) expect(screen.getByText(/Madison/i)).toBeOnTheScreen() expect(screen.getByText(/Springfield/i)).toBeOnTheScreen() }) }) ``` ✏️ Update **src/screens/RestaurantList/RestaurantList.test.tsx** to be: ``` import { NavigationContainer } from "@react-navigation/native" import { render, screen } from "@testing-library/react-native" import RestaurantList from "./RestaurantList" const params = { state: { short: "sT", name: "stateTest", }, city: { name: "cityTest", state: "sT", }, slug: "slugTest", } describe("RestaurantList component", () => { it("renders restaurant List", () => { render( , ) expect(screen.getByText(/Cheese Curd City/i)).toBeOnTheScreen() expect(screen.getByText(/Poutine Palace/i)).toBeOnTheScreen() }) }) ``` ### Exercise 2 For both the `CityList` and `RestaurantList` components: - Update the the typing of each component to use the given `Props`. - Destructure the `route` of for each component, to fetch its stored state. - Update the `navigation.navigate` to accept the necessary parameters. ### Solution 2 If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`! Click to see the solution ✏️ Update **src/screens/CityList/CityList.tsx** to be: ``` import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import Screen from "../../design/Screen" import Button from "../../design/Button" const cities = [ { name: "Madison", state: "WI" }, { name: "Springfield", state: "IL" }, ] type Props = StackScreenProps const CityList: FC = ({ route }) => { const { state } = route.params const navigation = useNavigation() return ( ( )} keyExtractor={(item) => item.name} /> ) } export default CityList ``` ✏️ Update **src/screens/RestaurantList/RestaurantList.tsx** to be: ``` import type { StackScreenProps } from "@react-navigation/stack" import type { RestaurantsStackParamList } from "../../App" import type { FC } from "react" import { FlatList } from "react-native" import { useNavigation } from "@react-navigation/native" import Box from "../../design/Box" import Button from "../../design/Button" type Props = StackScreenProps const restaurants = [ { name: "Cheese Curd City", slug: "cheese-curd-city", images: { // thumbnail: CheeseThumbnail, }, address: { street: "2451 W Washburne Ave", city: "Green Bay", state: "WI", zip: "53295", }, _id: "Ar0qBJHxM3ecOhcr", }, { name: "Poutine Palace", slug: "poutine-palace", images: { // thumbnail: PoutineThumbnail, }, address: { street: "230 W Kinzie Street", city: "Green Bay", state: "WI", zip: "53205", }, _id: "3ZOZyTY1LH26LnVw", }, ] const RestaurantList: FC = ({ route }) => { const { state, city } = route.params const navigation = useNavigation() const navigateToDetails = (slug) => { navigation.navigate("RestaurantDetails", { state, city, slug, }) } return ( <> ( )} keyExtractor={(item) => item._id} /> ) } export default RestaurantList ``` ## Next steps Next, we'll cover an essential part of nearly all web applications: [Making HTTP Requests](https://www.bitovi.com/academy/learn-react-native/making-http-requests.html?hsLang=en-us). ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-react-native/storing-state.html", "description": "Maintain the React state with React Native Navigation Parameters " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```