React Native Mobile Practice Exam

Question 1 React Native Mobile

What is the difference between Expo Go and a development build?

The expo-location module provides APIs to read the current GPS position, watch position changes, request foreground/background permissions, and geocode addresses. Always request permissions before accessing coordinates. Pass a linking prop to NavigationContainer with prefixes: ['myapp://'], then config mapping screens to paths: { screens: { Home: '', Profile: 'user/:id' } }. React Navigation parses incoming URLs and dispatches matching routes. useState ignores the initial value argument on subsequent renders; only the value returned from the setter function or the original first-render argument is used. This means expensive initial computations should be wrapped in a lazy initializer function. Expo Go is a sandbox app that runs any Expo project with JS-only code via OTA. A development build is a custom native app you compile that includes your exact native dependencies and Expo modules, needed for libraries Expo Go doesn't support.

Question 2 React Native Mobile

What is the purpose of `react-native-gesture-handler`?

It provides a native-driven gesture system that recognizes taps, pans, swipes, pinches, and rotation directly on the UI thread, bypassing the JavaScript bridge. It is required by React Navigation for native stack transitions and enables smooth, responsive gesture interactions. AsyncStorage is an unencrypted, asynchronous key-value store similar to localStorage, suitable for non-sensitive data like user preferences. SecureStore (Expo) uses the iOS Keychain and Android Keystore to encrypt sensitive data like tokens and passwords. `Suspense` lets components wait for asynchronous resources (like lazy-loaded components or data) before rendering. It displays a fallback UI, typically a loading indicator, while children are suspended, and unmounts it once the children are ready to render. 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.

Question 3 React Native Mobile

What is the difference between padding and margin in React Native styles?

Call navigation.navigate('RouteName', { itemId: 86, otherParam: 'anything' }). The receiving screen accesses parameters via the route prop: const { itemId } = route.params; In TypeScript, declare the param list in the navigator's generic type. The Animated API creates smooth, declarative animations for opacity, position, scale, and other style values. Use Animated.timing for duration-based, Animated.spring for physics-based, and Animated.Value or Animated.ValueXY as drivers. It's being supplemented by Reanimated for better UI thread performance. Padding is the space inside the component's border between the border and content. Margin is the space outside the component, separating it from siblings. Both accept numbers (density-independent pixels) or strings with units. Use the Dimensions API with addEventListener('change') to react to size changes, or use onLayout on the root view. Lock orientation with expo-screen-orientation or Info.plist/android:screenOrientation for full control of supported orientations.

Question 4 React Native Mobile

What is the TouchableHighlight component and how does it differ from TouchableOpacity?

Use ErrorUtils.setGlobalHandler in the entry file to catch uncaught JavaScript errors. For native crashes, integrate services like Sentry, Bugsnag, or Firebase Crashlytics. Combine with React's componentDidCatch in error boundary components for render-time errors. Use the Dimensions API's addEventListener('change', handler) method. The handler receives an object containing window and screen dimensions. You can also use the react-native-orientation-locker or expo-screen-orientation libraries for more granular control. Modal is a core component that presents content above the enclosing view, blocking interaction with the rest of the app. Use the visible prop to control display, animationType for slide/fade transitions, and transparent for overlays. TouchableHighlight darkens the background of the view when pressed, providing visual feedback. TouchableOpacity reduces the opacity of the entire view on press. TouchableHighlight requires an underlayColor prop and cannot have a backgroundColor on the wrapped element.

Question 5 React Native Mobile

What is the purpose of the useFocusEffect hook in React Navigation?

onPress fires when the user taps and releases within a short duration (default ~130ms). onLongPress fires after the user holds the touch for delayLongPress milliseconds (default 500ms). Both can coexist on the same component. `Modal` renders its children as a native overlay above the current screen, useful for dialogs, alerts, sheets, and full-screen forms. The `transparent` prop makes the background see-through, and `animationType` controls fade/slide/slide transitions. Linking allows the app to interact with other apps and the system. Use Linking.openURL('https://...') to launch URLs in the browser, Linking.canOpenURL to check capabilities, and Linking.openSettings() to deep-link to the OS settings page for permission management. useFocusEffect runs a useEffect-like callback whenever a screen comes into focus or leaves focus. It accepts a callback that can return a cleanup function, useful for refreshing data or pausing subscriptions on screen transitions.

Question 6 React Native Mobile

What is the purpose of AppState in React Native?

AppState tells you whether the app is in 'active', 'background', or 'inactive' (iOS only) state. Subscribe with AppState.addEventListener('change', handler) to pause/resume animations, save data when backgrounded, or refresh content when foregrounded. It opens a URL in the appropriate native application, such as launching a web browser, opening the phone dialer with a `tel:` link, composing an email with a `mailto:` link, or navigating to another app via a custom URL scheme. Use expo-updates: run 'eas update:configure', then 'eas update --branch production --message "fix"' to publish. Configure updates URL and runtime version in app.json. Updates download on next app launch and apply automatically. By default screens stay mounted in the navigation stack, so state persists when navigating away and back. Use the useFocusEffect hook or unmountOnBlur/freezesOnBlur options to control when effects run and when components unmount.

Question 7 React Native Mobile

How do you add custom fonts to a React Native project?

EAS Build is a hosted cloud service that compiles your managed or bare React Native project into signed iOS IPA and Android AAB/APK files in the cloud, eliminating the need for local Xcode or Android Studio build setups. useContext accesses values from a React context without nesting Consumer components. Wrap the app in and read with const value = useContext(MyContext). It eliminates prop drilling for themes, auth state, or locale settings across the component tree. Place .ttf or .otf files in an assets/fonts directory. For bare React Native, update react-native.config.js with assets array and run npx react-native-asset. For Expo, use expo-font's useFonts hook or Font.loadAsync to load fonts from local assets. 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.

Question 8 React Native Mobile

What does `React.lazy` allow you to do in a React Native app?

StatusBar controls the app's status bar appearance: barStyle ('light-content' or 'dark-content'), backgroundColor (Android), hidden, and translucent. It's a component you can place anywhere; React Native maps props to the native status bar settings on each platform. It enables code-splitting by deferring the import of a component until it is first rendered. Combined with `Suspense`, it reduces the initial bundle size and improves startup time, especially useful for rarely visited screens in a React Navigation stack. Use the fetch API: fetch('https://api.example.com/data').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)). For more advanced features, use the axios library which supports interceptors and automatic JSON parsing. Run 'npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios' to generate the JS bundle. iOS also requires updating AppDelegate to load from bundle in release mode.

Question 9 React Native Mobile

What is a FlashList and why is it faster than FlatList?

Modal is a core component that presents content above the enclosing view, blocking interaction with the rest of the app. Use the visible prop to control display, animationType for slide/fade transitions, and transparent for overlays. Pass a function to style prop instead of an object: style={({pressed}) => [styles.base, pressed && styles.pressed]}. The function receives pressed, hovered (web), and focused states, enabling per-state visual feedback declaratively. FlashList (from @shopify/flash-list) recycles native views like RecyclerView/UICollectionView instead of unmounting off-screen items. It dramatically improves performance for large lists, with simpler props than FlatList and built-in recycling. SectionList renders a list of sectioned data, similar to FlatList but with grouped sections each having a header. You provide sections array (with data and title), renderItem for items, renderSectionHeader for headers, and keyExtractor for unique keys.

Question 10 React Native Mobile

What is the purpose of the useLayoutEffect hook?

Use expo-local-authentication's authenticateAsync() with BiometricSecurityLevel options, or react-native-biometrics' simplePrompt(). Wrap the call in a try/catch handling userCancel and authenticationError codes gracefully. useLayoutEffect fires synchronously after DOM mutations but before the browser paints, allowing you to read layout and re-render immediately. In React Native it's similar to useEffect but blocks paint; use it sparingly for measuring views. Pass a linking prop to NavigationContainer with prefixes: ['myapp://'], then config mapping screens to paths: { screens: { Home: '', Profile: 'user/:id' } }. React Navigation parses incoming URLs and dispatches matching routes. It applies 2D or 3D transformations to a component, such as `translateX`, `translateY`, `scale`, `rotate`, and `perspective`. Transformations are applied after layout, so they do not affect the surrounding layout of sibling components.

Question 11 React Native Mobile

How do you run a React Native app on an iOS simulator using the CLI?

SectionList renders a list of sectioned data, similar to FlatList but with grouped sections each having a header. You provide sections array (with data and title), renderItem for items, renderSectionHeader for headers, and keyExtractor for unique keys. Declare a RootStackParamList type mapping route names to their param shapes, then use createNativeStackNavigator(). Access params via route.params with proper typing, ensuring type safety across navigation calls. useMemo memoizes a computed value, recomputing only when dependencies change: const result = useMemo(() => compute(a, b), [a, b]). useCallback memoizes a function itself: const fn = useCallback(() => doSomething(a), [a]). useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). With a Mac and Xcode installed, run 'npx react-native run-ios' from the project root. Optionally pass --simulator='iPhone 15' to target a specific device. Metro bundler must be running, started via 'npx react-native start'.

Question 12 React Native Mobile

How do you configure environment variables in a React Native app?

Use the Performance Monitor in development to watch memory usage. Profile with Android Studio's Memory Profiler or Xcode Instruments for native leaks. The react-native-flipper or react-query-devtools help track component subscriptions. Watch for unmounted subscriptions and uncleared timers. Install the Expo Go app from the App Store, run `npx expo start` in your project, and scan the QR code shown in the terminal with the iPhone's camera. The app will load the JavaScript bundle from your development machine over the local network. On Android, it unmounts off-screen `ListItemComponent` instances from the native view hierarchy to save memory. On iOS the implementation is a no-op. It can cause rendering glitches with some custom layouts, so use it with caution. Use react-native-config with a .env file and library setup. Access via Config.API_URL. For Expo, use expo-constants with extra config in app.json, or process.env variables injected at build time via EAS Build secrets for production deployments.

Question 13 React Native Mobile

What is the difference between useState and useReducer?

Use the TextInput component with its value prop bound to component state and onChangeText handler updating that state: const [text, setText] = useState(''); . The component fully controls the input value. Declare a RootStackParamList type mapping route names to their param shapes, then use createNativeStackNavigator(). Access params via route.params with proper typing, ensuring type safety across navigation calls. EAS Build is a hosted cloud service that compiles your managed or bare React Native project into signed iOS IPA and Android AAB/APK files in the cloud, eliminating the need for local Xcode or Android Studio build setups. useState manages simple, independent state values with direct updates. useReducer is preferable for complex state with multiple sub-values or when next state depends on previous state. useReducer uses a reducer function pattern similar to Redux, centralizing update logic.

Question 14 React Native Mobile

How do you access the device camera in a React Native app?

Create a style object that includes conditional properties: style={[styles.button, isActive && styles.activeButton]}. You can also build the style dynamically inside the component: const dynamicStyle = {backgroundColor: enabled ? 'blue' : 'gray'}. Set the refreshing state with useState, define an onRefresh async handler that fetches data and updates state, and pass both to FlatList: . Optionally set colors or tintColor for the spinner. Use expo-image-picker (in Expo) or react-native-image-picker. Request permissions with PermissionsAndroid on Android or via the library's built-in request method on iOS, then call launchCameraAsync or launchCamera to capture images or videos. It determines whether a view can be the target of touch events. Possible values are `'auto'` (default), `'none'` (view and children are invisible to touches), `'box-none'` (view itself is invisible but children are), and `'box-only'` (view captures touches but children don't).

Question 15 React Native Mobile

What is the purpose of the `useFocusEffect` hook from React Navigation?

It runs an effect when a screen comes into focus and runs its cleanup when the screen loses focus or unmounts. It mirrors `useEffect` but is tied to the screen's focus lifecycle rather than the component's mount lifecycle, which is essential for side effects tied to screen visibility. Metro is the JavaScript bundler for React Native. It transforms JSX, TypeScript, and modern JavaScript into a bundle that the native runtime can execute. It supports hot module replacement for fast refresh during development and tree-shaking in production builds. Install react-native-vector-icons, link fonts in Info.plist (iOS) and android/app/build.gradle (Android), then import: import Icon from 'react-native-vector-icons/MaterialIcons'; . Expo projects use @expo/vector-icons built in with the Expo SDK. Use expo-updates: run 'eas update:configure', then 'eas update --branch production --message "fix"' to publish. Configure updates URL and runtime version in app.json. Updates download on next app launch and apply automatically.

Question 16 React Native Mobile

What is the difference between useEffect and useLayoutEffect timing?

EAS Build is Expo's cloud build service that compiles your app on Expo servers for iOS and Android, handling signing credentials automatically. Local builds require Xcode/Android Studio and manual signing setup but don't need network uploads. Use react-native-safe-area-context library: wrap app in SafeAreaProvider, then use useSafeAreaInsets() hook or component. This handles notches, home indicators, and dynamic insets on orientation change. useEffect runs asynchronously after paint, allowing browser/native to potentially flicker. useLayoutEffect runs synchronously after DOM/view mutations but before paint, ideal for measuring layout, setting scroll position, or preventing visual flicker. useContext accesses values from a React context without nesting Consumer components. Wrap the app in and read with const value = useContext(MyContext). It eliminates prop drilling for themes, auth state, or locale settings across the component tree.

Question 17 React Native Mobile

How do you type a React Navigation route in TypeScript with params?

It is a callback fired when the user attempts to dismiss the modal, typically by tapping the hardware back button on Android or doing the iOS edge-swipe gesture when `onOrientationChange` or hardware back triggers it. It must be set or the app may crash on back press. Create a type combining RootStackParamList, then use createNativeStackNavigator(). Declare each screen as a key with its params, e.g. { Profile: { id: string } }, and use RouteProp to read them safely in components. By default screens stay mounted in the navigation stack, so state persists when navigating away and back. Use the useFocusEffect hook or unmountOnBlur/freezesOnBlur options to control when effects run and when components unmount. Place .ttf or .otf files in an assets/fonts directory. For bare React Native, update react-native.config.js with assets array and run npx react-native-asset. For Expo, use expo-font's useFonts hook or Font.loadAsync to load fonts from local assets.

Question 18 React Native Mobile

How do you implement pull-to-refresh in a FlatList?

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. Set the refreshing state with useState, define an onRefresh async handler that fetches data and updates state, and pass both to FlatList: . Optionally set colors or tintColor for the spinner. Combine onEndReached, onEndReachedThreshold (fraction of list length, e.g., 0.5), and a loading state. When the user nears the end, call onEndReached to fetch more data and append it to the existing data array, showing a spinner via ListFooterComponent. It returns the device pixel density multiplier (e.g., 2 on standard retina, 3 on iPhone Plus). Use it to scale dimensions: `const size = 16 * PixelRatio.getFontScale()` keeps text consistent across devices, and to pick appropriate image resolutions.

Question 19 React Native Mobile

What is the purpose of the AppState module in React Native?

useLayoutEffect fires synchronously after DOM mutations but before the browser paints, allowing you to read layout and re-render immediately. In React Native it's similar to useEffect but blocks paint; use it sparingly for measuring views. is a non-scrollable container that lays out its children. is a scrollable container that allows content larger than the screen to be scrolled vertically or horizontally. Use FlatList for long lists instead of ScrollView for performance. Use the Performance Monitor in development to watch memory usage. Profile with Android Studio's Memory Profiler or Xcode Instruments for native leaks. The react-native-flipper or react-query-devtools help track component subscriptions. Watch for unmounted subscriptions and uncleared timers. AppState reports the application state: 'active', 'background', 'inactive' (iOS only, during transitions), or 'unknown'. Use addEventListener('change', handler) to pause timers, save state, or refresh data when the app returns to foreground.

Question 20 React Native Mobile

What is EAS Build and how does it differ from local builds?

The cleanup function returned from useEffect runs before the component unmounts and before the effect re-runs (if dependencies change). It's used to unsubscribe from listeners, cancel timers, or abort network requests to prevent memory leaks. StyleSheet.hairlineWidth returns the thinnest width the device can display (typically 0.5 on Retina, 1 on standard). It prevents borders from looking too thick on high-density screens, ensuring a consistent visual line weight across devices. Call navigation.navigate('RouteName', { itemId: 86, otherParam: 'anything' }). The receiving screen accesses parameters via the route prop: const { itemId } = route.params; In TypeScript, declare the param list in the navigator's generic type. EAS Build is Expo's cloud build service that compiles your app on Expo servers for iOS and Android, handling signing credentials automatically. Local builds require Xcode/Android Studio and manual signing setup but don't need network uploads.

Question 21 React Native Mobile

What does the `useNavigation` hook return in React Navigation?

Run 'npm install -g expo-cli' for the classic CLI or 'npm install -g eas-cli' for the modern Expo Application Services CLI used for builds and submissions. Node 18+ is recommended. It returns the navigation prop object for the current screen, allowing you to call methods like `navigate('ScreenName', params)`, `goBack()`, `setOptions()`, `addListener`, and `dispatch` without explicitly passing navigation down through props. It provides a textual label for screen readers, used by assistive technologies like VoiceOver on iOS and TalkBack on Android. When the element receives accessibility focus, the label is read aloud, improving usability for visually impaired users. Use react-native-safe-area-context library: wrap app in SafeAreaProvider, then use useSafeAreaInsets() hook or component. This handles notches, home indicators, and dynamic insets on orientation change.

Question 22 React Native Mobile

How do you make a Text component take up the full available width of its parent?

Platform.OS returns 'ios' or 'android', letting you write platform-specific code. Use Platform.select({ios: {...}, android: {...}}) for styles or conditionally import components. You can also use Platform.Version to check OS version numbers for compatibility. Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining space along the main axis. ScrollView renders all child components at once, making it suitable for small lists or scrolling content. FlatList virtualizes its children, only rendering items currently visible on screen, which makes it far more performant for long lists of data. Use the useColorScheme hook (added in RN 0.65) which returns 'light', 'dark', or null. Define theme objects with color palettes and apply them conditionally: const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme. Persist user override via AsyncStorage.

Question 23 React Native Mobile

How do you perform an HTTP GET request in React Native?

Use the fetch API: fetch('https://api.example.com/data').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)). For more advanced features, use the axios library which supports interceptors and automatic JSON parsing. Use expo-image-picker (in Expo) or react-native-image-picker. Request permissions with PermissionsAndroid on Android or via the library's built-in request method on iOS, then call launchCameraAsync or launchCamera to capture images or videos. Animated.Value holds a single numeric value for animations like opacity or translation along one axis. Animated.ValueXY holds two values (x and y), commonly used for pan gestures or 2D transforms like scaling. Both can be animated with timing, spring, or decay. React Native follows the CSS spec where `flexShrink` defaults to `1`, but unlike the web it does not default to `0` like some older versions did. However, the RN team has historically used `0` in some releases, so behavior can vary by RN version.

Question 24 React Native Mobile

What is the role of the new architecture (Fabric/TurboModules) in React Native?

Run 'npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios' to generate the JS bundle. iOS also requires updating AppDelegate to load from bundle in release mode. Pass a function to style prop instead of an object: style={({pressed}) => [styles.base, pressed && styles.pressed]}. The function receives pressed, hovered (web), and focused states, enabling per-state visual feedback declaratively. Fabric is the new rendering system using synchronous JSI calls for layout and shadow tree updates. TurboModules enable lazy-loaded native modules with type-safe JSI specs. Together they improve startup time, memory use, and concurrent rendering. useMemo memoizes a computed value, recomputing only when dependencies change: const result = useMemo(() => compute(a, b), [a, b]). useCallback memoizes a function itself: const fn = useCallback(() => doSomething(a), [a]). useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Question 25 React Native Mobile

What is the core component used to render text in React Native?

Use Dimensions.get('window') or the useWindowDimensions hook to read screen size, then conditionally render layouts or apply percentage-based styles. Combine flexbox with flex: 1 properties, and consider using a library like react-native-responsive-screen for scaling utilities. `ToastAndroid.show(message, duration)` displays a short notification on Android using the OS-native toast widget. It is Android-only because iOS lacks a public toast API; Expo's `expo-haptics` or a custom `Modal` are common cross-platform alternatives for iOS feedback. useFocusEffect runs a useEffect-like callback whenever a screen comes into focus or leaves focus. It accepts a callback that can return a cleanup function, useful for refreshing data or pausing subscriptions on screen transitions. 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.

Question 26 React Native Mobile

What is a reanimated worklet and where does it execute?

It provides a native-driven gesture system that recognizes taps, pans, swipes, pinches, and rotation directly on the UI thread, bypassing the JavaScript bridge. It is required by React Navigation for native stack transitions and enables smooth, responsive gesture interactions. A worklet is a JavaScript function annotated with the `'worklet'` directive that gets serialized and executed on the UI thread instead of the JavaScript thread. This enables 60fps animations and gesture handling without bridge round-trips, which is essential for smooth performance. Use Dimensions.get('window') or the useWindowDimensions hook to read screen size, then conditionally render layouts or apply percentage-based styles. Combine flexbox with flex: 1 properties, and consider using a library like react-native-responsive-screen for scaling utilities. Fast Refresh is a developer experience feature that hot-reloads edited components while preserving component state. Enabled by default in modern React Native; it falls back to a full reload when a file outside the component tree changes or edits break state.

Question 27 React Native Mobile

How do you style components conditionally based on state in React Native?

Create a style object that includes conditional properties: style={[styles.button, isActive && styles.activeButton]}. You can also build the style dynamically inside the component: const dynamicStyle = {backgroundColor: enabled ? 'blue' : 'gray'}. Use react-native-config with a .env file and library setup. Access via Config.API_URL. For Expo, use expo-constants with extra config in app.json, or process.env variables injected at build time via EAS Build secrets for production deployments. `expo-image` is a high-performance image component with built-in memory and disk caching, placeholder/blurhash support, and progressive loading. It uses SDWebImage on iOS and Coil on Android, outperforming the default `Image` for lists and large assets. Import the component and use react-test-renderer or @testing-library/react-native. Example: test('renders correctly', () => { const tree = render().toJSON(); expect(tree).toMatchSnapshot(); }). Mock native modules in jest.setup.js.

Question 28 React Native Mobile

What is the difference between React Native CLI and Expo CLI?

Metro, the default JavaScript bundler for React Native, runs on port 8081 by default. The native app connects to this port in development mode to download the JavaScript bundle from your local machine. Use the BackHandler API with BackHandler.addEventListener('hardwareBackPress', callback). The callback returns true to prevent default behavior. In React Navigation, screen options like headerBackTitle, gestureEnabled, and the useFocusEffect hook manage back behavior. React Native CLI gives full native control but requires Xcode/Android Studio setup and native dependency management. Expo CLI offers managed workflow with easier setup and OTA updates, historically limiting native modules (now mitigated by Expo Dev Clients and prebuild). It exposes app constants such as `expoConfig`, `appOwnership` (expo/standalone/bare), `platform`, `deviceName`, and environment-specific values. This is useful for conditionally running code based on whether the app is in Expo Go, a dev build, or a production build.

Question 29 React Native Mobile

How do you write a simple unit test for a React Native component using Jest?

LayoutAnimation automatically animates the next layout change on all views in the next render cycle. Configure with LayoutAnimation.configureNext({duration: 250, update: {type: 'easeInEaseOut'}}) before calling setState to animate transitions. Import the component and use react-test-renderer or @testing-library/react-native. Example: test('renders correctly', () => { const tree = render().toJSON(); expect(tree).toMatchSnapshot(); }). Mock native modules in jest.setup.js. LogBox is the in-app warning/error console that surfaces during development. Disable warnings globally with LogBox.ignoreAllLogs() (not recommended), or specifically with LogBox.ignoreLogs(['Warning: ...']) to suppress noisy third-party warnings. `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.

Question 30 React Native Mobile

What is the purpose of the StyleSheet.create method in React Native?

The expo-location module provides APIs to read the current GPS position, watch position changes, request foreground/background permissions, and geocode addresses. Always request permissions before accessing coordinates. Platform.OS returns 'ios' or 'android', letting you write platform-specific code. Use Platform.select({ios: {...}, android: {...}}) for styles or conditionally import components. You can also use Platform.Version to check OS version numbers for compatibility. Managed workflow uses Expo Go and config plugins, with no native code access. Bare workflow generates ios/android directories for custom native modules. Prebuild command can convert between them, with EAS Build supporting both. 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.

Question 31 React Native Mobile

What does the `KeyboardAvoidingView` component do and on which platform is it most needed?

Store keys in environment variables via process.env.API_KEY, set in .env files at build time. For runtime, use a secure backend proxy that holds secrets server-side. Never hardcode keys in JavaScript bundles—APK/IPA extraction is trivial. Use react-native-config or expo-constants for build-time injection. It adjusts its height, position, or bottom padding to keep the focused input visible when the on-screen keyboard appears. It is most needed on iOS, because iOS pushes the layout up while Android typically handles window resize automatically. It is a function that accepts an item and its index and returns a unique string or number key for that item. It is used by React's reconciliation to identify list items across re-renders, improving performance and preserving component state when the list changes. It provides a textual label for screen readers, used by assistive technologies like VoiceOver on iOS and TalkBack on Android. When the element receives accessibility focus, the label is read aloud, improving usability for visually impaired users.

Question 32 React Native Mobile

Which Expo module provides access to the device's GPS location?

The expo-location module provides APIs to read the current GPS position, watch position changes, request foreground/background permissions, and geocode addresses. Always request permissions before accessing coordinates. PixelRatio provides access to the device's pixel density, useful for sizing images and detecting high-resolution screens. Use PixelRatio.get() to read density, and PixelRatio.getFontScale() to respect the user's preferred text size setting for accessibility. Run 'npm install -g expo-cli' for the classic CLI or 'npm install -g eas-cli' for the modern Expo Application Services CLI used for builds and submissions. Node 18+ is recommended. All JS/TS code in the root project is shared automatically. Use Platform.select, Platform.OS, or .ios/.android file extensions (Button.ios.js, Button.android.js) to conditionally include platform-specific code. Native modules may need separate implementations.

Question 33 React Native Mobile

How do you configure OTA (Over-The-Air) updates with Expo?

The cleanup function returned from useEffect runs before the component unmounts and before the effect re-runs (if dependencies change). It's used to unsubscribe from listeners, cancel timers, or abort network requests to prevent memory leaks. Drawer Navigator presents screens via a side menu that slides in, typically triggered by a hamburger icon or edge swipe. Tab Navigator shows screens as a persistent bottom (or top) bar of icons. Drawer suits many destinations; tabs suit 3-5 top-level destinations. It enables code-splitting by deferring the import of a component until it is first rendered. Combined with `Suspense`, it reduces the initial bundle size and improves startup time, especially useful for rarely visited screens in a React Navigation stack. Use expo-updates: run 'eas update:configure', then 'eas update --branch production --message "fix"' to publish. Configure updates URL and runtime version in app.json. Updates download on next app launch and apply automatically.

Question 34 React Native Mobile

How do you navigate programmatically between screens?

View is a non-scrolling layout container. ScrollView wraps content in a scrollable region, automatically handling vertical or horizontal scrolling when children exceed the container size. ScrollView renders all children at once, unlike FlatList. Unlike the web where it defaults to `'row'`, React Native defaults `flexDirection` to `'column'`. This means children stack vertically by default and you must explicitly set `flexDirection: 'row'` to lay them out horizontally. Use the navigation prop's methods: navigation.navigate('ScreenName'), navigation.push('ScreenName'), navigation.goBack(), navigation.replace('ScreenName'), or navigation.reset() to reset the stack state. These are accessed in components via useNavigation hook or props. Run 'npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios' to generate the JS bundle. iOS also requires updating AppDelegate to load from bundle in release mode.

Question 35 React Native Mobile

How do you add a vector icon to a React Native project?

Install react-native-vector-icons, link fonts in Info.plist (iOS) and android/app/build.gradle (Android), then import: import Icon from 'react-native-vector-icons/MaterialIcons'; . Expo projects use @expo/vector-icons built in with the Expo SDK. `Alert.alert` uses the native platform alert dialog, requires minimal code, and blocks UI flow until dismissed. A custom `Modal` is rendered with React components, is fully styleable, can contain complex layouts, and supports animations and custom buttons. It exposes app constants such as `expoConfig`, `appOwnership` (expo/standalone/bare), `platform`, `deviceName`, and environment-specific values. This is useful for conditionally running code based on whether the app is in Expo Go, a dev build, or a production build. Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining space along the main axis.

Question 36 React Native Mobile

How do you add a splash screen to an Expo project?

Run cd android && ./gradlew assembleRelease. The unsigned APK appears in android/app/build/outputs/apk/release/. For a signed AAB, configure signingConfigs in android/app/build.gradle and run ./gradlew bundleRelease, outputting to build/outputs/bundle/release. AppState tells you whether the app is in the foreground, background, or inactive. Use AppState.addEventListener('change', handler) to detect transitions. This is useful for pausing video playback, stopping location tracking, or managing push notification badges when the app backgrounds. Import the component and use react-test-renderer or @testing-library/react-native. Example: test('renders correctly', () => { const tree = render().toJSON(); expect(tree).toMatchSnapshot(); }). Mock native modules in jest.setup.js. Install expo-splash-screen, call SplashScreen.preventAutoHideAsync() in App.js, then SplashScreen.hideAsync() once resources load. Customize background color, image, and resizeMode via app.json's splash plugin configuration.

Question 37 React Native Mobile

What is the default behavior of the keyboardShouldPersistTaps prop on a ScrollView?

`View` is a non-scrolling container that lays out children using flexbox. `ScrollView` is a scrolling container that allows content larger than the screen to be viewed by swiping, at the cost of rendering all children up front instead of virtualizing them like `FlatList`. The prop controls whether the keyboard stays visible after a tap. Default 'never' dismisses the keyboard on any tap; 'handled' keeps it visible if the tap is on a non-handler; 'always' never dismisses it, useful for forms with multiple inputs. It is a library that lets you build a custom development binary that includes your project's native code. Unlike Expo Go, which is a sandbox limited to Expo SDK modules, a dev client can include third-party native libraries and your own native modules. Use the Dimensions API's addEventListener('change', handler) method. The handler receives an object containing window and screen dimensions. You can also use the react-native-orientation-locker or expo-screen-orientation libraries for more granular control.

Question 38 React Native Mobile

How do you detect network connectivity changes in React Native?

Use expo-local-authentication's authenticateAsync() with BiometricSecurityLevel options, or react-native-biometrics' simplePrompt(). Wrap the call in a try/catch handling userCancel and authenticationError codes gracefully. EAS Build is a hosted cloud service that compiles your managed or bare React Native project into signed iOS IPA and Android AAB/APK files in the cloud, eliminating the need for local Xcode or Android Studio build setups. Use @react-native-community/netinfo library. Import NetInfo and call NetInfo.addEventListener(state => { console.log('Is connected?', state.isConnected); }). It provides real-time updates and access to connection type (wifi, cellular, none). AppState tells you whether the app is in the foreground, background, or inactive. Use AppState.addEventListener('change', handler) to detect transitions. This is useful for pausing video playback, stopping location tracking, or managing push notification badges when the app backgrounds.

Question 39 React Native Mobile

What is the Pressable component's hitRect prop used for?

Install the package, link fonts: iOS adds UIAppFonts entries in Info.plist with font file names; Android copies .ttf files to android/app/src/main/assets/fonts. Then import Icon from 'react-native-vector-icons/MaterialIcons' to render . Add accessibilityLabel='Descriptive name' for screen readers, accessibilityHint='What activating does' for action context, and accessibilityRole='button' to communicate element type. Group related elements with accessibilityElementsHidden for cleaner navigation. hitRect extends or reduces the touchable area of a Pressable beyond its visual bounds. It takes an object with top, bottom, left, right numeric values, allowing you to make small UI elements easier to tap without enlarging their visual footprint. Use XMLHttpRequest or the fetch API with a Blob. For progress, use the onUploadProgress callback in axios. Alternatively, libraries like react-native-background-upload or Expo's FileSystem.uploadAsync handle uploads with progress events, supporting background continuation.

Question 40 React Native Mobile

Explain the difference between useState and useRef for storing mutable values.

useState triggers a re-render when updated and is meant for state that affects the UI. useRef returns a mutable object (.current) that persists across renders without causing re-renders, ideal for storing references like timer IDs or previous values. The prop controls whether the keyboard stays visible after a tap. Default 'never' dismisses the keyboard on any tap; 'handled' keeps it visible if the tap is on a non-handler; 'always' never dismisses it, useful for forms with multiple inputs. The cleanup function returned from useEffect runs before the component unmounts and before the effect re-runs (if dependencies change). It's used to unsubscribe from listeners, cancel timers, or abort network requests to prevent memory leaks. Animated.Value holds a single numeric value for animations like opacity or translation along one axis. Animated.ValueXY holds two values (x and y), commonly used for pan gestures or 2D transforms like scaling. Both can be animated with timing, spring, or decay.

Question 41 React Native Mobile

How do you navigate to a screen with parameters in React Navigation?

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'. Hot Reloading was the legacy mechanism that injected updated modules while preserving state but had bugs with hooks. Fast Refresh is the modern replacement that reliably preserves component state across edits, supports function components and hooks, and falls back to full reload when state preservation is impossible. Call navigation.navigate('RouteName', { itemId: 86, otherParam: 'anything' }). The receiving screen accesses parameters via the route prop: const { itemId } = route.params; In TypeScript, declare the param list in the navigator's generic type. Import { Alert } from 'react-native' and call Alert.alert(title, message, [{text:'OK', onPress: ...}]). On iOS it uses the native UIAlertController; on Android it uses the native AlertDialog via a single button on Android.

Question 42 React Native Mobile

How do you enable Hermes in a React Native CLI project?

`ToastAndroid.show(message, duration)` displays a short notification on Android using the OS-native toast widget. It is Android-only because iOS lacks a public toast API; Expo's `expo-haptics` or a custom `Modal` are common cross-platform alternatives for iOS feedback. Use expo-local-authentication's authenticateAsync() with BiometricSecurityLevel options, or react-native-biometrics' simplePrompt(). Wrap the call in a try/catch handling userCancel and authenticationError codes gracefully. GestureHandlerRootView is a wrapper component from react-native-gesture-handler that initializes the native gesture system. Without it, gestures like pan, pinch, and swipe won't work reliably, especially when composed with the native scroll system. Edit android/app/gradle.properties and set hermesEnabled=true. In ios/Podfile, set :hermes_enabled => true. Then run pod install for iOS and rebuild. Hermes is enabled by default in newer React Native versions.

Question 43 React Native Mobile

How do you create a controlled text input in React Native?

Pass a linking prop to NavigationContainer with prefixes: ['myapp://'], then config mapping screens to paths: { screens: { Home: '', Profile: 'user/:id' } }. React Navigation parses incoming URLs and dispatches matching routes. Use the TextInput component with its value prop bound to component state and onChangeText handler updating that state: const [text, setText] = useState(''); . The component fully controls the input value. AppState tells you whether the app is in 'active', 'background', or 'inactive' (iOS only) state. Subscribe with AppState.addEventListener('change', handler) to pause/resume animations, save data when backgrounded, or refresh content when foregrounded. Store keys in environment variables via process.env.API_KEY, set in .env files at build time. For runtime, use a secure backend proxy that holds secrets server-side. Never hardcode keys in JavaScript bundles—APK/IPA extraction is trivial. Use react-native-config or expo-constants for build-time injection.

Question 44 React Native Mobile

What is `expo-dev-client` and why would you add it?

Install @testing-library/react-native, render components with render(), query with getByText/getByTestId, fire user events with fireEvent.press(), and assert behavior. Mock native modules via jest.mock('module-name'). Linking provides interaction with both incoming and outgoing app links. Use Linking.openURL to launch external URLs and Linking.canOpenURL to verify scheme support. Handle deep links via Linking.addEventListener('url', handler) at app root. Hot Reloading was the legacy mechanism that injected updated modules while preserving state but had bugs with hooks. Fast Refresh is the modern replacement that reliably preserves component state across edits, supports function components and hooks, and falls back to full reload when state preservation is impossible. It is a library that lets you build a custom development binary that includes your project's native code. Unlike Expo Go, which is a sandbox limited to Expo SDK modules, a dev client can include third-party native libraries and your own native modules.

Question 45 React Native Mobile

How do you implement a dark mode theme in a React Native app?

Use expo-secure-store (or react-native-keychain on bare RN). It stores values in iOS Keychain and Android Keystore with hardware-backed encryption. Avoid AsyncStorage for sensitive data because it is unencrypted and world-readable on rooted devices. GestureHandlerRootView is a wrapper component from react-native-gesture-handler that initializes the native gesture system. Without it, gestures like pan, pinch, and swipe won't work reliably, especially when composed with the native scroll system. Use React Context to provide a theme object, or use libraries like react-native-paper. Apply useColorScheme() from React to detect system preference, then conditionally select light or dark style objects for components. useLayoutEffect fires synchronously after DOM mutations but before the browser paints, allowing you to read layout and re-render immediately. In React Native it's similar to useEffect but blocks paint; use it sparingly for measuring views.

Question 46 React Native Mobile

What is the default port for the Metro bundler in React Native?

Metro, the default JavaScript bundler for React Native, runs on port 8081 by default. The native app connects to this port in development mode to download the JavaScript bundle from your local machine. It exposes app constants such as `expoConfig`, `appOwnership` (expo/standalone/bare), `platform`, `deviceName`, and environment-specific values. This is useful for conditionally running code based on whether the app is in Expo Go, a dev build, or a production build. useReducer manages complex local state with multiple sub-values or when the next state depends on the previous one. It accepts (state, action) => newState and returns the current state plus a dispatch function, similar to Redux's pattern. Edit android/app/gradle.properties and set hermesEnabled=true. In ios/Podfile, set :hermes_enabled => true. Then run pod install for iOS and rebuild. Hermes is enabled by default in newer React Native versions.

Question 47 React Native Mobile

How do you handle taps outside a TextInput to dismiss the keyboard?

Use expo-local-authentication's authenticateAsync() with BiometricSecurityLevel options, or react-native-biometrics' simplePrompt(). Wrap the call in a try/catch handling userCancel and authenticationError codes gracefully. onPress fires when the user taps and releases within a short duration (default ~130ms). onLongPress fires after the user holds the touch for delayLongPress milliseconds (default 500ms). Both can coexist on the same component. Wrap the screen in a Pressable/TouchableWithoutFeedback with onPress={() => Keyboard.dismiss()}. Alternatively use the Keyboard.dismiss() imperative call in a button's onPress, or set returnKeyType and onSubmitEditing to dismiss on return. Use the react-native-gesture-handler library which provides GestureDetector and gesture composers like Pan(), Pinch(), Tap(), and LongPress(). Combine with react-native-reanimated for smooth, worklet-based animations on the UI thread.

Question 48 React Native Mobile

What does the useEffect cleanup function do and when does it run?

Call navigation.navigate('RouteName', { itemId: 86, otherParam: 'anything' }). The receiving screen accesses parameters via the route prop: const { itemId } = route.params; In TypeScript, declare the param list in the navigator's generic type. It exposes app constants such as `expoConfig`, `appOwnership` (expo/standalone/bare), `platform`, `deviceName`, and environment-specific values. This is useful for conditionally running code based on whether the app is in Expo Go, a dev build, or a production build. The cleanup function returned from useEffect runs before the component unmounts and before the effect re-runs (if dependencies change). It's used to unsubscribe from listeners, cancel timers, or abort network requests to prevent memory leaks. Use the TextInput component with its value prop bound to component state and onChangeText handler updating that state: const [text, setText] = useState(''); . The component fully controls the input value.

Question 49 React Native Mobile

What does `Linking.openURL` do in React Native?

Hermes is a JavaScript engine optimized for React Native, enabling faster app startup, reduced memory usage, and smaller app size. It precompiles JavaScript to bytecode and is enabled by default in modern React Native projects. Use the useFocusEffect hook with a useCallback that calls React.useEffect internally. This runs the effect every time the screen comes into focus, ensuring imperative actions like fetching data or starting animations run when needed. It opens a URL in the appropriate native application, such as launching a web browser, opening the phone dialer with a `tel:` link, composing an email with a `mailto:` link, or navigating to another app via a custom URL scheme. Use the useColorScheme hook (added in RN 0.65) which returns 'light', 'dark', or null. Define theme objects with color palettes and apply them conditionally: const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme. Persist user override via AsyncStorage.

Question 50 React Native Mobile

What is the purpose of Reanimated's runOnJS worklet helper?

Use expo-updates: run 'eas update:configure', then 'eas update --branch production --message "fix"' to publish. Configure updates URL and runtime version in app.json. Updates download on next app launch and apply automatically. `onPress` fires when the user releases the press within the `pressRetentionOffset` and `pressDuration` thresholds. `onLongPress` fires after the user holds the press for at least `delayLongPress` milliseconds (default 500ms) without releasing. Enable USB debugging in Developer Options, connect via USB, then run 'npx react-native run-android'. For wireless debugging, use 'adb tcpip 5555' and 'adb connect :5555'. Expo users can scan a QR code from Expo Go. runOnJS schedules a regular JavaScript function to run on the main JS thread from within a worklet running on the UI thread. Use it for updating React state or calling non-worklet APIs after completing a native-driven animation or gesture.