Key Takeaways

• React Native enables cross-platform mobile app development using JavaScript and React.
• Choosing React Native without Expo offers greater flexibility and control over native code.
• Setting up a bare React Native project involves configuring native environments for iOS and Android.
• Understanding the differences between React Native CLI and Expo CLI is crucial for project setup.
• Migrating from Expo to bare React Native requires careful planning and execution.
• Adhering to best practices ensures efficient development and maintenance of React Native applications.

Harness the Power of React Native without Expo: A Comprehensive Guide

Overview of React Native

React Native has revolutionised the mobile app development landscape by allowing developers to build cross-platform apps using React and JavaScript. This technology is favoured by industry giants like Meta, Microsoft, and Shopify, who leverage it for shared codebases and swift iteration cycles. By utilising React Native, companies can maintain a single codebase while deploying to both iOS and Android platforms.

Developing React Native applications without Expo, often referred to as the bare workflow, is a professional approach that offers greater flexibility and control over your project. This is the preferred method for agencies and clients who require deep customisation, access to specific native features, and direct control over the build process.

In this guide, our primary focus is on React Native without Expo. Opting for this approach gives developers maximum control over native code and build configurations, essential for tailor-made solutions in complex projects.

Alternatives to Expo

For developers seeking enhanced customisation, alternatives to Expo include the React Native CLI for a purely bare setup and Expo’s Bare Workflow for a semi-managed environment. These options offer varying degrees of control over the development environment (ShiftAsia, Godel Technologies).

Understanding React Native and Expo

What is React Native?

React Native is a framework designed for building native apps using JavaScript. This technology bridges the gap between web development and mobile app platforms like iOS and Android, facilitating the creation of UI components with a single codebase (Godel Technologies).

Introduction to Expo

Expo provides an open-source platform layered atop React Native, enhancing the development process with a streamlined setup and a rich set of integrated services and SDKs. The Managed workflow simplifies the initial setup, allowing for rapid development cycles and easy implementation of features such as push notifications and OTA updates (Utilities Online, Godel Technologies, Dev.to).

Comparison Between Expo and Bare React Native

• Expo Managed Workflow: Offers ease of use with minimal setup requirements, ideal for faster project onboarding. However, it limits customisation of native modules unless opting for Development Builds or ejecting (Utilities Online, Dev.to).
• Bare React Native (No Expo): Provides full access to the native project environment, allowing for extensive customisation and optimal performance tuning. Although it involves higher complexity in setup and maintenance, it offers unparalleled flexibility (ShiftAsia, Godel Technologies).
• Hybrid Approach: Utilising Expo Development Builds can integrate custom native modules while retaining many benefits of the Expo ecosystem (ShiftAsia).

Reasons to Choose React Native without Expo

While Expo’s managed workflow is excellent for rapid prototyping and simple apps, it abstracts away native code and can become a limitation for complex projects. Opting for the React Native CLI (the bare workflow) provides several key benefits:

• Full Native Control: You have direct access to the android/ and ios/ folders, allowing you to modify native code, add custom native modules, and integrate third-party libraries that are not supported by Expo.

• Customisation: Agencies can implement highly customised features, fine-tune performance, and configure every aspect of the build pipeline, from code signing to app flavours.

• Reduced App Size: Because you only include the native dependencies your app needs, the final binary size can be significantly smaller compared to Expo’s managed workflow, which includes a large number of pre-built APIs.

• CI/CD Integration: The bare workflow is more straightforward to integrate with robust Continuous Integration/Continuous Deployment (CI/CD) pipelines using tools like Fastlane or Bitrise.

• Greater Flexibility: Developers can directly modify Xcode and Gradle settings, incorporate custom native code, and customise build pipelines to meet specific enterprise needs. This level of control is crucial for projects with unique performance and security requirements.

• Performance Optimisations for Complex Applications: Optimise performance by customising the Hermes engine settings, employing ProGuard/R8 optimisations, and selectively including libraries to reduce the app size and improve startup time.

• Avoiding Expo’s Limitations and Dependencies: Operating without Expo eliminates dependencies on the Expo SDK release cycles and managed services, providing autonomy over when and how to update the application framework and integrate new features .

Setting Up Bare React Native

Definition

A bare React Native setup mirrors a traditional native development environment, using the React Native CLI, Android Studio, and Xcode to manage platform-specific projects. This setup bypasses Expo’s managed environment, offering developers complete control over the native configurations.

Step-by-Step Guide to Initialising a Bare React Native Project

1. Prerequisites Installation: Install critical development tools like Node.js (LTS version), Watchman (for macOS users), and Java 17 for Android development. Set up Android Studio SDKs and configure the Android environment, along with Xcode and CocoaPods for iOS development. Make sure Android emulators or iOS Simulator are enabled for testing. Learn more.
2. Create the Project: Use the command: npx react-native@latest init MyApp --template react-native-template-typescript.
3. iOS Setup: Navigate to the iOS directorycd ios && pod install && cd .., then open ios/MyApp.xcworkspace In Xcode to configure the app’s signing and schemes.
4. Android Setup: Ensure ANDROID_HOME that the Java toolchain is correctly configured. Open the android/ folder in Android Studio to synchronise the Gradle settings.
5. Running the Application: Launch the app on iOSnpx react-native run-ios, or on Android with npx react-native run-android.

Project Structure Tips

Create a A A src directory to house the application code, organising it into feature modules. Isolate native code in the ios/ and android/ directories. Centralise environment variables with tools like react-native-config and ensure that secrets are stored securely outside the source code.

Managing Native Code and Integrations

Opt for libraries that support autolinking and follow best practices for TurboModules and the new React Native architecture when developing custom modules. Utilise CocoaPods post_install hooks and adjust Gradle build types/flavours for managing different build environments. Document all integration steps in the project’s README to minimise dependencies on individual developers’ expertise.

React Native CLI Setup

Introduction to React Native CLI

The React Native CLI is a command-line utility that lays the foundation for React Native projects, interfacing directly with Metro bundler and native build tools, providing a streamlined workflow without the need for Expo’s abstraction.

Installation and Configuration

Initialise React Native projects using the npx command, which avoids the need for global installations and ensures the use of the latest version available: npx react-native@latest init .... Set up development environments by configuring Android Studio SDKs, enabling emulators, and preparing the Gradle JDK. On macOS, install CocoaPods and manage Xcode signing settings to complete the iOS configuration.

Differences Between React Native CLI Setup and Expo CLI

• Expo CLI/Managed Workflow: Expo CLI requires minimal native setup and offers instant testing capabilities on physical devices via Expo Go. However, it imposes constraints on SDK customisation and native module integration.
• React Native CLI: Allows extensive control over native modules and configurations, requiring manual setup of development toolchains. Unlike with Expo Go, building and testing native changes are necessary, though this provides unlimited access to native functionalities.

Common Commands and Workflows

• Starting the Metro Bundler: npx react-native start
• Launching Applications:
  • On iOS: npx react-native run-ios
  • On Android: npx react-native run-android
• Linking Dependencies: Autolinking simplifies the process, but manual execution of pod install For iOS or a Gradle synchronisation for Android may be necessary when adding new libraries.
• Releasing Applications: Utilise native build pipelines such as Xcode Archive/TestFlight for iOS and Gradle Assemble/Upload for Android. Integration of continuous integration tools like Fastlane or GitHub Actions can automate builds and deployments, further streamlining the release process.

Migrating from Expo to Bare React Native

Considerations Before Migrating

Before moving away from Expo, inventory all uses of the Expo SDK and assess the feasibility of replacing them with native or other third-party alternatives. Evaluate whether Expo Development Builds, which allow some custom native integration, might meet the needs of your project without fully migrating. Additionally, plan for the infrastructure and processes required for building, signing, and deploying apps previously managed by Expo’s EAS services.

Step-by-Step Migration Process

1. Audit Dependencies: Catalogue all expo-* packages, configuration plugins, and instances where Expo APIs are employed.
2. Choose a Migration Path:
   • Hybrid Approach: If retaining some Expo benefits is desirable, consider using Expo Development Builds with added custom native modules.
   • Full Migration to Bare React Native: If complete independence from Expo is preferred, eject from the managed workflow or transition to a bare setup, removing all Expo-specific packages and configurations.
3. Initialising a Bare Project or Ejecting: Start a new React Native project using the CLI and gradually move existing code over, or utilise Expo’s tools to help transition from a managed to a bare workflow. Adjust configuration files such as app.json or app.config.js to their native counterparts, Info.plist for iOS and AndroidManifest.xml for Android.
4. Replace Expo APIs: Identify suitable replacements for Expo APIs, such as using react-native-permissions for permissions management, react-native-push-notification or Firebase for notifications, react-native-image-picker for media selection, and react-native-geolocation-service for location services. Further, native modules may also be developed to fulfil specific functionalities not covered by existing libraries.
5. Configure Native Projects:
   • iOS: Manage CocoaPod dependencies, set up necessary app capabilities like background modes and notifications, and configure signing certificates.
   • Android: Adjust Gradle dependencies, set permissions in AndroidManifest.xml, and integrate necessary Kotlin or Java modules.
6. Validating Builds: Thoroughly test the application on physical devices and emulators to ensure stability and functionality. Additionally, set up continuous integration and deployment pipelines to automate build and release processes, and prepare app store assets and signing credentials for submission.

Post-Migration Handling

To maintain consistency and stability post-migration, lock down versions of dependencies in Podfile.lock and use Gradle version catalogues. Document all steps required for manual integration to reduce reliance on specific team members’ knowledge and expertise.

Troubleshooting Common Issues

• Build Failures: Align versions of React Native, the Hermes engine, Android Gradle Plugin, and Xcode to resolve issues related to SDK version mismatches. Troubleshoot CocoaPods or Java version discrepancies to address build errors.
• Missing Permissions or Credentials: After removing dependencies on Expo, explicitly configure Info.plist on iOS and AndroidManifest.xml on Android to include required permissions and app entitlements.
• Autolinking Gaps: Double-check Podspec files and Gradle configurations for any mismatches, and run pod install or clean project caches to fix linking issues.

Best Practices for Developing React Native without Expo

Managing Dependencies and Updates

Stay informed about updates to React Native by regularly reviewing official release notes. Test new versions and major changes on separate branches to ensure compatibility with existing code before merging into the main project. Opt for stable, well-maintained libraries and pin versions to avoid unexpected updates. Use tools like Renovate or Dependabot to automate dependency management and keep your project current with minimal manual intervention. Discover more.

Performance Optimization

Enable the Hermes JavaScript engine to enhance performance and reduce the size of your application. As Fabric and TurboModules reach stable release phases within the React Native ecosystem, start integrating them into your projects to leverage their performance improvements. Split your JavaScript bundle to load code asynchronously and lazily load screens that are not critical to the initial user experience. Memoise resource-heavy components to prevent unnecessary re-renders and keep your app responsive. Learn how.

Ensuring Cross-Platform Compatibility

Conduct frequent tests on both iOS and Android platforms to catch and fix platform-specific issues early. Adjust app designs to follow platform-specific guidelines where appropriate to maintain a native look and feel. Implement feature flags judiciously to manage experimental features and use platform-specific file extensions (such as .ios.tsx or .android.tsxto organise code that diverges across platforms.

Utilising Community Resources and Libraries

Engage with the broader React Native community by attending conferences, participating in forums, and contributing to open-source projects. Take advantage of established libraries like React Navigation for routing, Reanimated for complex animations, and React Native Gesture Handler for touch interactions. Regularly compare the benefits and drawbacks of using Expo versus bare React Native setups to stay informed about the best tools and practices for your specific project needs.

Encouragement for Developers

Every app development project has unique requirements that may benefit from different aspects of the React Native ecosystem. We encourage developers to begin with a capability matrix to assess the features and integrations that are crucial for their app. Depending on the level of customisation and control needed, either a fully bare setup or a hybrid approach using Expo Development Builds may provide the optimal path forward.

Whatever choice you make, React Native offers a flexible and powerful framework for building high-quality, native apps. As the ecosystem continues to evolve, keep exploring new tools and techniques that can enhance your app’s performance, maintainability, and user experience.

Additional Resources

For further reading and more detailed guides on both bare React Native setups and using Expo tools, please refer to the following resources:

• React Native Official Documentation – Comprehensive setup guides and API documentation.
• Expo Documentation – Instructions on using Expo Managed workflows and integrating Expo Development Builds.
• Awesome React Native – An “awesome” type curated list of React Native components, news, tools, and learning material.
• React Native Radio Podcast – Regular podcasts featuring experts discussing trends, features, and challenges in the React Native world.

By staying engaged with both the documentation and the community, developers can keep their skills sharp and their projects aligned with the latest best practices in React Native development. Whether you choose to work with Expo or without it, the wealth of resources available ensures you have the support needed to build exceptional mobile applications.

Conclusion

Choosing between React Native with or without Expo involves weighing the balance of ease of use against the need for direct control over the native environment. While Expo offers a streamlined, managed experience with quick setup and easy updates, a bare React setup provides complete freedom to integrate any native module, customise build configurations, and optimise the app to the finest detail.

As you consider your project’s requirements, team skills, and timeline, use this guide to evaluate the best approach for your app development process. By understanding the trade-offs and exploring the options available, you can make an informed decision that aligns with your goals and resources.

Frequently Asked Questions