Youtube Video

Summary published at 10/8/2024

🎥 If you are using Expo router in your React Native app, you may have encountered some problems. Here are 10 important tips to improve your experience:

📁 Tip 1: Use a stack within a modal. Define a new layout file in your modal to create a new stack, allowing navigation within the modal.

📊 Tip 2: Implement a tab bar. To show a details page without the tab bar, structure your application to have the tabs above the standalone page.

🔗 Tip 3: When using a link component with touchable elements, set the asChild prop to ensure click events are forwarded correctly.

🎨 Tip 4: Pass values back to the previous page using useRouter and setParams to update the state based on user actions.

🔄 Tip 5: Use useRouter for imperative routing. This is useful for handling click events that require navigation.

⚙️ Tip 6: Define screen options directly on the page component for specific actions like search bars or buttons in the header.

🔄 Tip 7: Use useFocusEffect to execute actions every time a page is focused, such as reloading data.

🔒 Tip 8: To prevent certain pages from appearing in the tab bar, define specific screen options in the layout file.

📱 Tip 9: Create platform-specific layout files (e.g., layout.android.tsx) for tailored experiences on different devices.

🔗 Tip 10: Handle deep links with a Native Intent file to manage incoming paths and provide custom navigation.

🚀 These tips aim to enhance your navigation experience with Expo router. For more resources, consider exploring additional courses and documentation.

Download our Chrome extension for Youtube summaries