Native platforms

When developing with React Native, a solid understanding of the underlying native platforms—Android and iOS—is essential. React Native bridges the gap between JavaScript and native code, allowing you to create apps that leverage the full power of the underlying mobile operating systems. This guide provides an overview of the native platforms, tools, and best practices for working with Android, iOS, and native modules within the React Native ecosystem.

Android and Android Studio

Android Studio is Google’s official tool for Android development and is useful when building React Native apps—especially if you’re using the React Native CLI. It includes tools like the Android SDK, emulator, and debugger, and uses Gradle to handle builds and manage dependencies.

When your app needs custom native functionality, you’ll write it in Java or Kotlin—with Kotlin being the more modern choice for new projects. You don’t have to use Android Studio to write this code, but it helps with things like build settings, debugging, and running the emulator.

For most of your React Native code, you can stick to editors like VS Code—Android Studio is mainly needed for builds, emulators, and working with native Android code.

iOS and Xcode

Xcode is Apple’s official tool for iOS development and is required if you're using the React Native CLI to build and run iOS apps. It includes simulators, debugging tools, and everything needed to test and deploy on real devices. CocoaPods is the dependency manager used for native iOS libraries, and it runs through Xcode’s build process.

If your app requires native iOS code, you’ll write it in Objective-C or Swift—with Swift being the preferred language for new projects. You don’t need to write this code inside Xcode, but Xcode makes it easier to build, test, and debug iOS-specific features.

Like with Android, most of your day-to-day development can happen in VS Code—Xcode is mainly there for builds, simulators, and any native iOS integrations.

Native modules

Native Modules in React Native let you extend the framework by writing native code for Android and iOS. This is especially useful when you need to access platform-specific features or integrate third-party SDKs that aren’t available in JavaScript.

Key Concepts:

• Bridging (Legacy Architecture): Traditionally, native modules use a bridge that lets JavaScript call into native code and vice versa. You define interfaces and use asynchronous communication over this bridge. This is still supported but is being phased out in favor of the new architecture.

• TurboModules (New Architecture): Introduced in 2022, the New Architecture includes TurboModules and the JSI (JavaScript Interface). TurboModules provide better performance, type safety, and support for synchronous methods. They remove the bottleneck of the legacy bridge and are automatically registered.

• Creating Native Modules: You write Java or Kotlin for Android, and Objective-C or Swift for iOS—preferably using Kotlin and Swift for new modules. The native code is exposed to JavaScript either through the legacy bridge or as TurboModules under the new architecture.

• Dependency Management: Native modules often rely on native libraries managed with Gradle (Android) or CocoaPods (iOS), which are essential for resolving and linking dependencies.

• Community Libraries: Many common features are already available as open-source libraries—often updated to support the new architecture. Examples include camera access, biometrics, file storage, and push notifications.

Challenges:

• Platform-Specific Code: Native modules require knowledge of both Android and iOS development. You'll likely implement the same functionality twice—once per platform.

• Testing and Debugging: Debugging native code can be more involved than JavaScript. You'll use tools like Logcat (Android) and Xcode’s Console and Instruments (iOS). TurboModules offer performance improvements but may introduce complexity during setup and migration.

Guidelines

When building React Native apps, it’s important to follow the design rules for both iOS and Android. This helps your app feel natural to users and work well across different devices. Each platform has its own way of doing things, so it’s good to know the basics.

iOS Guidelines

Apple’s Human Interface Guidelines focus on making apps clear, simple to use, and content-focused.

Main ideas:

• Clear design: Text should be easy to read, and buttons and icons should be easy to understand.

• Let content stand out: The design shouldn’t distract from what the user is there to do.

• Use motion wisely: Animations should help explain what’s happening in the app.

Things to keep in mind:

• Use iOS-style navigation like tab bars and modals.

• Make sure touch areas are at least 44x44 points so they’re easy to tap.

• Support common gestures like swiping and pinching.

• Allow users to adjust text size.

• Make sure content isn’t hidden by things like notches or corners of the screen.

Android Guidelines

Android Design Guides are all about clear layouts, strong visuals, and making sure apps work well on many kinds of devices.

Main ideas:

• Use layers and shadows: Help users see what’s important and how things are organized.

• Strong visuals: Use clear colors, readable text, and simple layouts to show the purpose of each screen.

• Helpful animations: Movements should make the app feel smooth and help users understand actions.

Things to keep in mind:

• Use navigation like bottom tabs or side drawers, and make sure the Android back button works as expected.

• Touch targets should be at least 48x48dp so they’re easy to tap.

• Follow font size guidelines for readability.

• Design for all screen sizes—from small phones to large tablets and foldables.

• Make sure your app works with Android’s theme settings, like dark mode

Cross-Platform Consistency

While it’s important to follow the guidelines of each platform, also strive for a consistent brand and experience across iOS and Android. This means balancing platform-specific conventions with your app’s unique identity. By respecting the design principles of both platforms, you can create a React Native app that feels native to each environment while maintaining a unified user experience.