--- title: Best React Native posts — September 2023 | daily.dev description: The most upvoted React Native posts from September 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/react-native/best-of/2023/09 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/react-native/best-of/2023/09 og:type: website og:site_name: daily.dev og:title: Best React Native posts — September 2023 | daily.dev og:description: The most upvoted React Native posts from September 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of React Native — September 2023 1. 1 [](/posts/react-custom-hook-usescript-dlbvty46f "React Custom Hook: useScript") Article habr · 3y React Custom Hook: useScript This article explores the useScript custom hook in React, which allows for asynchronous script loading and improves performance and user experience. It provides examples of how the hook can be used in different scenarios. 86 1 2. 2 [](/posts/react-custom-hook-useonscreen-qlstgjdg2 "React Custom Hook: useOnScreen") Article habr · 3y React Custom Hook: useOnScreen The useOnScreen hook leverages the power of the Intersection Observer API. It can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls. UseOnScreen will notify you when it enters or exits the viewport. 83 5 3. 3 [](/posts/react-custom-hook-useprevious-rpihxtwtq "React Custom Hook: usePrevious") Article habr · 3y React Custom Hook: usePrevious "usePrevious" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The advantages of using usePrevious are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes. 71 3 4. 4 [](/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m "Building Adaptive User Interfaces in React Native") Article builder.io · 3y Building Adaptive User Interfaces in React Native React Native provides components and APIs to adapt to changes in device sizes and orientations. The Dimensions API in React Native allows you to obtain the device's width and height. You can use these values to adapt styles based on the device size. For more complex platform-specific scenarios, you can split your code into separate files. 49 2 5. 5 [](/posts/react-custom-hook-userendercount-bfzxkkfk5 "React Custom Hook: useRenderCount") Article habr · 3y React Custom Hook: useRenderCount The "useRenderCount" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook uses React's useEffect and useRef hooks to keep a count of renders. With each render, the count is incremented, providing you with real-time feedback on the component's render frequency. 48 1 6. 6 [](/posts/react-custom-hook-usemediaquery-cmtrgdfqt "React Custom Hook: useMediaQuery") Article habr · 3y React Custom Hook: useMediaQuery The useMediaQuery hook allows you to dynamically update your UI based on a given media query. The hook is not limited to specific use cases; it can be used in a variety of scenarios. For instance, you can use it to dynamically adjust the layout of a navigation menu, hide or show certain elements based on screen size. 44 1 7. 7 [](/posts/react-custom-hook-useonlinestatus-0qehlurt2 "React Custom Hook: useOnlineStatus") Article habr · 3y React Custom Hook: useOnlineStatus "useOnlineStatus" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook internally uses the "navigator.onLine" property to determine the initial online status and dynamically updates it whenever the user's connectivity changes. 43 1 8. 8 [](/posts/react-custom-hook-usegeolocation-kkbv5gxn1 "React Custom Hook: useGeolocation") Article habr · 3y React Custom Hook: useGeolocation The useGeolocation hook uses React's useState and useEffect hooks to manage the state of loading, errors, and geolocation data. The hook automatically handles the loading state, updating it when geolocated data is being fetched, and sets the error state if any issues arise during the process. 41 9. 9 [](/posts/react-custom-hook-uselongpress-iojz3941v "React Custom Hook: useLongPress") Article habr · 3y React Custom Hook: useLongPress The useLongPress hook offers flexibility through customizable options. Developers can specify the desired delay for a long press, allowing them to fine-tune the duration required for an action to be triggered. UseLongPress provides an elegant solution for incorporating long-press interactions that elevate user engagement and improve overall usability. 22 10. 10 [](/posts/food-recipe-app-using-react-native-reanimated-3-0-and-tailwindcss-x28661mhm "Food Recipe App using React Native Reanimated 3.0 and TailwindCSS") Article React Native Example · 3y Food Recipe App using React Native Reanimated 3.0 and TailwindCSS Food Recipe App uses React Native Reanimated 3.0 and Tailwind CSS Food-Recipe-App-React-Native Watch Tutorial on YouTube. Open it in the Expo app on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. 23 1 11. 11 [](/posts/animated-coffee-ordering-with-react-native-5rbbla7ic "Animated Coffee ordering with react native") Article React Native Example · 3y Animated Coffee ordering with react native Animated Coffee ordering with react native-gesture-handler. Read Drag & drop coffee Ordering concept with react-native (Expo) final. Read Drag and drop coffee ordering concept. 19 2 [See all React Native archives](/tags/react-native/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/react-native/best-of/2023/09#page","url":"https://daily.dev/tags/react-native/best-of/2023/09","name":"Best React Native Posts — September 2023","description":"The most upvoted React Native posts from September 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/react-native/best-of/2023/09#items","numberOfItems":11,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/react-custom-hook-usescript-dlbvty46f","name":"React Custom Hook: useScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/react-custom-hook-useonscreen-qlstgjdg2","name":"React Custom Hook: useOnScreen"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/react-custom-hook-useprevious-rpihxtwtq","name":"React Custom Hook: usePrevious"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m","name":"Building Adaptive User Interfaces in React Native"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/react-custom-hook-userendercount-bfzxkkfk5","name":"React Custom Hook: useRenderCount"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/react-custom-hook-usemediaquery-cmtrgdfqt","name":"React Custom Hook: useMediaQuery"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/react-custom-hook-useonlinestatus-0qehlurt2","name":"React Custom Hook: useOnlineStatus"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/react-custom-hook-usegeolocation-kkbv5gxn1","name":"React Custom Hook: useGeolocation"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/react-custom-hook-uselongpress-iojz3941v","name":"React Custom Hook: useLongPress"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/food-recipe-app-using-react-native-reanimated-3-0-and-tailwindcss-x28661mhm","name":"Food Recipe App using React Native Reanimated 3.0 and TailwindCSS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/animated-coffee-ordering-with-react-native-5rbbla7ic","name":"Animated Coffee ordering with react native"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"React Native","item":"https://daily.dev/tags/react-native"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/react-native/best-of"},{"@type":"ListItem","position":5,"name":"September 2023"}]}]} ```