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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
