{"id":15024581,"url":"https://github.com/amandeepmittal/react-native-examples","last_synced_at":"2025-04-13T19:19:21.723Z","repository":{"id":37695534,"uuid":"235285147","full_name":"amandeepmittal/react-native-examples","owner":"amandeepmittal","description":"📱 A repo that contains React Native \u0026 Expo examples, mostly related to articles \u0026 tutorials I publish on my blog.","archived":false,"fork":false,"pushed_at":"2024-12-14T16:19:54.000Z","size":11517,"stargazers_count":988,"open_issues_count":3,"forks_count":553,"subscribers_count":30,"default_branch":"main","last_synced_at":"2025-04-06T17:01:37.081Z","etag":null,"topics":["android","animated","expo","expo-router","firebase","firestore","ios","react-native","react-native-svg","react-navigation"],"latest_commit_sha":null,"homepage":"https://amanhimself.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amandeepmittal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"amandeepmittal"}},"created_at":"2020-01-21T07:58:05.000Z","updated_at":"2025-04-06T06:39:50.000Z","dependencies_parsed_at":"2024-12-21T22:13:44.289Z","dependency_job_id":null,"html_url":"https://github.com/amandeepmittal/react-native-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amandeepmittal%2Freact-native-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amandeepmittal%2Freact-native-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amandeepmittal%2Freact-native-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amandeepmittal%2Freact-native-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amandeepmittal","download_url":"https://codeload.github.com/amandeepmittal/react-native-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248766684,"owners_count":21158302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animated","expo","expo-router","firebase","firestore","ios","react-native","react-native-svg","react-navigation"],"created_at":"2024-09-24T20:00:36.054Z","updated_at":"2025-04-13T19:19:21.702Z","avatar_url":"https://github.com/amandeepmittal.png","language":"JavaScript","funding_links":["https://github.com/sponsors/amandeepmittal","https://github.com/sponsors/amandeepmittal?frequency=one-time"],"categories":[],"sub_categories":[],"readme":"# React Native Examples\n\n[![made with expo](https://img.shields.io/badge/MADE%20WITH%20EXPO-000.svg?style=for-the-badge\u0026logo=expo\u0026labelColor=4630eb\u0026logoWidth=20)](https://github.com/expo/expo) [![supports iOS and Android](https://img.shields.io/badge/Platforms-Native-4630EB.svg?style=for-the-badge\u0026logo=EXPO\u0026labelColor=000\u0026logoColor=fff)](https://github.com/expo/expo) [![follow @amanhimself](https://img.shields.io/twitter/follow/amanhimself.svg?style=for-the-badge\u0026logo=TWITTER\u0026logoColor=FFFFFF\u0026labelColor=00aced\u0026logoWidth=20\u0026color=lightgray)](https://twitter.com/amanhimself)\n\n## Why react-native-examples\n\nI am passionate about React Native and Expo ecosystem and one thing I often struggled with is the lack of resources when I was getting started. My another passion is for writing and I though why not combine these two and see how it goes.\n\nI write about React Native and Expo form of blog posts, and tutorials on my personal blog [**amanhimself.dev**](https://amanhimself.dev/) and sometimes for [other external publications such as LogRocket, freeCodeCamp, Sentry, and Jscrambler](https://amanhimself.dev/about/). This repository is a collection of examples created for those blog posts.\n\nWith time, it gets harder to maintain different repositories, update the code and dependencies (and trying to match up with the speed of ever-changing ecosystem). Thus, I decided to keep all of projects/exmaples that are mostly code examples used in these various tutorials in one place and hence, this repository.\n\nIt's completely [free](https://github.com/amandeepmittal/react-native-examples/blob/main/LICENSE.md). If you find anything useful in this repo, go ahead pick up any code snippet, use it in your own way.\n\nYou may find some of the examples being outdated in time, in terms of framework updates or libraries. Don't worry the concept would be the same. Feel free top up an issue or a PR if you feel like somethings needs to be changed.\n\n**To keep me caffeinated, you can buy me a coffee too ☕️**\n\n[![](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/amandeepmittal?frequency=one-time)\n\n---\n\n## Add opacity to Pressable component\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/pressable-with-opacity)\n- 📝 [Blog post](https://amanhimself.dev/blog/add-opacity-to-pressable-component-react-native/)\n\nThis example uses:\n\n- Expo SDK 52\n\n\u003cimg src=\"https://i.imgur.com/LDyiXIu.gif\" width=\"200\"/\u003e\n\n## Remove Header Border Width in React Navigation or Expo Router\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/remove-header-border-react-navigation)\n- 📝 [Blog post](https://amanhimself.dev/blog/remove-bottom-border-shadow-on-header-in-react-navigation/)\n\nThis example uses:\n\n- Expo SDK 51\n- [Expo Router v3](https://docs.expo.dev/router/introduction/)\n\n\u003cimg src=\"https://i.imgur.com/PnxIHxT.png\" width=\"200\"/\u003e \u003cimg src=\"https://i.imgur.com/bBQuIJJ.png\" width=\"200\"/\u003e\n\n## Deep Linking with React Native and React Navigation v6\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/rnDeepLinking)\n- 📝 [Blog post](https://amanhimself.dev/blog/handle-deep-linking-react-native/)\n\nThis example uses:\n\n- React Native `0.67.x`\n- [React Navigation v6](https://reactnavigation.org/)\n\n\u003cimg src=\"https://i.imgur.com/vinhEG4.gif\" width=\"440\"/\u003e\n\n## useInfiniteQuery hook from React Query and FlatList\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/infinite-scroll-with-react-query)\n- 📝 [Blog post](https://amanhimself.dev/blog/infinite-scroll-with-react-query-and-flatlist-in-react-native/)\n\nThis example uses:\n\n- Expo SDK `44`\n- [create-react-native-app](https://github.com/expo/create-react-native-app)\n- [NativeBase v3](https://docs.nativebase.io/installation)\n- [React Query](https://react-query.tanstack.com/)\n\n\u003cimg src=\"https://i.imgur.com/uLmbrjC.gif\" width=\"200\"/\u003e\n\n## Show/Hide Password Visibility Custom Hook\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/password-visibility-custom-hook-example)\n- 📝 [Blog post](https://amanhimself.dev/blog/show-hide-password-in-react-native-using-custom-hook/)\n\nThis example uses:\n\n- Expo SDK 51\n\n\u003cimg src=\"https://i.imgur.com/rTNH2Ud.gif\" width=\"200\"/\u003e\n\n## Safe Area Context in React Native and Expo apps\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/safe-area-insets-example)\n- 📝 [Blog post](https://amanhimself.dev/blog/safe-area-context-in-react-native-apps/)\n\nThis example uses:\n\n- Expo SDK `44`\n- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context)\n\n\u003cimg src=\"https://i.imgur.com/86uwW7N.png\" width=\"400\"/\u003e\n\n## Add splash screen and app icon\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnSplashAndIconExample)\n- 📝 [Blog post](https://amanhimself.dev/blog/how-to-add-a-splash-screen-and-app-icon-in-react-native-with-react-native-bootsplash/)\n\nThis example uses:\n\n- React Native version `0.65.1`\n- React Navigation v6\n- [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash)\n\n\u003cimg src=\"https://i.imgur.com/kJMWcH1.gif\" width=\"400\"/\u003e\n\n## Multi-language Support Example\n\nLearn how to add multi-language support to a React Native app using [i18next](https://www.i18next.com/).\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnMultiLanguageExample)\n- 📝 [Blog post](https://amanhimself.dev/blog/multi-language-support-in-react-native-with-react-i18next/)\n\nThis example uses:\n\n- React Native version `0.64.1`\n- React Navigation v6\n- react-native-localize\n- i18next\n- react-i18next\n- @react-native-async-storage/async-storage\n\n\u003cimg src=\"https://amanhimself.dev/_next/image/?url=https%3A%2F%2Fcrowdbotics.ghost.io%2Fcontent%2Fimages%2F2021%2F08%2Fcb3.png\u0026w=640\u0026q=100\" width=\"300\"/\u003e\n\n## Expo Firebase Auth Example\n\nLearn how to integrate Firebase Auth service using Firebase JS SDK and Expo SDK (by generating a managed workflow app).\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-firebase-auth-example)\n- 📝 [Blog post](https://amanhimself.dev/blog/firebase-authentication-with-expo/)\n\nThis example uses:\n\n- Expo SDK version `41.x.x`\n- Firebase JS SDK\n- React Navigation version `5.x.x`\n- Managing Environment Variables with `app.config.json`\n\n## Create a custom Image Gallery Preview\n\nLearn how to sync thumbnail using `FlatList` with Carousel from `react-native-snap-carousel`.\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnPreviewImageGallery)\n- 📝 [Blog post](https://medium.com/crowdbotics/how-to-create-a-custom-image-gallery-in-react-native-b84b3c4906ec)\n\nThis example uses:\n\n- React Native version `0.63.4`\n- The [scrollToOffset method on FlatList](https://reactnative.dev/docs/flatlist#scrolltooffset)\n- [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel)\n- Images from [Unsplash](https://unsplash.com/s/photos/amsterdam)\n\n\u003cimg src=\"https://i.imgur.com/z9MXxjA.png\" width=\"200\"/\u003e \u003cimg src=\"https://i.imgur.com/5tYg6ss.gif\" width=\"200\"/\u003e\n\n## Convert Reverse Geocode into Postal Address\n\nFetch user's current location and then convert into actual postal address.\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/expo-geolocation-example)\n- 📝 [Blog post](https://amanhimself.dev/blog/react-native-geolocation-to-get-postal-address/)\n\nThis example uses:\n\n- Expo SDK 44\n- [React Navigation Stack v6](https://reactnavigation.org/docs/getting-started)\n- [expo-location](https://docs.expo.dev/versions/latest/sdk/location/)\n- Icon from [Flaticon.com](https://www.flaticon.com/free-icon/placeholder_1001022?term=location\u0026related_id=1001022)\n\n\u003cimg src=\"https://i.imgur.com/YSBT6tv.gif\" width=\"200\"/\u003e\n\n## Create a Translucent Bottom Tab Bar\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/customTabBar)\n- 📝 [Blog post](https://amanhimself.dev/blog/create-custom-tab-bar-in-react-native/)\n\nThis example uses:\n\n- react-native-cli\n- [React Navigation Bottom Tabs v5](https://reactnavigation.org/docs/getting-started)\n- [BlurView](https://github.com/Kureev/react-native-blur) effect\n- Images from Unsplash\n\n\u003cimg src=\"https://i.imgur.com/Bp58Gzm.gif\" width=\"200\"/\u003e \u003cimg src=\"https://i.imgur.com/O3oHRpd.gif\" width=\"200\"/\u003e\n\n## Shared Element transitions\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/shared-element-transitions)\n- 📝 [Blog post](https://blog.logrocket.com/how-to-use-shared-element-transition-with-react-navigation-v5/)\n\nThis example uses:\n\n- Expo SDK 44\n- [React Navigation v6](https://reactnavigation.org/docs/getting-started)\n- [react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element)\n- [react-native-shared-element](https://github.com/IjzerenHein/react-native-shared-element#SharedElementAnimation)\n- Images from Unsplash\n- Delayed loading example using [react-native-animatable](https://github.com/oblador/react-native-animatable)\n\n\u003cimg src=\"https://i.imgur.com/M4Fhl05.gif\" width=\"200\"/\u003e\n\n## Custom scroll bar indicator in ScrollView with Animated API\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/custom-scroll-indicator)\n- 📝 [Blog post](https://amanhimself.dev/blog/custom-scroll-bar-indicator-with-react-native-animated-api)\n- **Description**: The implementation of a scroll bar indicator is not directly customizable on cross-platforms in React Native. If you are building an app whose screen design depends on displaying a customized scroll bar indicator, then let's build one in this tutorial.\n  This example uses:\n  - Expo SDK 44\n  - `Animated.multiply()` from React Native API\n  - `onScroll` prop on `ScrollView`\n  - Example API data from [Draftbit's Example Data Service](https://example-data.draftbit.com/).\n\n\u003cimg src=\"https://i.imgur.com/WCvjoHN.gif\" width=\"200\"/\u003e \u003cimg src=\"https://i.imgur.com/jWULIWa.gif\" width=\"200\" /\u003e\n\n## Redux Persist\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/redux-persist-asyncstorage)\n- 📝 [Blog post](https://amanhimself.dev/blog/redux-persist-in-react-native-with-async-storage/)\n- **Description**: How to configure, integrate and use redux-persist library in a React Native \u0026 Expo app and dynamically change the UI based on the state updates. This example uses:\n  - Expo SDK 40\n  - react-navigation v5 (bottom-tabs)\n  - redux, react-redux (with hooks), redux-thunk, redux-persist\n  - Example API data from [Draftbit's Example Data Service](https://example-data.draftbit.com/).\n\n\u003cimg src=\"https://i.imgur.com/tP4SSP5.gif\" width=\"200\" /\u003e\n\n## Forms with Formik\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/forms-with-formik)\n- 📝 [Blog post](https://blog.jscrambler.com/creating-and-validating-react-native-forms-with-formik/)\n- **Description**: In this post, let's take a look at how to integrate Formik along with Yup in a React Native app to create forms and validate them. We are also going to cover how to change the focus of one input field to another using a device's keyboard by forwarding the ref created using a `useRef` hook.\n\n\u003cimg src=\"https://blog.jscrambler.com/content/images/2020/10/jscrambler-blog-creating-forms-react-native-formik-4.gif\" width=\"200\"/\u003e \u003cimg src=\"https://blog.jscrambler.com/content/images/2020/10/jscrambler-blog-creating-forms-react-native-formik-8.gif\" width=\"200\" /\u003e\n\n## Animated Header View on a Scroll with React Native Animated API\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/animate-header-on-scroll)\n- 📝 [Blog post](https://amanhimself.dev/blog/animate-header-view-on-scroll-with-react-native-animated-api/)\n- **Description**: In this tutorial, let's explore a way to create a header view component that animates on the scroll position of the ScrollView component from React Native. We will go through the basics of creating a new Animated value as well as explaining the significance of functions and properties like interpolation, extrapolate, contentOffset, and so on. This example uses:\n  - Expo SDK 38\n  - React Native Animated API\n\n\u003cimg src=\"https://blog.jscrambler.com/content/images/2020/10/jscrambler-blog-how-to-animate-header-view-with-react-native-animated-5.gif\" width=\"200\" /\u003e \u003cimg src=\"https://blog.jscrambler.com/content/images/2020/10/jscrambler-blog-how-to-animate-header-view-with-react-native-animated-6.gif\" width=\"200\" /\u003e\n\n## Chat app with Expo + Firebase + Firestore + react-native-gifted-chat + react-native-paper + react-navigation v5\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/ChatApp)\n- 👉 **Blog post series**: [Part1](https://amanhimself.dev/blog/chat-app-with-react-native-part-1) | [Part2](https://amanhimself.dev/blog/chat-app-with-react-native-part-2) | [Part3](https://amanhimself.dev/blog/chat-app-with-react-native-part-3) | [Part4](https://amanhimself.dev/blog/chat-app-with-react-native-part-4) | [Part5](https://amanhimself.dev/blog/chat-app-with-react-native-part-5) | [Part6](https://amanhimself.dev/blog/chat-app-with-react-native-part-6)\n\n\u003cimg src=\"https://miro.medium.com/max/684/1*7UqfiUWxFDtSyR2_CQoigQ.gif\" width=\"200\" /\u003e \u003cimg src=\"https://miro.medium.com/max/684/1*5owHh4tZ5mmOyVfsn9kOwA.gif\" width=\"200\" /\u003e\n\n\u003cimg src=\"https://miro.medium.com/max/684/1*Ztwt_qL30dreUv_JMvhhwg.gif\" width=\"200\" /\u003e \u003cimg src=\"https://miro.medium.com/max/684/1*nDaN1lXF75iWEWg6X-0sqQ.gif\" width=\"200\" /\u003e\n\n\u003cimg src=\"https://miro.medium.com/max/714/1*_X5Ye5IJpkOYbUsED8ELYg.gif\" width=\"200\" /\u003e\n\n## Create onBoarding screens with react-native-viewpager\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/onboarding-viewpager)\n- 📝 [Blog post](https://blog.logrocket.com/how-to-create-onboarding-screens-with-react-native-viewpager/)\n- **Description**: In this tutorial, we’ll look at one of the ways to create onboarding screens in a React Native app. We are going to use a React Native community package, called react-native-viewpager, that allows us to swipe left or right between different pages where each page has some data to display.\n\n\u003cimg src=\"https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/09/completenavigationflow.gif?resize=362%2C748\u0026ssl=1\" width=\"200\" /\u003e\n\n## Remove Tab bar Border Width\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/remove-tabbar-border)\n- 📝 [Blog post](https://amanhimself.dev/blog/react-navigation-remove-tab-bar-border/)\n\nThis example uses:\n\n- Expo SDK 44\n- [React Navigation v6](https://reactnavigation.org/docs/getting-started)\n\n\u003cimg src=\"https://i.imgur.com/ttIMI5V.png\" width=\"200\"/\u003e \u003cimg src=\"https://i.imgur.com/WqR3X9I.png\" width=\"200\"/\u003e\n\n## Create Custom Custom Wavy Headers with react-native-svg\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/onboarding-viewpager)\n- 📝 [Blog post](https://amanhimself.dev/blog/create-custom-headers-with-react-native-svg)\n\n\u003cimg src=\"https://miro.medium.com/max/598/1*aivsFUf_OF6mYBSfOCGrTQ.gif\" width=\"200\" /\u003e\n\n## Using Styled Components in React Native and Expo\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnStyledComponents)\n- 📝 [Blog post](https://blog.logrocket.com/how-to-use-styled-components-with-react-native/)\n\n\u003cimg src=\"https://blog.logrocket.com/wp-content/uploads/2020/10/completedui-nocdn.png\" width=\"200\" /\u003e\n\n## Using react-native-image-picker\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnImagePickerExample)\n- 📝 [Blog post](https://amanhimself.dev/blog/how-to-use-react-native-image-picker)\n\n\u003cimg src=\"https://crowdbotics.ghost.io/content/images/2020/04/cb14.png\" width=\"200\" /\u003e\n\n## Handle Navigation in WebViews\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnWebViewCustomNav)\n- 📝 [Blog post](https://amanhimself.dev/blog/handle-navigation-in-webviews-react-native)\n\n\u003cimg src=\"https://miro.medium.com/max/377/1*r2li3qWatN2JM_Pl9nhGBA.gif\" width=\"200\" /\u003e\n\n## Getting Started with react-navigation v5\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-stack-navigator)\n- 📝 [Blog post](https://amanhimself.dev/blog/stack-navigator-with-react-navigation-v5)\n\n\u003cimg src=\"https://miro.medium.com/max/825/1*IUWdHNEwH4bLtRzBwQ8yng.gif\" width=\"400\" /\u003e\n\n## Nesting Tab and Stack Navigation Patterns in react-navigation v5\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-tab-navigator)\n- 📝 [Blog post](https://amanhimself.dev/blog/nested-navigators-in-react-native)\n\n\u003cimg src=\"https://miro.medium.com/max/369/1*gCs24QDMEQ_D6DcDxjiALw.gif\" width=\"200\" /\u003e\n\n## Getting Started with Expo and React Native with Hooks \u0026 Redux (Hooks!)\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/master/reactnav5-tab-navigator)\n- 👉 **Blog post series**: [Part 1](https://amanhimself.dev/blog/getting-started-with-react-native-expo-hooks-2020) | [Part 2](https://amanhimself.dev/blog/redux-with-react-native-hooks)\n\n\u003cimg src=\"https://miro.medium.com/max/381/1*BJYPQHfTF0wKbZ9CIIhL0g.gif\" width=\"200\" /\u003e\n\n## Change status bar style config based on route with useIsFocused \u0026 react-navigation v6\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/02-statusbar-config-based-on-route)\n\n**Uses**\n\n- [`useIsFocused` hook from React Navigation](https://reactnavigation.org/docs/status-bar/)\n- [`expo-status-bar`](https://docs.expo.dev/versions/latest/sdk/status-bar/)\n\n\u003cimg src=\"https://i.imgur.com/sS9ASUg.gif\" width=\"200\" /\u003e\n\n## Create a custom hook to change status bar styles with useFocusEffect \u0026 react-navigation v6\n\n\u003e **Warning**\n\u003e Example Outdated. I wrote this status bar hook without knowing that the React Navigation library provides a `useIsFocused` hook. I [updated my example using their technique that also works nicely with `expo-status-bar`](#change-status-bar-style-config-based-on-route-with-useisfocused--react-navigation-v6).\n\n- 🐙 [Repo](https://github.com/amandeepmittal/react-native-examples/tree/main/01-custom-status-bar-hook)\n- 👉 [Blog post series](https://amanhimself.dev/blog/create-custom-status-bar-hook-react-navigation)\n\n\u003cimg src=\"https://i.imgur.com/sS9ASUg.gif\" width=\"200\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famandeepmittal%2Freact-native-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famandeepmittal%2Freact-native-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famandeepmittal%2Freact-native-examples/lists"}