Stark.ai
Alert
Your message here...
React Native is a powerful framework for building cross-platform mobile applications using JavaScript and React. Stark.ai offers a curated collection of React Native interview questions, real-world scenarios, and expert guidance to help you excel in your next technical interview.
React Native is a framework developed by Facebook that allows developers to build native mobile applications using...
React Native provides several core components that map directly to native UI elements: View (container), Text (text...
AppRegistry is the entry point to run a React Native application. It provides the registerComponent method used to...
Expo provides a managed workflow with pre-built components and services, making it easier to start but with limited...
Metro is React Native's JavaScript bundler that combines all JavaScript code and dependencies into a single file. It...
React Native offers multiple debugging options: Chrome Developer Tools for JavaScript debugging, React Developer...
package.json manages project dependencies, scripts, and configuration. It lists all npm packages required by the...
React Native runs on three main threads: 1) Main Thread (Native UI), 2) JavaScript Thread (JS execution), and 3)...
babel.config.js configures Babel transpilation settings for the project. It defines how modern JavaScript features...
Hot Reloading updates only the changed components while maintaining the app's state. Live Reloading refreshes the...
React Native has two types of components: 1) Class Components - ES6 classes that extend React.Component and have...
Props (properties) are read-only components that are passed from a parent component to a child component. They are...
View is a container component that works like a div in web development, used for layouting and styling. Text is...
SafeAreaView is a component that automatically adds padding to accommodate notches, status bars, and other...
Touch events are handled using components like TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, and...
FlatList is optimized for long lists of data, rendering items lazily and only what's visible on screen. ScrollView...
Data can be passed between components using props for parent-to-child communication, callback functions for...
The Image component is used to display images in React Native. It can handle both local and remote images, supports...
Style props are used to customize the appearance of components. They can be applied directly as props or through...
KeyboardAvoidingView is a component that adjusts its height or position based on the keyboard height to prevent the...
State is a mutable data store internal to a component that determines the component's behavior and rendering. Unlike...
useState is a React hook that adds state management to functional components. It returns an array with two elements:...
In class components, state is updated using this.setState(). It can accept either an object with new state values or...
useState is simpler and good for managing independent pieces of state. useReducer is preferred for complex state...
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app....
Context API provides a way to pass data through the component tree without manually passing props. It's useful for...
Form state can be handled using controlled components with useState, or through form management libraries like...
useEffect handles side effects in functional components, including state-related operations like data fetching,...
State can be shared between components through: 1) Lifting state up to a common ancestor, 2) Using Context API, 3)...
Common pitfalls include: 1) Mutating state directly instead of using setState/useState, 2) Async state updates race...
React Navigation is a popular navigation library for React Native that provides a way to navigate between screens....
The main types are: 1) Stack Navigator for basic back/forward navigation, 2) Tab Navigator for switching between...
Navigation between screens is done using the navigation prop: navigation.navigate('ScreenName') for basic...
navigate() moves to a screen and avoids duplicating if it's already in the stack, while push() always adds a new...
Parameters can be passed between screens using: navigation.navigate('ScreenName', { paramName: value }) and accessed...
Deep linking allows apps to handle external URLs and open specific screens. It's implemented using linking...
The Android back button can be handled using the useFocusEffect or useBackHandler hooks from...
NavigationContainer is the root component that manages navigation state and integrates with the device's navigation...
Headers can be customized using screenOptions or options props on navigators or individual screens. Options include...
Navigation lifecycle events include focus/blur (when screens gain/lose focus) and beforeRemove (before screen...
React.memo is a higher-order component that memoizes functional components to prevent unnecessary re-renders. It...
FlatList is optimized for long lists by implementing windowing, which only renders items currently visible on...
The bridge serializes data between JavaScript and native code, which can impact performance when sending large...
Hermes is a JavaScript engine optimized for React Native that improves start-up time, reduces memory usage, and...
Image optimization includes using proper image sizes, implementing lazy loading, caching images, using FastImage...
useCallback memoizes functions to prevent unnecessary recreation between renders. It's particularly useful when...
console.log statements can significantly impact performance in production by creating unnecessary bridge traffic....
useMemo memoizes computed values to prevent expensive recalculations on every render. It's useful for optimizing...
Bundle size can be reduced by removing unused dependencies, implementing code splitting, using ProGuard/R8 for...
PureComponent implements shouldComponentUpdate with a shallow prop and state comparison, preventing unnecessary...
Platform.select() is a React Native utility that returns platform-specific values. It accepts an object with 'ios',...
React Native automatically picks platform-specific files using extensions like .ios.js or .android.js. For example,...
Platform.OS is a string that identifies the current operating system ('ios' or 'android'). It's used for conditional...
Platform-specific styles can be handled using Platform.select(), platform-specific style files, or conditional style...
React Native provides platform-specific components like DatePickerIOS and ProgressViewIOS for iOS, or...
Platform permissions are handled differently in iOS (Info.plist) and Android (AndroidManifest.xml). React Native...
Android's back button is hardware/software-based and requires explicit handling using BackHandler, while iOS's back...
Font handling differs between platforms in naming conventions and loading mechanisms. iOS uses the font name, while...
Layout differences include status bar height, navigation bar presence, safe areas (iOS), and default spacing...
Gestures can differ between platforms in behavior and implementation. iOS often uses swipe gestures for navigation,...
StyleSheet is a React Native API for creating and managing styles. It provides performance optimizations by...
React Native uses Flexbox for layout but with some differences from web. The default flexDirection is 'column'...
React Native styling uses JavaScript objects with camelCase properties instead of CSS syntax. There's no inheritance...
Dimensions can be handled using fixed numbers (density-independent pixels), percentages, or the Dimensions API. The...
SafeAreaView is used to handle safe area insets (notches, status bars) on iOS devices. It automatically adds padding...
Responsive layouts are created using flexbox, percentage values, the Dimensions API, and useWindowDimensions hook....
Style arrays allow multiple styles to be applied to a component: [styles.container, styles.modified]. Later styles...
Text styling in React Native is not inherited by default. Each Text component needs its own style. Text-specific...
Width and height set fixed dimensions, while flex determines how components grow/shrink within available space. Flex...
Images can be sized using width/height properties or resizeMode prop ('contain', 'cover', 'stretch', 'center'). For...
API calls in React Native can be made using the Fetch API or Axios library. The Fetch API is built into React Native...
useEffect is commonly used for making API calls when a component mounts or when dependencies change. It helps manage...
API errors should be caught using try/catch blocks or .catch() for promises. Error states should be stored in...
GET requests retrieve data and include parameters in the URL query string. POST requests send data in the request...
Loading states should be managed in component state (e.g., isLoading boolean). Show loading indicators while data is...
JSON (JavaScript Object Notation) is a data format used for API requests/responses. React Native can parse JSON...
Headers can be set using the headers object in fetch options or Axios config. Common headers include Authorization...
REST (Representational State Transfer) is an architectural style for APIs using HTTP methods (GET, POST, PUT,...
API authentication typically involves sending tokens in request headers, often using JWT (JSON Web Tokens). Tokens...
Query parameters are key-value pairs added to URLs for filtering, sorting, or pagination. They're commonly used in...
React Native is a framework developed by Facebook that allows developers to build native mobile applications using JavaScript and React. Unlike React which creates a virtual DOM for browser rendering, React Native creates actual native UI components that are rendered on mobile devices. This means React Native apps have native performance while still allowing cross-platform development using a single codebase.
React Native provides several core components that map directly to native UI elements: View (container), Text (text display), Image (image display), ScrollView (scrollable container), TextInput (text input field), TouchableOpacity/TouchableHighlight (touchable elements), and FlatList/SectionList (optimized scrollable lists).
AppRegistry is the entry point to run a React Native application. It provides the registerComponent method used to register the root component of the application. This registration tells React Native which component to render when the application starts, similar to ReactDOM.render in web applications.
Expo provides a managed workflow with pre-built components and services, making it easier to start but with limited native module access. React Native CLI offers a bare workflow with full native code access but requires more setup and native development knowledge.
Metro is React Native's JavaScript bundler that combines all JavaScript code and dependencies into a single file. It handles transpilation, asset management, and provides hot reloading during development. It's optimized specifically for React Native's mobile environment needs.
React Native offers multiple debugging options: Chrome Developer Tools for JavaScript debugging, React Developer Tools for component inspection, built-in Debug menu on devices, and console logging. It also supports remote debugging and various third-party debugging tools.
package.json manages project dependencies, scripts, and configuration. It lists all npm packages required by the project, defines scripts for development and building, and contains metadata about the project including name, version, and license information.
React Native runs on three main threads: 1) Main Thread (Native UI), 2) JavaScript Thread (JS execution), and 3) Shadow Thread (layout calculations). These threads work together through the bridge to create the native application experience.
babel.config.js configures Babel transpilation settings for the project. It defines how modern JavaScript features are converted to compatible code, handles JSX transformation, and can include various plugins and presets for additional functionality.
Hot Reloading updates only the changed components while maintaining the app's state. Live Reloading refreshes the entire app and resets state when code changes. Hot Reloading is more efficient during development as it preserves the development flow.
React Native has two types of components: 1) Class Components - ES6 classes that extend React.Component and have lifecycle methods, state management, and render method. 2) Functional Components - JavaScript functions that accept props and return React elements, commonly used with hooks in modern React Native development.
Props (properties) are read-only components that are passed from a parent component to a child component. They are used to customize and configure components, allowing for component reusability and maintaining the one-way data flow architecture in React Native applications.
View is a container component that works like a div in web development, used for layouting and styling. Text is specifically designed for displaying text content and text-specific styling. Text components must be used to render any string content in React Native.
SafeAreaView is a component that automatically adds padding to accommodate notches, status bars, and other device-specific screen elements. It ensures content is displayed within the visible area of the device, particularly important for iOS devices with notches.
Touch events are handled using components like TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, and Pressable. These components provide visual feedback and handle various touch interactions like taps, long presses, and press in/out events.
FlatList is optimized for long lists of data, rendering items lazily and only what's visible on screen. ScrollView renders all its child components at once, making it suitable for a small number of items. FlatList provides better performance for long lists but requires more setup.
Data can be passed between components using props for parent-to-child communication, callback functions for child-to-parent communication, and context or state management solutions for components that aren't directly related.
The Image component is used to display images in React Native. It can handle both local and remote images, supports various image formats, provides loading and error states, and includes properties for resizing and styling images.
Style props are used to customize the appearance of components. They can be applied directly as props or through StyleSheet.create(). React Native uses a subset of CSS properties with camelCase naming convention and some platform-specific properties.
KeyboardAvoidingView is a component that adjusts its height or position based on the keyboard height to prevent the keyboard from overlapping with input fields. It's particularly useful for forms and input-heavy screens on iOS devices.
State is a mutable data store internal to a component that determines the component's behavior and rendering. Unlike props which are read-only and passed from parent to child, state can be modified using setState() in class components or state updater functions in hooks, triggering re-renders when changed.
useState is a React hook that adds state management to functional components. It returns an array with two elements: the current state value and a function to update it. The hook accepts an initial state value and can be used multiple times in a single component for different state variables.
In class components, state is updated using this.setState(). It can accept either an object with new state values or a function that receives previous state as an argument. setState() performs shallow merging and updates are asynchronous for performance optimization.
useState is simpler and good for managing independent pieces of state. useReducer is preferred for complex state logic, especially when state updates depend on multiple factors or when one action should update multiple state values. useReducer follows a Redux-like pattern with actions and reducers.
AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It's commonly used for storing user preferences, tokens, and other data that needs to persist across app restarts.
Context API provides a way to pass data through the component tree without manually passing props. It's useful for sharing global data like themes, user authentication, or language preferences. Should be used when data needs to be accessible by many components at different nesting levels.
Form state can be handled using controlled components with useState, or through form management libraries like Formik or React Hook Form. State typically includes input values, validation errors, and form submission status.
useEffect handles side effects in functional components, including state-related operations like data fetching, subscriptions, or manual DOM manipulations. It runs after render and can clean up effects by returning a function.
State can be shared between components through: 1) Lifting state up to a common ancestor, 2) Using Context API, 3) Implementing state management libraries like Redux or MobX, 4) Using custom hooks for shared state logic.
Common pitfalls include: 1) Mutating state directly instead of using setState/useState, 2) Async state updates race conditions, 3) Over-using global state, 4) Not considering component re-renders, 5) Improper state structure leading to performance issues.
React.memo is a higher-order component that memoizes functional components to prevent unnecessary re-renders. It performs a shallow comparison of props and only re-renders if props have changed, improving performance by reducing render cycles for components with stable props.
FlatList is optimized for long lists by implementing windowing, which only renders items currently visible on screen. It provides better performance than ScrollView for long lists by recycling DOM elements and managing memory efficiently.
The bridge serializes data between JavaScript and native code, which can impact performance when sending large amounts of data. Minimizing bridge traffic by batching updates and reducing unnecessary communication improves app performance.
Hermes is a JavaScript engine optimized for React Native that improves start-up time, reduces memory usage, and decreases app size. It provides better performance than traditional JavaScript engines through ahead-of-time compilation and optimized bytecode.
Image optimization includes using proper image sizes, implementing lazy loading, caching images, using FastImage component for better performance, and implementing progressive loading for large images. Also consider using image compression and proper formats.
useCallback memoizes functions to prevent unnecessary recreation between renders. It's particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
console.log statements can significantly impact performance in production by creating unnecessary bridge traffic. They should be removed or disabled in production builds using babel plugins or proper configuration.
useMemo memoizes computed values to prevent expensive recalculations on every render. It's useful for optimizing performance when dealing with complex calculations or data transformations that don't need to be recomputed unless dependencies change.
Bundle size can be reduced by removing unused dependencies, implementing code splitting, using ProGuard/R8 for Android, enabling Hermes, implementing tree shaking, and properly configuring the Metro bundler.
PureComponent implements shouldComponentUpdate with a shallow prop and state comparison, preventing unnecessary renders. It's useful for optimizing class components when you know that shallow comparison is sufficient for determining updates.
Platform.select() is a React Native utility that returns platform-specific values. It accepts an object with 'ios', 'android', and 'default' keys, returning the value that matches the current platform. It's commonly used for platform-specific styles, components, or behavior.
React Native automatically picks platform-specific files using extensions like .ios.js or .android.js. For example, Component.ios.js for iOS and Component.android.js for Android. This allows maintaining separate implementations while keeping a common interface.
Platform.OS is a string that identifies the current operating system ('ios' or 'android'). It's used for conditional rendering and logic based on the platform, allowing developers to handle platform-specific differences in code.
Platform-specific styles can be handled using Platform.select(), platform-specific style files, or conditional style objects. This includes handling different shadow implementations, native components styling, and platform-specific measurements.
React Native provides platform-specific components like DatePickerIOS and ProgressViewIOS for iOS, or DatePickerAndroid and ProgressBarAndroid for Android. These components are designed to match native platform UI guidelines and behavior.
Platform permissions are handled differently in iOS (Info.plist) and Android (AndroidManifest.xml). React Native provides APIs to request permissions at runtime, but setup and configuration must be done separately for each platform.
Android's back button is hardware/software-based and requires explicit handling using BackHandler, while iOS's back gesture is part of navigation and handled automatically by navigation libraries. Different approaches are needed for consistent behavior.
Font handling differs between platforms in naming conventions and loading mechanisms. iOS uses the font name, while Android uses the file name. Custom fonts require different setup in Xcode and Android assets folder.
Layout differences include status bar height, navigation bar presence, safe areas (iOS), and default spacing behaviors. These need to be handled using platform-specific components like SafeAreaView and appropriate styling.
Gestures can differ between platforms in behavior and implementation. iOS often uses swipe gestures for navigation, while Android relies more on the back button. PanResponder and gesture handlers need platform-specific configuration.
StyleSheet is a React Native API for creating and managing styles. It provides performance optimizations by validating styles at compile time, converting them to atomic IDs, and preventing new object creation on rerenders. It also provides better error checking and auto-completion support.
React Native uses Flexbox for layout but with some differences from web. The default flexDirection is 'column' instead of 'row'. Flexbox properties like flex, flexDirection, justifyContent, and alignItems are used to create flexible layouts that work across different screen sizes.
React Native styling uses JavaScript objects with camelCase properties instead of CSS syntax. There's no inheritance of styles like CSS, no cascading, and no selectors. Units are unitless numbers (no px, em, etc.), and not all CSS properties are supported.
Dimensions can be handled using fixed numbers (density-independent pixels), percentages, or the Dimensions API. The useWindowDimensions hook provides responsive dimensions. flex properties are commonly used for dynamic sizing.
SafeAreaView is used to handle safe area insets (notches, status bars) on iOS devices. It automatically adds padding to avoid overlay with system UI elements. It's essential for proper layout on modern iOS devices with notches or home indicators.
Responsive layouts are created using flexbox, percentage values, the Dimensions API, and useWindowDimensions hook. Platform.select can be used for platform-specific layouts, and dynamic styling based on screen size helps ensure proper display across devices.
Style arrays allow multiple styles to be applied to a component: [styles.container, styles.modified]. Later styles override earlier ones. This is useful for conditional styling and style composition. Arrays can include both StyleSheet styles and inline style objects.
Text styling in React Native is not inherited by default. Each Text component needs its own style. Text-specific properties like fontSize, fontWeight, lineHeight are available. Custom fonts require platform-specific setup.
Width and height set fixed dimensions, while flex determines how components grow/shrink within available space. Flex is preferred for responsive layouts as it adapts to different screen sizes. Fixed dimensions should be used sparingly.
Images can be sized using width/height properties or resizeMode prop ('contain', 'cover', 'stretch', 'center'). For network images, dimensions must be specified explicitly. Image sizing should consider aspect ratio and responsive layout needs.
API calls in React Native can be made using the Fetch API or Axios library. The Fetch API is built into React Native and supports promises, while Axios provides additional features like request/response interceptors, automatic JSON transformation, and better error handling.
useEffect is commonly used for making API calls when a component mounts or when dependencies change. It helps manage side effects, cleanup functions for canceling requests, and proper data fetching lifecycle. The dependency array controls when the effect reruns.
API errors should be caught using try/catch blocks or .catch() for promises. Error states should be stored in component state, displayed to users appropriately, and logged for debugging. Consider implementing retry logic and proper error boundaries.
GET requests retrieve data and include parameters in the URL query string. POST requests send data in the request body and are used for creating/updating resources. GET requests should be idempotent, while POST requests can modify server state.
Loading states should be managed in component state (e.g., isLoading boolean). Show loading indicators while data is being fetched, handle errors appropriately, and ensure good UX during loading. Consider skeleton screens or placeholder content.
JSON (JavaScript Object Notation) is a data format used for API requests/responses. React Native can parse JSON using JSON.parse() and stringify using JSON.stringify(). Most modern APIs use JSON for data exchange.
Headers can be set using the headers object in fetch options or Axios config. Common headers include Authorization for authentication tokens, Content-Type for specifying data format, and Accept for specifying expected response format.
REST (Representational State Transfer) is an architectural style for APIs using HTTP methods (GET, POST, PUT, DELETE). It provides standardized ways to interact with resources, making APIs predictable and easier to understand.
API authentication typically involves sending tokens in request headers, often using JWT (JSON Web Tokens). Tokens should be stored securely (e.g., AsyncStorage), refreshed when needed, and included in requests via interceptors.
Query parameters are key-value pairs added to URLs for filtering, sorting, or pagination. They're commonly used in GET requests to modify the response. Parameters should be properly encoded using encodeURIComponent() when necessary.
Solve React Native development challenges tailored for interviews.
Explore MoreUnderstand core components, props, and state management techniques.
Learn best practices for handling animations, rendering optimizations, and memory management.
Understand how to integrate native code for platform-specific functionalities.
Familiarize yourself with React Native debugging tools and common issue resolution techniques.
Join thousands of successful candidates preparing with Stark.ai. Start practicing React Native questions, mock interviews, and more to secure your dream role.
Start Preparing now
