What is React Native and how does it differ from React?
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.
What are the core components in React Native?
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).
What is the purpose of the AppRegistry?
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.
What is the difference between Expo and React Native CLI?
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.
What is the Metro bundler and its role?
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.
How does React Native handle debugging?
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.
What is the purpose of package.json in React Native?
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.
What are the main threads in a React Native application?
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.
What is the role of babel.config.js in React Native?
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.
What is Hot Reloading and how does it differ from Live Reloading?
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.
What is the React Native bridge and how does it work?
The bridge is the communication layer between JavaScript and native code. It serializes data and handles asynchronous communication between JS and native threads. All native module calls and UI updates pass through the bridge, which can impact performance with heavy data transfers.
How does React Native handle platform-specific code?
React Native provides Platform.select(), platform-specific file extensions (.ios.js/.android.js), Platform.OS checks, and platform-specific components. These methods allow writing platform-specific logic while maintaining a shared codebase.
What are native modules and when should you use them?
Native modules expose platform-specific APIs to JavaScript through the bridge. They're used when requiring direct access to platform APIs, implementing performance-critical features, or integrating third-party SDKs that don't have React Native implementations.
What is the role of the Shadow Thread in React Native?
The Shadow Thread handles layout calculations using Yoga (Facebook's cross-platform layout engine). It processes flex layouts and converts them to native layouts, running separately from the main thread to ensure smooth UI performance.
How does React Native handle JavaScript engines across platforms?
iOS uses JavaScriptCore (JSC) by default, while Android can use either JSC or Hermes. Hermes is Facebook's custom JS engine optimized for React Native, offering better performance, reduced memory usage, and faster startup times.
What is the purpose of linking in React Native?
Linking handles deep linking and URL scheme integration in React Native apps. It provides methods to open external links and handle incoming deep links, enabling integration with other apps and web content.
How does React Native handle app permissions?
React Native provides APIs to request and check platform permissions (camera, location, etc.). These are handled through native modules and require configuration in platform-specific files (AndroidManifest.xml, Info.plist).
What is the role of the Metro configuration file?
metro.config.js customizes the Metro bundler's behavior, including module resolution, asset handling, and transformation settings. It can be modified to support different file types, customize bundling, and optimize build performance.
How does React Native handle assets and resources?
Assets are handled through the Metro bundler, which can process images, fonts, and other resources. Platform-specific asset selection is supported through asset suffixes, and the require syntax is used for static asset references.
What is the New Architecture in React Native?
The New Architecture introduces Fabric (new rendering system) and TurboModules (improved native modules). It reduces bridge overhead, improves performance, and enables better native integration through codegen and static typing.
How does the Fabric rendering system work?
Fabric is a C++ rendering system that enables synchronous operations between JS and native code. It introduces a new threading model, improves layout performance, and enables concurrent rendering features.
What are TurboModules and how do they improve performance?
TurboModules provide direct JS to native communication without serialization overhead. They use codegen to create type-safe interfaces, lazy load modules, and enable better memory management compared to traditional native modules.
How does React Native handle memory management?
React Native manages memory through automatic garbage collection in JS and ARC/GC in native code. Understanding the bridge's role in memory usage, implementing proper cleanup in components, and monitoring memory leaks are crucial.
What is the role of JSI (JavaScript Interface) in React Native?
JSI enables direct communication between JavaScript and native code without going through the bridge. It provides a way to hold native references in JavaScript and enables synchronous native method calls.
How does React Native handle native crash reporting?
Native crashes are handled through platform-specific crash reporting tools and services. Integration requires native module setup, symbolication for JavaScript stack traces, and proper error boundary implementation.
What are the considerations for implementing security in React Native?
Security involves handling data encryption, secure storage, certificate pinning, code obfuscation, and protecting against common mobile vulnerabilities. Platform-specific security features must be properly implemented.
How does React Native handle app initialization and loading?
App initialization involves native bootstrap, JS engine initialization, bundle loading, and component mounting. Understanding this process is crucial for optimizing startup time and implementing splash screens.
What are the two types of components in React Native?
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.
What are props in React Native?
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.
What is the difference between View and Text components?
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.
What is the purpose of the SafeAreaView component?
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.
How do you handle touch events in React Native?
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.
What is the difference between FlatList and ScrollView?
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.
How do you pass data between components in React Native?
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.
What is the purpose of the Image component?
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.
What are style props in React Native?
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.
What is the purpose of KeyboardAvoidingView?
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.
How do you implement component composition in React Native?
Component composition involves building larger components from smaller ones using props.children, render props, and higher-order components. This promotes code reuse, maintainability, and separation of concerns in the application architecture.
What are refs in React Native and when should you use them?
Refs provide a way to access DOM nodes or React elements directly. They should be used sparingly for cases like managing focus, text selection, animations, or integrating with third-party libraries. Refs should not be used for tasks that can be handled through props and state.
How do you optimize FlatList performance?
FlatList performance can be optimized by: 1) Using getItemLayout to avoid measurement of items, 2) Implementing windowSize and maxToRenderPerBatch, 3) Using removeClippedSubviews, 4) Implementing proper key extraction, and 5) Optimizing renderItem function with memo or PureComponent.
What are controlled and uncontrolled components?
Controlled components have their state managed by React through props and callbacks (e.g., value and onChangeText). Uncontrolled components maintain their own internal state. Controlled components provide more predictable behavior but require more setup.
How do you handle component lifecycle in modern React Native?
Modern React Native uses hooks like useEffect for lifecycle management. useEffect replaces componentDidMount, componentDidUpdate, and componentWillUnmount. The dependency array controls when effects run, and cleanup functions handle teardown.
What is the purpose of PureComponent and when should it be used?
PureComponent implements shouldComponentUpdate with a shallow prop and state comparison. It's used to optimize performance by preventing unnecessary renders when props or state haven't changed. Should be used for components with simple props/state structures.
How do you handle prop validation in React Native?
Prop validation is handled using PropTypes or TypeScript. PropTypes provide runtime checking of prop types, while TypeScript offers compile-time type checking. Both help catch bugs early and improve code documentation.
What are Higher-Order Components (HOCs) and their use cases?
HOCs are functions that take a component and return a new component with additional props or behavior. They're used for code reuse, adding functionality like authentication, logging, or data fetching. HOCs follow the principle of composition over inheritance.
How do you handle modal dialogs in React Native?
Modal dialogs can be implemented using the Modal component or third-party libraries. Considerations include proper animation handling, backdrop press handling, accessibility, and platform-specific behaviors like hardware back button on Android.
What are render props and how do they differ from HOCs?
Render props are a pattern where a component receives a function prop that returns React elements. Unlike HOCs, render props provide more flexibility in composing behavior and avoid naming collisions. They're useful for sharing stateful logic between components.
How do you implement custom native components?
Custom native components require native code implementation (Java/Kotlin for Android, Objective-C/Swift for iOS) and JavaScript interface. This involves creating native view managers, implementing view properties, and handling events through the bridge.
How do you handle component rerendering optimization?
Rerendering optimization involves: 1) Using React.memo for functional components, 2) Implementing shouldComponentUpdate for class components, 3) Proper key usage, 4) State structure optimization, 5) Callback memoization with useCallback, and 6) Value memoization with useMemo.
What are the challenges in implementing virtualized lists?
Virtualized list challenges include: 1) Memory management for large datasets, 2) Smooth scrolling performance, 3) Handling variable height items, 4) Implementing pull-to-refresh and infinite scroll, 5) Managing scroll position restoration, and 6) Platform-specific optimizations.
How do you implement complex gesture handling?
Complex gestures require the PanResponder system or gesture libraries. Implementation involves handling gesture recognition, touch responder negotiation, animation integration, and proper cleanup. Consider interaction with scrolling views and native gesture handlers.
What are the strategies for implementing component lazy loading?
Lazy loading strategies include: 1) React.lazy with Suspense, 2) Dynamic imports, 3) Route-based code splitting, 4) Component prefetching, and 5) Loading state management. Consider bundle size impact and user experience during loading.
How do you handle component error boundaries?
Error boundaries are components that catch JavaScript errors in their child component tree. Implementation involves getDerivedStateFromError and componentDidCatch lifecycle methods, fallback UI rendering, and error reporting integration.
What are the considerations for implementing accessible components?
Accessibility implementation includes: 1) Proper use of accessibility props, 2) Semantic markup, 3) Focus management, 4) Screen reader support, 5) Color contrast, 6) Touch target sizing, and 7) Platform-specific accessibility guidelines.
What is state in React Native and how does it differ from props?
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.
What is the useState hook and how is it used?
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.
How do you update state in class components?
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.
What is the difference between useState and useReducer?
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.
What is AsyncStorage and how is it used?
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.
What is the Context API and when should it be used?
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.
How do you handle form state in React Native?
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.
What is the purpose of useEffect in state management?
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.
How do you share state between components?
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.
What are the common pitfalls in state management?
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.
How does Redux work in React Native?
Redux implements a unidirectional data flow with a single store holding the application state. Actions describe state changes, reducers specify how actions transform state, and components connect to the store using hooks or HOCs. Middleware handles side effects.
What is Redux Toolkit and how does it simplify state management?
Redux Toolkit is the official toolset for Redux development. It simplifies store setup, reduces boilerplate through createSlice, handles immutable updates with Immer, and includes RTK Query for data fetching. It provides utilities for common Redux patterns.
How do you implement state persistence in React Native?
State persistence involves: 1) Using AsyncStorage or similar storage solutions, 2) Implementing redux-persist for Redux state, 3) Handling storage serialization/deserialization, 4) Managing storage versioning, 5) Implementing proper error handling and fallbacks.
What are the benefits and drawbacks of MobX?
MobX offers simpler setup than Redux, automatic tracking of state dependencies, and more flexibility in state structure. Drawbacks include potential overuse of observables, harder debugging due to automatic updates, and less predictable state changes.
How do you handle real-time state updates?
Real-time updates can be handled through: 1) WebSocket connections with state synchronization, 2) Push notifications with state updates, 3) Polling with proper state merging, 4) Optimistic updates with rollback handling.
What are custom hooks and how do they help in state management?
Custom hooks are JavaScript functions that use React hooks to encapsulate reusable state logic. They help abstract complex state management, share stateful logic between components, and improve code organization and reusability.
How do you handle form validation state?
Form validation state involves: 1) Tracking input values and errors, 2) Implementing validation rules and error messages, 3) Managing submission state, 4) Handling async validation, 5) Coordinating multiple form fields' validation state.
What is the role of middleware in Redux?
Middleware intercepts actions before they reach reducers, enabling side effects, async operations, logging, and routing. Common middleware includes redux-thunk for async actions, redux-saga for complex workflows, and custom middleware for specific needs.
How do you optimize Context API performance?
Context optimization includes: 1) Split contexts by functionality, 2) Memoize context values, 3) Use context selectors to prevent unnecessary rerenders, 4) Implement context providers at appropriate levels, 5) Consider alternative solutions for frequently changing values.
What are the patterns for managing complex state interactions?
Complex state patterns include: 1) State machines with XState, 2) Command pattern for actions, 3) Observable pattern for state streams, 4) Reducer composition for modular state logic, 5) Event sourcing for state history.
How do you implement state management for offline-first applications?
Offline-first state management requires: 1) Local state persistence, 2) Conflict resolution strategies, 3) Queue management for offline actions, 4) State synchronization upon reconnection, 5) Optimistic UI updates with proper error handling.
What are the strategies for managing state in large-scale applications?
Large-scale state management involves: 1) Domain-driven state organization, 2) State normalization, 3) Module-based state splitting, 4) Lazy loading state modules, 5) State hydration strategies, 6) Performance optimization patterns.
How do you implement state management for multi-window applications?
Multi-window state management requires: 1) State synchronization between windows, 2) Shared storage mechanisms, 3) Event-based communication, 4) Consistent state updates across windows, 5) Handle window lifecycle events.
What are the approaches for handling state in microservices architecture?
Microservices state management involves: 1) Domain-based state separation, 2) Service boundary definition, 3) State consistency patterns, 4) Event-driven state updates, 5) Distributed state management strategies.
How do you implement state management for real-time collaborative features?
Real-time collaboration requires: 1) Operational transformation or CRDT implementation, 2) State conflict resolution, 3) Presence management, 4) State versioning, 5) Optimistic updates with proper conflict handling.
What are the patterns for handling complex async state workflows?
Complex async patterns include: 1) Saga patterns for orchestration, 2) State machines for workflow management, 3) Queue-based state updates, 4) Retry and recovery strategies, 5) Transaction-like state updates.
How do you implement state management for AR/VR features in React Native?
AR/VR state management involves: 1) Real-time state updates for position/orientation, 2) Scene graph state management, 3) Object interaction state, 4) Performance optimization for state updates, 5) Platform-specific state handling.
What is React Navigation and why is it used?
React Navigation is a popular navigation library for React Native that provides a way to navigate between screens. It offers various navigation patterns (stack, tab, drawer), handles deep linking, supports animations, and provides a simple API for managing navigation state and screen transitions.
What are the main types of navigators in React Navigation?
The main types are: 1) Stack Navigator for basic back/forward navigation, 2) Tab Navigator for switching between tabs, 3) Drawer Navigator for slide-in menus, 4) Bottom Tab Navigator for bottom tab bars, and 5) Material Top Tab Navigator for swipeable top tabs.
How do you navigate between screens using React Navigation?
Navigation between screens is done using the navigation prop: navigation.navigate('ScreenName') for basic navigation, navigation.push('ScreenName') for stacking screens, navigation.goBack() for going back, and navigation.reset() for resetting the navigation state.
What is the difference between navigate() and push()?
navigate() moves to a screen and avoids duplicating if it's already in the stack, while push() always adds a new instance of the screen to the stack, even if it already exists. push() is useful when you want multiple instances of the same screen.
How do you pass parameters between screens?
Parameters can be passed between screens using: navigation.navigate('ScreenName', { paramName: value }) and accessed in the destination screen using route.params. Parameters can also be passed using nested navigation or through the initial params of a screen.
What is deep linking in React Native?
Deep linking allows apps to handle external URLs and open specific screens. It's implemented using linking configuration in React Navigation, enabling the app to respond to both universal links (http/https) and custom URL schemes, mapping them to specific screens and parameters.
How do you handle the Android back button?
The Android back button can be handled using the useFocusEffect or useBackHandler hooks from @react-navigation/native. You can customize the behavior by returning true to prevent default back navigation or false to allow it.
What is the NavigationContainer component?
NavigationContainer is the root component that manages navigation state and integrates with the device's navigation features. It must wrap all navigator components and can be configured with themes, linking configuration, and state persistence options.
How do you customize the header in React Navigation?
Headers can be customized using screenOptions or options props on navigators or individual screens. Options include title, headerStyle, headerTintColor, headerRight, headerLeft, and headerTitle. Custom components can be used for complete header customization.
What are navigation lifecycle events?
Navigation lifecycle events include focus/blur (when screens gain/lose focus) and beforeRemove (before screen removal). These can be handled using hooks like useFocusEffect, useIsFocused, or navigation event listeners for custom behavior.
How do you implement nested navigation?
Nested navigation involves placing one navigator inside another (e.g., tab navigator inside stack navigator). Each navigator maintains its own navigation state, and proper screen nesting helps organize complex navigation flows and maintain navigation state hierarchy.
What are navigation state persistence options?
Navigation state can be persisted using persistNavigationState and loadNavigationState props on NavigationContainer. This enables saving/restoring navigation state across app restarts, requiring implementation of storage logic using AsyncStorage or similar.
How do you handle authentication flows in navigation?
Authentication flows typically use conditional navigation based on auth state, often implementing stack switching or nested navigation. Common patterns include auth stack, app stack, and loading screens, with proper state management for smooth transitions.
What are navigation events and how are they used?
Navigation events (focus, blur, beforeRemove, state) can be listened to using addListener. They're useful for triggering side effects, analytics tracking, or cleanup operations when navigation state changes occur.
How do you implement custom navigation animations?
Custom animations can be implemented using cardStyleInterpolator for stack navigator or custom transition configurations. This involves defining animation timing, interpolation, and gesture handling for smooth screen transitions.
What are navigation middlewares and when are they used?
Navigation middlewares intercept and modify navigation actions before they're processed. They're useful for logging, analytics, validation, or implementing complex navigation patterns that require custom logic or side effects.
How do you handle deep linking with parameters?
Deep linking with parameters requires proper linking configuration with parameter extraction from URLs, parameter validation, and state restoration. Implementation includes handling both universal links and custom schemes with proper parameter parsing.
What are the strategies for handling navigation performance?
Navigation performance optimization includes: 1) Screen preloading, 2) Lazy loading screens, 3) Minimizing re-renders during navigation, 4) Proper use of useMemo and useCallback for navigation callbacks, 5) Optimizing header/tab bar updates.
How do you implement navigation testing?
Navigation testing involves mocking navigation props, simulating navigation actions, testing deep linking handling, and verifying navigation state changes. Tools include @testing-library/react-native and jest-native for comprehensive testing.
What is the role of linking configuration in React Navigation?
Linking configuration defines URL pattern matching for deep links, including parameter extraction and screen mapping. It supports both universal links and custom URL schemes, enabling proper routing of external and internal navigation.
How do you implement complex navigation patterns?
Complex navigation patterns involve combining multiple navigators, handling nested navigation state, implementing custom transitions, and managing navigation lifecycles. Examples include multi-level drawers, modal stacks, and split-view navigation.
What are the approaches for handling navigation state restoration?
State restoration involves persisting navigation state, handling deep links, managing authentication state, and implementing proper error recovery. Considerations include partial state restoration, state validation, and handling version changes.
How do you implement custom navigator components?
Custom navigators require implementing core navigation logic, gesture handling, transition animations, and proper integration with React Navigation's infrastructure. Includes managing navigation state, screen lifecycle, and custom events.
What are the strategies for navigation in large-scale applications?
Large-scale navigation involves modular navigation configuration, code splitting, proper type definitions, state management integration, and performance optimization. Includes handling deep linking, state persistence, and complex navigation patterns.
How do you handle navigation in offline-first applications?
Offline navigation requires state persistence, queue management for navigation actions, proper error handling, and state synchronization upon reconnection. Includes handling deep links and maintaining navigation state consistency.
What are the approaches for handling navigation in multi-window applications?
Multi-window navigation involves managing separate navigation states, synchronizing navigation between windows, handling window lifecycle events, and maintaining consistent navigation state across windows.
How do you implement navigation analytics and tracking?
Navigation analytics involves tracking screen views, navigation patterns, user flows, and interaction metrics. Implementation includes middleware for analytics events, proper timing of tracking calls, and handling background/foreground transitions.
What are the strategies for handling navigation in AR/VR experiences?
AR/VR navigation requires custom transition animations, gesture handling for 3D space, maintaining spatial awareness, and proper integration with native AR/VR frameworks. Includes handling navigation in immersive modes.
How do you implement navigation for accessibility?
Accessible navigation includes proper focus management, screen reader support, gesture alternatives, and clear navigation announcements. Involves customizing navigation behavior for different accessibility needs and proper labeling.
What is the purpose of using React.memo?
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.
What is the importance of the FlatList component for performance?
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.
How does the React Native bridge affect performance?
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.
What is the role of Hermes in React Native 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.
How can you optimize image loading in React Native?
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.
What is the importance of useCallback in performance optimization?
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.
How does console.log affect performance in production?
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.
What is the purpose of useMemo?
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.
How can you reduce app bundle size?
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.
What are the benefits of using PureComponent?
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.
How do you optimize FlatList performance?
FlatList optimization includes: 1) Using getItemLayout to avoid measurement, 2) Implementing proper key extraction, 3) Using removeClippedSubviews, 4) Optimizing renderItem with memo, 5) Adjusting windowSize and maxToRenderPerBatch, 6) Implementing proper item height calculations.
What are the strategies for reducing bridge traffic?
Bridge traffic can be reduced by: 1) Batching updates, 2) Minimizing state updates, 3) Using native modules for heavy computations, 4) Implementing proper data serialization, 5) Using Hermes engine, 6) Optimizing image loading and processing.
How do you implement efficient animations?
Efficient animations involve: 1) Using native driver when possible, 2) Implementing proper interpolation, 3) Using layoutAnimation for simple layouts, 4) Optimizing gesture handling, 5) Managing animation memory usage, 6) Using proper timing functions.
What are the best practices for memory management?
Memory management includes: 1) Proper cleanup in useEffect, 2) Removing event listeners, 3) Clearing timeouts and intervals, 4) Implementing proper image caching, 5) Managing large data structures, 6) Monitoring memory leaks.
How do you optimize network requests?
Network optimization includes: 1) Implementing proper caching, 2) Using request batching, 3) Implementing retry logic, 4) Optimizing payload size, 5) Using proper compression, 6) Implementing offline support, 7) Managing concurrent requests.
What is the impact of JavaScript dependencies on performance?
Dependencies impact includes: 1) Bundle size increase, 2) Startup time effects, 3) Runtime performance overhead, 4) Memory usage implications, 5) Bridge traffic increase. Proper dependency management and auditing is crucial.
How do you implement efficient state management?
Efficient state management involves: 1) Proper state structure, 2) Minimizing state updates, 3) Using appropriate state management tools, 4) Implementing proper memoization, 5) Managing state persistence efficiently.
What are the strategies for reducing app startup time?
Startup optimization includes: 1) Using Hermes engine, 2) Implementing proper code splitting, 3) Optimizing native module initialization, 4) Managing asset loading, 5) Implementing proper splash screen, 6) Reducing initial bundle size.
How do you implement efficient layout calculations?
Layout optimization includes: 1) Using LayoutAnimation properly, 2) Minimizing layout depth, 3) Implementing proper flex layouts, 4) Managing dynamic layouts efficiently, 5) Using proper measurement techniques.
What are the techniques for profile and debug performance issues?
Profiling techniques include: 1) Using React DevTools, 2) Implementing performance monitoring, 3) Using native profiling tools, 4) Analyzing bridge traffic, 5) Monitoring memory usage, 6) Implementing proper logging.
How do you implement performance optimization for large-scale applications?
Large-scale optimization involves: 1) Implementing proper architecture, 2) Code splitting strategies, 3) Performance monitoring systems, 4) Efficient state management, 5) Proper resource management, 6) Optimization automation.
What are the strategies for optimizing native modules?
Native module optimization includes: 1) Proper thread management, 2) Efficient data serialization, 3) Batch processing implementation, 4) Memory management strategies, 5) Proper error handling, 6) Performance benchmarking.
How do you implement efficient data virtualization?
Data virtualization involves: 1) Implementing windowing techniques, 2) Managing data chunks, 3) Implementing efficient scrolling, 4) Memory management strategies, 5) Optimizing render performance, 6) Handling large datasets.
What are the approaches for optimizing offline-first applications?
Offline optimization includes: 1) Efficient data synchronization, 2) State persistence strategies, 3) Conflict resolution handling, 4) Resource management, 5) Background processing optimization, 6) Storage optimization.
How do you implement performance monitoring systems?
Performance monitoring includes: 1) Metric collection implementation, 2) Analysis system setup, 3) Alert mechanism creation, 4) Performance tracking automation, 5) Reporting system implementation, 6) Optimization feedback loops.
What are the strategies for optimizing AR/VR experiences?
AR/VR optimization includes: 1) Efficient render pipeline, 2) Asset management strategies, 3) Frame rate optimization, 4) Memory usage management, 5) Thread management, 6) Native integration optimization.
How do you implement performance testing automation?
Testing automation includes: 1) Performance benchmark setup, 2) Continuous monitoring implementation, 3) Regression testing strategies, 4) Automated optimization verification, 5) Performance metric tracking, 6) Test environment management.
What are the approaches for optimizing multi-window applications?
Multi-window optimization includes: 1) Resource sharing strategies, 2) State synchronization optimization, 3) Memory management approaches, 4) Process communication efficiency, 5) UI thread management, 6) Context switching optimization.
What is Platform.select() and how is it used?
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.
How do you create platform-specific file extensions?
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.
What is the purpose of the Platform.OS property?
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.
How do you handle platform-specific styles?
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.
What are platform-specific components in React Native?
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.
How do you handle platform-specific permissions?
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.
What is the difference between Android's back button and iOS's back gesture?
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.
How do you handle platform-specific fonts?
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.
What are the key differences in layout between iOS and Android?
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.
How do you handle platform-specific gestures?
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.
How do you implement platform-specific native modules?
Native modules require separate implementations in Swift/Objective-C for iOS and Java/Kotlin for Android. This includes proper method mapping, event handling, and data type conversion while maintaining a consistent JavaScript interface.
What are the differences in navigation patterns between iOS and Android?
iOS typically uses edge swipe gestures and navbar buttons, while Android uses the back button and different navigation patterns. Navigation libraries need platform-specific configuration for proper behavior and animations.
How do you handle platform-specific animations?
Animation implementations may need platform-specific tuning for timing, easing, and performance. Native drivers might work differently, and some animations may need platform-specific implementations for optimal performance.
What are the key differences in debugging between iOS and Android?
Debugging tools and processes differ between platforms. iOS uses Xcode debugging tools while Android uses Android Studio. Chrome Developer Tools work differently, and native debugging requires platform-specific approaches.
How do you handle platform-specific push notifications?
Push notifications require different setup and handling for APNs (iOS) and FCM (Android). This includes different configuration, payload structures, and handling mechanisms while maintaining a consistent app experience.
What are the differences in app lifecycle handling between platforms?
App lifecycle events and background handling differ between iOS and Android. This includes different background modes, state restoration, and process lifecycle management requiring platform-specific implementations.
How do you handle platform-specific storage mechanisms?
Storage mechanisms like AsyncStorage have platform-specific implementations and limitations. Secure storage, file system access, and data persistence require different approaches and configurations per platform.
What are the key differences in performance optimization between platforms?
Performance optimization requires platform-specific approaches for memory management, UI rendering, and native module optimization. Different profiling tools and optimization techniques are needed for each platform.
How do you handle platform-specific network security?
Network security configuration differs between platforms, including SSL pinning, network permissions, and security policies. Different configuration files and implementation approaches are needed for each platform.
What are the approaches for handling platform-specific biometric authentication?
Biometric authentication requires different implementations for Touch ID/Face ID (iOS) and Fingerprint/Face Unlock (Android). This includes different APIs, security models, and user experience considerations.
How do you implement complex platform-specific features?
Complex features often require deep platform integration, custom native modules, and platform-specific optimizations. This includes handling different APIs, lifecycle management, and maintaining consistent behavior across platforms.
What are the strategies for handling platform-specific hardware features?
Hardware feature access requires platform-specific implementations for cameras, sensors, Bluetooth, and other hardware components. This includes different APIs, permissions, and optimization strategies.
How do you implement platform-specific UI automation testing?
UI automation requires different tools and approaches (XCTest for iOS, Espresso for Android). This includes different test writing strategies, CI/CD integration, and handling platform-specific UI elements.
What are the approaches for handling platform-specific app extensions?
App extensions (widgets, share extensions, etc.) require platform-specific implementation and configuration. This includes different development approaches, data sharing mechanisms, and lifecycle management.
How do you implement platform-specific AR features?
AR features require platform-specific implementations using ARKit (iOS) and ARCore (Android). This includes different initialization, tracking, and rendering approaches while maintaining consistent AR experiences.
What are the strategies for handling platform-specific payment integration?
Payment integration requires platform-specific implementations for Apple Pay and Google Pay. This includes different APIs, security requirements, and user experience considerations while maintaining consistent payment flows.
How do you implement platform-specific background processing?
Background processing requires different implementations for iOS background modes and Android services. This includes handling different lifecycle events, scheduling mechanisms, and power management considerations.
What are the approaches for handling platform-specific accessibility?
Accessibility implementation requires platform-specific considerations for VoiceOver (iOS) and TalkBack (Android). This includes different markup, focus management, and gesture handling while maintaining consistent accessibility.
How do you implement platform-specific deep linking?
Deep linking requires platform-specific configuration for Universal Links (iOS) and App Links (Android). This includes different setup processes, validation requirements, and handling mechanisms.
What are the strategies for handling platform-specific app signing and deployment?
App signing and deployment differ significantly between iOS (certificates, provisioning profiles) and Android (keystore). This includes different build processes, signing mechanisms, and deployment procedures.
What is StyleSheet in React Native and why should you use it?
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.
How does Flexbox work in React Native?
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.
What are the differences between React Native styling and CSS?
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.
How do you handle dimensions in React Native?
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.
What is the purpose of the SafeAreaView component?
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.
How do you create responsive layouts in React Native?
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.
What are style arrays in React Native?
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.
How do you handle text styling in React Native?
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.
What is the difference between width/height and flex in layouts?
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.
How do you handle image sizing and scaling?
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.
How do you implement custom fonts in React Native?
Custom fonts require platform-specific setup: iOS needs font files added to the Xcode project and Info.plist, Android needs fonts in android/app/src/main/assets/fonts. React Native config needs updating, and linking may be required. Font names might differ between platforms.
How do you handle dynamic styling based on props or state?
Dynamic styling can be implemented using style arrays, conditional styles in objects, or dynamic style generation functions. StyleSheet.create should be used outside component render for performance. Consider memoization for complex style calculations.
What are the best practices for handling device orientation changes?
Orientation changes require responsive layouts using flex, Dimensions API updates handling, and potentially different layouts for portrait/landscape. useWindowDimensions hook helps track dimensions, and specific orientation styles may be needed.
How do you implement custom shadows across platforms?
Shadows require different implementations: iOS uses shadow* properties, Android uses elevation. Platform-specific shadow styles are needed for consistent appearance. Consider using libraries for cross-platform shadow implementation.
How do you handle keyboard avoidance in layouts?
KeyboardAvoidingView component with appropriate behavior prop ('height', 'position', 'padding') handles keyboard overlap. Platform-specific adjustments may be needed. Consider scroll view integration and input accessibility.
What are the approaches for implementing grid layouts?
Grid layouts can be implemented using FlatList with numColumns, flexbox with flex-wrap, or custom grid components. Consider performance for large grids, responsive behavior, and proper item sizing calculations.
How do you handle RTL (Right-to-Left) layouts?
RTL support requires proper use of start/end instead of left/right, handling text alignment, and considering layout direction. Use I18nManager for RTL control, and test layouts in both directions.
What are the strategies for handling different screen densities?
Screen density handling involves using density-independent pixels, proper image asset management (including @2x, @3x), and responsive design practices. Consider platform-specific density differences and testing on various devices.
How do you implement animated layouts?
Animated layouts use LayoutAnimation or Animated API. LayoutAnimation provides simple animations for layout changes. Complex animations might require Animated API with proper measurement and layout calculation.
What are the performance considerations for styling?
Style performance considerations include using StyleSheet.create, avoiding inline styles, minimizing style calculations in render, proper use of flex for layouts, and implementing efficient dynamic styling strategies.
How do you implement complex custom layouts?
Complex layouts require combination of flexbox, absolute positioning, proper nesting, and possibly custom native components. Consider performance implications, maintainability, and cross-platform consistency.
What are the approaches for implementing design systems?
Design systems implementation involves creating reusable components, centralized theme management, consistent spacing/typography systems, and proper component composition. Consider maintenance, scalability, and team collaboration.
How do you handle complex animation and gesture interactions?
Complex interactions require combination of Animated API, PanResponder, proper layout measurement, and performance optimization. Consider native driver usage, gesture handling, and proper cleanup of animations.
What are the strategies for implementing custom drawing and graphics?
Custom graphics require SVG implementation, canvas-like solutions, or native modules. Consider performance implications, platform differences, and proper integration with React Native's layout system.
How do you implement advanced responsive layouts?
Advanced responsive layouts involve dynamic layout switching, complex grid systems, proper breakpoint management, and orientation handling. Consider performance, maintainability, and testing across different devices.
What are the approaches for implementing custom transitions?
Custom transitions require understanding of the Animated API, proper timing functions, layout measurement, and platform-specific considerations. Consider performance, gesture integration, and proper cleanup.
How do you implement advanced theming systems?
Advanced theming involves dynamic theme switching, proper context usage, style generation systems, and efficient updates. Consider performance implications, maintainability, and proper typing support.
What are the strategies for implementing micro-interactions?
Micro-interactions require fine-tuned animations, proper gesture handling, and efficient state management. Consider performance, user feedback, and proper integration with the overall UX.
How do you implement custom layout engines?
Custom layout engines require understanding of native modules, layout calculation systems, and proper integration with React Native. Consider performance implications, maintenance complexity, and cross-platform support.
How do you make API calls in React Native?
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.
What is the useEffect hook's role in API calls?
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.
How do you handle API error states?
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.
What is the difference between GET and POST requests?
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.
How do you handle loading states during API calls?
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.
What is JSON and how is it used in API integration?
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.
How do you set headers in API requests?
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.
What is REST and why is it important?
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.
How do you handle API authentication?
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.
What are query parameters and how are they used?
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.
How do you implement API caching?
API caching can be implemented using in-memory caching, AsyncStorage, or specialized caching libraries. Consider cache invalidation strategies, TTL (Time To Live), and proper cache updates when data changes.
What are the best practices for handling offline data synchronization?
Offline sync requires local storage of data, queue management for offline actions, conflict resolution strategies, and proper sync when online. Consider using libraries like WatermelonDB or implementing custom sync logic.
How do you handle file uploads in React Native?
File uploads require proper multipart/form-data handling, progress tracking, chunked uploads for large files, and proper error handling. Consider platform-specific file access APIs and compression before upload.
What are the strategies for API request cancellation?
Request cancellation can be implemented using AbortController with fetch, or cancelToken with Axios. Important for preventing memory leaks and unnecessary updates when components unmount or dependencies change.
How do you handle API rate limiting?
Rate limiting requires implementing request queuing, proper error handling for rate limit responses, exponential backoff for retries, and tracking request counts. Consider using libraries for request throttling.
What are Websockets and how are they implemented?
WebSockets provide real-time bidirectional communication. Implementation involves socket connection management, proper event handling, reconnection strategies, and state management for real-time data.
How do you handle API versioning in your app?
API versioning strategies include URL versioning, header versioning, or content negotiation. Apps should handle different API versions gracefully, possibly supporting multiple versions during transition periods.
What are the security considerations for API integration?
Security considerations include SSL/TLS, token management, certificate pinning, request/response encryption, and proper error handling. Avoid storing sensitive data in plain text and implement proper authentication flows.
How do you handle API response compression?
Response compression involves proper handling of Content-Encoding headers, decompression of gzipped responses, and optimization of data transfer. Consider implementing compression for requests when appropriate.
What are the strategies for API request batching?
Request batching involves combining multiple requests into single requests, implementing proper request queuing, and handling responses efficiently. Consider trade-offs between reduced network calls and increased complexity.
How do you implement GraphQL in React Native?
GraphQL implementation involves setting up Apollo Client or similar libraries, implementing proper cache management, handling queries/mutations, and managing local state. Consider code generation and type safety.
What are the approaches for implementing real-time data synchronization?
Real-time sync involves WebSockets, server-sent events, or polling strategies. Consider optimistic updates, conflict resolution, proper error handling, and state management for real-time data.
How do you handle complex data transformations?
Complex transformations require proper data normalization, efficient algorithms, consideration of performance impact, and possibly using web workers. Consider implementing caching for expensive transformations.
What are the strategies for handling large-scale API architectures?
Large-scale architectures require proper service organization, API gateway implementation, microservices integration, and efficient data flow management. Consider implementing proper error boundaries and fallback strategies.
How do you implement efficient pagination?
Efficient pagination involves cursor-based or offset-based strategies, proper cache management, infinite scroll implementation, and optimized data fetching. Consider implementing virtual scrolling for large datasets.
What are the approaches for implementing API middleware?
API middleware implementation involves request/response interceptors, logging, analytics tracking, error handling, and authentication management. Consider implementing proper middleware composition and order.
How do you implement advanced caching strategies?
Advanced caching involves implementing stale-while-revalidate, cache-then-network, and proper cache invalidation strategies. Consider implementing proper cache hierarchies and optimization techniques.
What are the strategies for handling complex authentication flows?
Complex authentication involves OAuth flows, token refresh mechanisms, biometric authentication integration, and proper security measures. Consider implementing proper state management and error handling.
How do you implement API monitoring and analytics?
API monitoring involves implementing proper logging, performance tracking, error reporting, and usage analytics. Consider implementing proper monitoring infrastructure and alerting systems.
What are the approaches for handling API testing and mocking?
API testing involves implementing proper test coverage, mocking strategies, integration tests, and automated testing pipelines. Consider implementing proper test data management and CI/CD integration.
Stark.ai
Instant Interviews
