Best of React Native — September 2023
- 1
- 2
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.
- 3
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.
- 4
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.
- 5
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.
- 6
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.
- 7
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.
- 8
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.
- 9
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.
- 10
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.
- 11