React Native Assignment– 3

Navigation with React Navigation

Basic Questions

  1. Install @react-navigation/native along with dependencies (react-native-screens, react-native-safe-area-context, @react-navigation/stack, react-native-gesture-handler) and confirm setup by running the app.
  2. Wrap your application in a NavigationContainer and display a simple “Home” screen.
  3. Create a Stack Navigator with two screens: Home and Profile.
  4. Add a button on Home that navigates to Profile using navigation.navigate.
  5. Use navigation.push to push multiple instances of the Profile screen and verify the back stack.
  6. Customize the header title of Profile screen to show “User Profile”.
  7. Add a back button with a custom label on Profile screen.
  8. Create a Tab Navigator with three tabs: Home, Settings, and Notifications.
  9. Add icons to the tabs using react-native-vector-icons.
  10. Customize active and inactive tab styles (e.g., different colors).
  11. Set up a Drawer Navigator with two routes: Dashboard and Profile.
  12. Customize the drawer content to display a profile picture and username at the top.
  13. Handle gestures in the drawer navigation by enabling swipe-to-open.
  14. Pass a username parameter from Home screen to Profile screen using navigation.navigate.
  15. Retrieve the parameter inside Profile screen using route.params.
  16. Pass a function from one screen to another and call it on button press.
  17. Configure deep linking for your app and test with a custom URL scheme.
  18. Set up Android deep linking by editing AndroidManifest.xml.
  19. Configure iOS deep linking by adding a URL scheme in Xcode.
  20. Test navigation by opening your app directly to Profile screen via a deep link.

Intermediate Questions

  1. Create a button in an external app or browser link that opens your React Native app via deep linking.
  2. Add logic to redirect users to the correct screen if the app was opened via an external link.
  3. Combine a Stack Navigator and a Tab Navigator where Tabs are inside the Stack.
  4. Combine a Drawer Navigator with a Stack Navigator and handle navigation between them.
  5. Pass props between nested navigators and ensure state is updated correctly.
  6. Create a custom header for Profile screen with a search bar.
  7. Add a header button that triggers navigation to a new Settings screen.
  8. Change header styles dynamically based on screen state (e.g., dark mode).
  9. Implement custom transition animations between screens using screenOptions.
  10. Add a fade-in transition effect using CardStyleInterpolators.
  11. Build a bottom tab navigator where each tab itself has a stack of screens.
  12. Create a drawer navigator with nested tabs inside one drawer route.
  13. Add gesture handling to disable swipe navigation on certain screens.
  14. Use headerMode=”none” to hide headers and create a full-screen splash experience.
  15. Add a slide transition between two specific stack screens.
  16. Use deep linking with query params (e.g., /profile?id=123) and extract the ID.
  17. Open a modal screen using stack navigation with presentation: “modal”.
  18. Implement conditional navigation: redirect to Login if the user is not authenticated.
  19. Store navigation history in state and display a breadcrumb component.
  20. Create a reusable navigation wrapper component that includes custom headers and transitions.

Advanced Questions

  1. Implement a nested navigation setup combining Stack, Tab, and Drawer navigators together.
  2. Build a custom drawer component with user avatar, username, and logout button.
  3. Add role-based navigation: show/hide certain tabs based on user role (admin vs user).
  4. Configure deep linking for both Android and iOS with nested navigators.
  5. Handle external links (email/QR codes) that route directly to nested stack screens.
  6. Add animated custom transitions between screens using TransitionSpecs.
  7. Implement shared element transitions between two stack screens (e.g., image gallery to detail).
  8. Build a navigation guard that prevents navigating to Profile unless logged in.
  9. Dynamically update navigation options (title, buttons) based on API data.
  10. Final Hands-on Project:
    • Create an app with Stack + Tab + Drawer navigators combined
    • Pass data and functions between screens and nested navigators
    • Configure deep linking for Profile and Settings screens
    • Add custom headers with search bars and action buttons
    • Implement custom transition animations for modal and stack screens
    • Test external linking by opening the app directly to specific nested screens