0
0
React Nativemobile~10 mins

React Navigation installation in React Native - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepUITryChallengeBuildRecallPublish
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to install the core React Navigation package using npm.

React Native
npm install [1]
Drag options to blanks, or click blank then click option'
Anavigation-react
Breact-navigation
C@react-navigation/native
Dreact-native-navigation
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'react-navigation' which is the old package.
Installing unrelated packages like 'react-native-navigation'.
2fill in blank
medium

Complete the command to install dependencies required by React Navigation for React Native projects.

React Native
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context [1]
Drag options to blanks, or click blank then click option'
A@react-native-community/masked-view
Breact-native-vector-icons
Creact-native-maps
Dreact-native-paper
Attempts:
3 left
💡 Hint
Common Mistakes
Installing unrelated UI libraries like 'react-native-paper'.
Forgetting to install masked-view causes navigation issues.
3fill in blank
hard

Fix the error in the import statement to use the correct React Navigation hook.

React Native
import { [1] } from '@react-navigation/native';
Drag options to blanks, or click blank then click option'
AuseNavigation
BuseRoute
CuseNavigate
DuseRouter
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'useNavigate' which is from React Router, not React Navigation.
Using 'useRouter' which is unrelated.
4fill in blank
hard

Fill both blanks to complete the code that wraps the app with the Navigation container.

React Native
import { NavigationContainer } from '[1]';

export default function App() {
  return (
    <[2]>
      {/* Your app screens here */}
    </[2]>
  );
}
Drag options to blanks, or click blank then click option'
A@react-navigation/native
Breact-navigation
CNavigationContainer
DNavigationProvider
Attempts:
3 left
💡 Hint
Common Mistakes
Importing from 'react-navigation' which is outdated.
Using a wrong component name like 'NavigationProvider'.
5fill in blank
hard

Fill all three blanks to complete the code that installs and links React Navigation dependencies on iOS.

React Native
npx pod-install [1]
npx react-native [2] react-native-gesture-handler
npx react-native [3]
Drag options to blanks, or click blank then click option'
A--project-directory=ios
Blink
Crun-ios
Dstart
Attempts:
3 left
💡 Hint
Common Mistakes
Skipping pod install causes build errors on iOS.
Using 'start' instead of 'run-ios' to launch the app.