React Native Mobile is one of the core study topics in our Programming catalog. This page gathers the essentials: what the topic covers, the key concepts and
terminology, worked examples and exam-style questions — everything also available as 200 companion flashcards for spaced-repetition practice.
Main questions this page answers:
- What is the default flex direction in a React Native View container?
- How do you make a Text component take up the full available width of its parent?
- What is the purpose of the SafeAreaView component?
- Explain the difference between useState and useRef for storing mutable values.
- How does React Navigation's Stack.Navigator differ from Tab.Navigator?
- What does the useEffect cleanup function do and when does it run?
- How do you perform an HTTP GET request in React Native?
- What is Expo and why might developers choose it?
What is the default flex direction in a React Native View container?
The default flexDirection is 'column' in React Native, which differs from the web's default of 'row'. Children stack vertically from top to bottom unless you change flexDirection to 'row', 'row-reverse', or 'column-reverse'.
How do you debug a React Native app using Chrome DevTools?
Start the app, open the developer menu (shake device or Cmd+D/Ctrl+M in emulator), select 'Debug JS Remotely'. Chrome opens at localhost:8081/debugger-ui. You can inspect elements via React DevTools, set breakpoints, view console logs, and step through code.
What is the core component used to render text in React Native?
The core component is . All text strings must be wrapped inside a component because React Native does not render raw text nodes outside of it. You can nest components for styling spans.
What is the difference between StyleSheet.create and inline style objects?
StyleSheet.create validates and assigns numeric IDs to styles, sending them to native once for performance. Inline objects are recreated on every render and serialized each time. Use StyleSheet for any non-trivial style reused in the app.
What is the purpose of the `StyleSheet.create` method in React Native?
It creates and validates style objects at render time, returning a numeric ID for each style. It improves performance by passing styles directly to the native bridge instead of serializing
JavaScript objects on every render, and provides better error checking for typos in style property names.
What is the purpose of `withTiming` in Reanimated?
`withTiming(sharedValue, { duration: 500, easing: Easing.inOut(Easing.ease) })` smoothly animates a shared value from its current value to a target value over a specified duration using an easing curve. It returns the animation object which can be cancelled or chained.
How do you create a stack navigator in React Navigation v6?
Import createNativeStackNavigator from @react-navigation/native-stack, create a Stack variable with createNativeStackNavigator(), then render with children inside your NavigationContainer wrapper.
How do you implement offline-first data sync in React Native?
Use WatermelonDB or SQLite with an outbox pattern: write mutations locally first, queue sync operations, then push to server when connectivity returns via NetInfo. Resolve conflicts using timestamps or version vectors server-side.
What is the purpose of the StyleSheet.create method in React Native?
It creates a frozen style object from a
JavaScript object. This validates styles, prevents accidental mutation, and improves performance by allowing the styles to be sent across the native bridge only once and referenced by ID, rather than passing the entire style object on every render.
What is Expo Application Services (EAS) used for?
EAS is a suite of hosted services from Expo for building and submitting React Native apps. EAS Build compiles apps in the cloud for iOS and Android, EAS Submit uploads them to stores, and EAS Update delivers over-the-air
JavaScript updates without store review.