1. What are the advantages of using React Native?

Answer:

• Cross-platform development (iOS & Android).

• Fast development with Hot Reloading.

• Native performance using bridges.

• Large community and ecosystem.

2. How does React Native work under the hood?

Answer:
React Native uses a bridge to communicate between JavaScript and native code. UI components are rendered using native APIs, making the app feel like a native application.

3. How is React Native different from Flutter?

Answer:

FeatureReact NativeFlutter

LanguageJavaScript/TypeScriptDart

PerformanceBridge-based (slower)Direct native rendering (faster)

UI ComponentsUses Native ComponentsCustom UI Engine (Skia)

Learning CurveEasier (JavaScript)Harder (Dart)

4. How do you optimize performance in React Native?

Answer:

• Use FlatList for large lists.

• Avoid unnecessary re-renders using React.memo or useCallback().

• Use useNativeDriver for animations.

• Optimize state management using Redux or Recoil.

5. What is the difference between useEffect and useLayoutEffect?

Answer:

• useEffect runs after rendering.

• useLayoutEffect runs before the UI update (useful for animations).

useEffect(() => console.log('useEffect')); useLayoutEffect(() => console.log('useLayoutEffect'));

6. How do you persist user data in React Native?

Answer:

• AsyncStorage (key-value storage).

• MMKV (faster alternative).

• SQLite (for structured data).

• Redux-Persist (for persisting state).

await AsyncStorage.setItem('user', JSON.stringify({ name: 'John' }));

7. How do you implement deep linking in React Native?

Answer:
Use react-navigation with deep linking support.

const linking = { prefixes: ['myapp://'], config: { screens: { Home: 'home' } } };

8. How do you handle push notifications?

Answer:
Use Firebase Cloud Messaging (FCM) with react-native-firebase.

npm install @react-native-firebase/messaging

9. How do you create a modal in React Native?

Answer:

<Modal visible={showModal} transparent> <View style={styles.modalContainer}> <Text>Modal Content</Text> </View> </Modal>

10. What is the difference between ScrollView and FlatList?

Answer:

• ScrollView: Good for small lists (renders everything at once).

• FlatList: Good for large lists (renders items lazily).

<FlatList data={items} renderItem={({ item }) => <Text>{item.name}</Text>} />

11. How do you handle global state in React Native?

Answer:

• Context API (small apps).

• Redux (complex apps).

• Recoil/Zustand (lightweight alternatives).

12. How do you implement dark mode in React Native?

Answer:
Use useColorScheme():

const theme = useColorScheme(); const backgroundColor = theme === 'dark' ? 'black' : 'white';

13. How do you implement animations in React Native?

Answer:
Use Animated:

const fadeAnim = useRef(new Animated.Value(0)).current; Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true }).start();

14. How does React Native handle threading?

Answer:

• The JS thread handles logic.

• The UI thread updates the UI.

• The Native thread communicates with device APIs.

15. How do you handle memory leaks in React Native?

Answer:

• Use cleanup functions in useEffect().

• Avoid storing large objects in state.

• Use useRef() instead of re-rendering state.

useEffect(() => { const timer = setInterval(() => console.log('Running'), 1000); return () => clearInterval(timer); }, []);

16. What is Fast Refresh in React Native?

Answer:
Fast Refresh allows real-time code updates without losing state.

17. How do you debug React Native apps?

Answer:

• React Native Debugger

• Flipper (performance profiling).

• Console.log() & React DevTools

18. How do you handle API calls efficiently?

Answer:
Use axios with caching:

npm install axios

const fetchData = async () => { const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); setData(response.data); };

19. How do you prevent unnecessary re-renders in React Native?

Answer:

• Use React.memo for functional components.

• Use useCallback to memoize functions.

• Use useMemo to memoize computed values.

const memoizedFunction = useCallback(() => doSomething(value), [value]);

20. What is the difference between TouchableOpacity and Pressable?

Answer:

• TouchableOpacity: Adds opacity effect on press.

• Pressable: More flexible (allows press detection).

<Pressable onPress={() => console.log('Pressed')}> <Text>Press Me</Text> </Pressable>

21. How do you add SVG images in React Native?

Answer:

npm install react-native-svg

import Svg, { Circle } from 'react-native-svg'; <Svg><Circle cx="50" cy="50" r="40" stroke="black" /></Svg>

22. How do you handle biometric authentication?

Answer:
Use react-native-local-authentication:

npm install expo-local-authentication

const result = await LocalAuthentication.authenticateAsync();

23. How do you handle offline support in React Native?

Answer:
Use NetInfo to detect connectivity:

npm install @react-native-community/netinfo

const { isConnected } = useNetInfo();

24. How do you integrate maps in React Native?

Answer:

npm install react-native-maps

import MapView from 'react-native-maps'; <MapView initialRegion={{ latitude: 37.78825, longitude: -122.4324 }} />;

25. What is Code Push in React Native?

Answer:
CodePush allows updating the app without App Store/Play Store submissions.

1. How does React Native handle multi-threading?

Answer:
React Native runs JavaScript code on a single JavaScript thread and UI updates on the main (UI) thread. If heavy computations are required, they should be offloaded to a separate Native Module or Worker threads using libraries like react-native-workers.

2. What is the React Native Bridge, and how does it work?

Answer:
The React Native Bridge enables communication between JavaScript and native code (Java/Kotlin for Android, Swift/Objective-C for iOS).

• The JS thread sends messages to the Bridge.

• The Bridge forwards them to native modules.

• The native modules return results to the JS thread asynchronously.

3. How do you create a Native Module in React Native?

Answer:
For Android (Java/Kotlin):

@ReactMethod public void showToast(String message) { Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show(); }

For iOS (Swift/Objective-C):

@objc(ToastModule) class ToastModule: NSObject, RCTBridgeModule { static func moduleName() -> String { return "ToastModule" } }

4. What is JSI (JavaScript Interface) in React Native?

Answer:
JSI replaces the traditional Bridge to allow direct communication between JS and native code, improving performance by reducing serialization overhead.

5. What are Fabric and TurboModules in React Native?

Answer:

• Fabric is the new rendering engine in React Native that improves UI performance.

• TurboModules optimize native module loading using JSI.

6. How do you enable Hermes in React Native?

Answer:
Hermes is an optimized JavaScript engine for React Native. Enable it in android/app/build.gradle:

project.ext.react = [enableHermes: true]

Then rebuild the app:

cd android && ./gradlew clean && cd .. npx react-native run-android

7. How do you implement background tasks in React Native?

Answer:
Use react-native-background-fetch or react-native-background-timer.

npm install react-native-background-fetch

import BackgroundFetch from "react-native-background-fetch"; BackgroundFetch.configure({ minimumFetchInterval: 15 }, async () => { console.log("Background task executed"); BackgroundFetch.finish(); });

8. How do you improve React Native app startup time?

Answer:

• Enable Hermes.

• Use TurboModules.

• Optimize JS bundle size using metro.config.js.

• Use code splitting and lazy loading.

9. How do you handle large lists efficiently in React Native?

Answer:

• Use FlatList with keyExtractor.

• Enable windowSize and getItemLayout.

• Use RecyclerListView for improved performance.

<FlatList data={data} keyExtractor={item => item.id.toString()} getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })} windowSize={10} />

10. How do you optimize images in React Native?

Answer:

• Use react-native-fast-image for efficient caching.

• Use WebP format for smaller images.

npm install react-native-fast-image

import FastImage from 'react-native-fast-image'; <FastImage source={{ uri: 'https://example.com/image.webp' }} />

11. How do you implement animations efficiently in React Native?

Answer:
Use react-native-reanimated instead of Animated.

npm install react-native-reanimated

import Animated, { FadeIn } from 'react-native-reanimated'; <Animated.View entering={FadeIn.duration(500)} />;

12. How do you prevent memory leaks in React Native?

Answer:

• Use useEffect cleanup:

useEffect(() => { const interval = setInterval(() => console.log('Running'), 1000); return () => clearInterval(interval); }, []);

• Use useRef instead of state for non-rendering values.

• Unmount event listeners properly.

13. How do you implement biometric authentication in React Native?

Answer:
Use react-native-touch-id or expo-local-authentication.

npm install react-native-touch-id

import TouchID from 'react-native-touch-id'; TouchID.authenticate("Authenticate with Fingerprint").then(success => console.log(success));

14. How do you implement deep linking with dynamic links?

Answer:
Use Firebase Dynamic Links:

npm install @react-native-firebase/dynamic-links

import dynamicLinks from '@react-native-firebase/dynamic-links'; useEffect(() => { dynamicLinks().onLink(link => console.log(link.url)); }, []);

15. How do you secure an API request in React Native?

Answer:

• Use HTTPS for all requests.

• Store API keys securely using react-native-encrypted-storage.

• Use JWT Authentication.

16. How do you implement real-time features in React Native?

Answer:

• Use WebSockets for real-time messaging.

• Use Firebase Realtime Database.

const socket = new WebSocket('wss://example.com/socket'); socket.onmessage = event => console.log(event.data);

17. How do you handle state management in large React Native apps?

Answer:

• Use Redux Toolkit (for complex state).

• Use Recoil/Zustand for better performance.

18. How do you integrate Google Maps with markers?

Answer:

npm install react-native-maps

import MapView, { Marker } from 'react-native-maps'; <MapView> <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} /> </MapView>;

19. How do you detect network connectivity?

Answer:

npm install @react-native-community/netinfo

import NetInfo from "@react-native-community/netinfo"; NetInfo.fetch().then(state => console.log(state.isConnected));

20. How do you monitor React Native app performance?

Answer:

• Use Flipper for debugging.

• Use react-native-performance.

• Optimize JS thread execution.

21. What are Proguard rules in React Native?

Answer:
Proguard minimizes APK size. Add rules in proguard-rules.pro:

-keep class com.facebook.react.** { *; }

22. How do you dynamically load native modules in React Native?

Answer:
Use Lazy Loading with TurboModules:

@ReactModule(name = "LazyModule") public class LazyModule extends ReactContextBaseJavaModule { public LazyModule(ReactApplicationContext reactContext) { super(reactContext); } }

23. How do you handle app crashes in React Native?

Answer:

• Use react-native-crashlytics for logging crashes.

• Use Error Boundaries in React:

class ErrorBoundary extends React.Component { componentDidCatch(error, info) { console.log(error, info); } }

24. How do you reduce app size in React Native?

Answer:

• Use Proguard for Android.

• Use Hermes for JS optimization.

• Optimize assets and dependencies.

25. How do you implement OTA (Over-The-Air) updates?

Answer:
Use CodePush:

npm install react-native-code-push

import codePush from 'react-native-code-push'; export default codePush(App);

1. What is React Native, and how does it differ from React.js?

Answer:

• React.js is used for web development, rendering components in the browser.

• React Native is used for mobile app development, rendering components using native APIs.

• React Native does not use the DOM but bridges JavaScript and native platform code.

2. What are the core components of React Native?

Answer:
Some core components are:

• View: A basic container (similar to <div>).

• Text: Displays text content.

• Image: Displays images.

• ScrollView: Scrollable container.

• FlatList: Optimized list rendering.

3. How does React Native handle navigation?

Answer:
React Native uses react-navigation:

npm install @react-navigation/native

import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer>;

4. What is the difference between ScrollView and FlatList?

Answer:

• ScrollView: Renders all items at once (not optimized for long lists).

• FlatList: Renders only visible items (better for large lists).

5. How do you fetch data in React Native?

Answer:
Using fetch or axios:

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data));

6. How do you handle API errors?

Answer:

try { const response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error('API Error'); } catch (error) { console.error(error); }

7. What is the difference between useEffect and useLayoutEffect?

Answer:

• useEffect runs after rendering.

• useLayoutEffect runs before the screen updates (better for animations).

8. How do you optimize performance in React Native?

Answer:

• Use useMemo and useCallback to avoid unnecessary re-renders.

• Use FlatList for large lists.

• Optimize image loading with react-native-fast-image.

9. What is the purpose of useMemo and useCallback?

Answer:

• useMemo caches values to prevent recalculations.

• useCallback memoizes functions to avoid unnecessary re-renders.

10. How do you implement state management in React Native?

Answer:

• Context API for small apps.

• Redux Toolkit for complex apps.

• Zustand or Recoil for lightweight state management.

11. How do you persist data in React Native?

Answer:

• Use AsyncStorage (key-value storage).

• Use SQLite for structured data.

import AsyncStorage from '@react-native-async-storage/async-storage'; await AsyncStorage.setItem('user', JSON.stringify({ name: 'John' }));

12. How do you handle user authentication in React Native?

Answer:

• Use JWT (JSON Web Token) for authentication.

• Use OAuth with Google, Facebook, etc.

• Store tokens securely using SecureStore (for Expo) or AsyncStorage.

13. How do you detect network connectivity?

Answer:
Use @react-native-community/netinfo:

npm install @react-native-community/netinfo

import NetInfo from "@react-native-community/netinfo"; NetInfo.fetch().then(state => console.log(state.isConnected));

14. How do you handle app permissions in React Native?

Answer:
Use react-native-permissions:

npm install react-native-permissions

import { request, PERMISSIONS } from 'react-native-permissions'; request(PERMISSIONS.ANDROID.CAMERA).then(response => console.log(response));

15. How do you handle push notifications in React Native?

Answer:
Use Firebase Cloud Messaging (FCM) with react-native-firebase:

npm install @react-native-firebase/messaging

16. How do you implement dark mode?

Answer:
Use useColorScheme():

const theme = useColorScheme(); const backgroundColor = theme === 'dark' ? 'black' : 'white';

17. How do you implement animations?

Answer:
Use react-native-reanimated:

npm install react-native-reanimated

import Animated, { FadeIn } from 'react-native-reanimated'; <Animated.View entering={FadeIn.duration(500)} />;

18. How do you handle offline support in React Native?

Answer:

• Use NetInfo to check network status.

• Use Redux Persist to store offline data.

• Use SQLite for offline storage.

19. How do you integrate maps in React Native?

Answer:
Use react-native-maps:

npm install react-native-maps

import MapView from 'react-native-maps'; <MapView initialRegion={{ latitude: 37.78825, longitude: -122.4324 }} />;

20. How do you optimize React Native app size?

Answer:

• Use Proguard to shrink Android APK size.

• Enable Hermes for JavaScript optimization.

• Optimize image assets.

21. How do you implement biometric authentication?

Answer:
Use expo-local-authentication:

npm install expo-local-authentication

import * as LocalAuthentication from 'expo-local-authentication'; const result = await LocalAuthentication.authenticateAsync();

22. What is Fast Refresh in React Native?

Answer:
Fast Refresh enables real-time updates to the UI without losing state.

23. How do you monitor app performance in React Native?

Answer:

• Use Flipper for debugging.

• Use react-native-performance for performance monitoring.

24. How do you implement deep linking?

Answer:
Use react-navigation with deep linking:

const linking = { prefixes: ['myapp://'], config: { screens: { Home: 'home' } } };

25. How do you handle crashes in React Native?

Answer:

• Use Sentry or Crashlytics for error tracking.

• Use Error Boundaries in React:

class ErrorBoundary extends React.Component { componentDidCatch(error, info) { console.log(error, info); } }