DEV Community: Himanshu Sharma

A Guide to React Native Expo and Bare Bone Projects

Himanshu Sharma — Thu, 26 Sep 2024 13:36:58 +0000

React Native is a powerful framework for building mobile applications using JavaScript and React. It offers two main ways to start a project: using Expo or starting with a Bare Bone project. While both approaches can lead to a successful mobile app, they have different advantages, disadvantages, and use cases.

In this blog, we'll explore React Native Expo and Bare Bone projects, how to get started with each, and when to use one over the other.

What is Expo?

Expo is a framework and platform for React Native that allows developers to build native iOS and Android apps using JavaScript. It simplifies a lot of the underlying setup and offers a rich ecosystem of tools and services.

Key Features of Expo:

Out-of-the-box features: It includes a large number of pre-built components, such as camera access, push notifications, and file system management.
Zero build configuration: You don’t need to install Android Studio or Xcode to build and test apps. Expo provides a build service that can create the final binaries for both platforms.
Faster development cycle: You can preview changes instantly with Expo Go, a mobile app that helps you run your code directly on your device.

Setting Up an Expo Project

Install Expo CLI: First, install the Expo CLI globally on your machine:

npm install -g expo-cli

2.Create an Expo Project: Use the following command to create a new Expo project:

expo init MyExpoApp

You'll be prompted to choose between different project templates (blank, tab navigation, or managed workflow with TypeScript). Select the one that fits your needs.

3.Start the Development Server: Navigate into your project folder and run:

cd MyExpoApp
expo start

You can then open the Expo Go app on your iOS or Android device, scan the QR code, and immediately see the app running on your phone. This allows for a fast and efficient development workflow.

Benefits of Expo:

1. Ease of Use: Expo abstracts much of the native complexity, making it easier for beginners to start building mobile apps.
2. Cross-Platform Development: The same code works on both iOS and Android with minimal adjustments.
3. Quick Setup: No need to deal with Xcode, Android Studio, or any complex configurations to get started.

Limitations of Expo:

Limited Native Customization: If you need to implement custom native modules, Expo might not support them directly unless you "eject" to a bare project.
App Size: Expo apps are generally larger because they include all the native modules, even if you don’t use them.
Dependency on Expo: You rely on the Expo SDK and updates, which may sometimes limit flexibility in using the latest native features.

What is a Bare Bone React Native Project?

A Bare Bone React Native project is a more traditional approach where you have full control over the native code for both Android and iOS. Unlike Expo, a bare project doesn't abstract native configurations, meaning you'll need to manage build tools like Xcode and Android Studio yourself.

This approach is highly customizable and is ideal when you need direct access to native code or custom libraries.

Setting Up a Bare Bone Project

Install React Native CLI: First, ensure you have the React Native CLI installed globally:

npm install -g react-native-cli

2.Create a Bare React Native Project: You can create a new project using the React Native CLI:

npx react-native init MyBareApp

3.Running the App:

For iOS: You need to have Xcode installed. To run the app:

npx react-native run-ios

For Android: You need Android Studio set up. To run the app:

npx react-native run-android

This will build the app natively on your machine and allow you to test it on a simulator or device.

Benefits of a Bare Bone Project:

Full Customization: You have full access to native code, which is ideal for apps requiring custom native modules or integrations with native features.
Smaller App Size: Since you control which libraries are included, your app can be leaner, including only the native code necessary for your functionality.
More Flexibility: You can install and use any React Native or native library, even if it's not supported by Expo.

Limitations of a Bare Bone Project:

Complex Setup: You'll need to manage separate build environments for iOS and Android, which may require tools like Xcode and Android Studio.
Longer Build Times: Because you're compiling the code natively, you might experience longer build and iteration times compared to Expo’s hot reload.
More Maintenance: You'll be responsible for updating native dependencies and keeping your project in sync with new versions of React Native.

When to Use Expo vs. Bare Bone

Use Expo If:
- You want a fast, easy setup with minimal native configuration.
- You're building an MVP (Minimum Viable Product) or a prototype.
- Your app's functionality fits within the native modules provided by Expo.
- You want to avoid managing native build tools (Xcode, Android Studio).
Use a Bare Bone Project If:
- You need full access to native APIs and want to integrate custom native code.
- Your app requires a small footprint and needs to avoid unnecessary libraries.
- You plan to maintain the app long-term and need full control over dependencies.
- You’re working on an enterprise-level app with specific custom requirements.

Ejecting from Expo

If you start with Expo and eventually need more control over native code, Expo provides an option to "eject" to a bare React Native project.

Run the following command to eject:

expo eject

This will give you access to native code but will also require you to manage native dependencies moving forward, like any other bare React Native project.

Conclusion
Choosing between Expo and a Bare Bone React Native project depends on your app's requirements and your familiarity with native development tools. Expo is perfect for quickly starting a project with a great development experience and lots of pre-built functionality, while a bare project gives you full control over the native code and app customization.

When starting your next React Native project, consider your specific needs—Expo for simplicity and quick setup, or a bare project for flexibility and long-term customization. Both approaches are valid, and each shines in different scenarios.

Happy coding with React Native!

How to Create a React Native SDK: A Comprehensive Guide

Himanshu Sharma — Thu, 26 Sep 2024 13:15:36 +0000

React Native is a popular framework for building mobile applications, combining the best parts of native development with the flexibility of React. As React Native grows in popularity, the need for reusable libraries or SDKs (Software Development Kits) becomes important for developers looking to share functionality across multiple applications. In this blog, we'll explore the steps involved in creating a React Native SDK, from setting up the project to distributing it for others to use.

Why Create an SDK for React Native?
An SDK allows developers to encapsulate functionality into reusable packages that can be shared across multiple applications. This reduces redundancy and ensures that updates or changes to core logic can be implemented across all applications seamlessly. Use cases for React Native SDKs include:

Handling payments
Implementing analytics and tracking
Managing authentication
Abstracting complex business logic or UI components

Steps to Create a React Native SDK

Set Up the Project

Before you can create an SDK, you need to set up a React Native project that will serve as the foundation for your SDK.

1.1. Install React Native CLI
First, ensure that you have React Native CLI installed:

npm install -g react-native-cli

1.2. Create a New React Native Project
Create a new project where you’ll develop your SDK:

npx react-native init MySDK

Navigate to your project directory:

cd MySDK

2. Setup TypeScript (Optional but Recommended)
TypeScript helps with type safety and improves the development experience. To add TypeScript to your React Native SDK:

npm install --save-dev typescript @types/react @types/react-native

Then rename your .js files to .ts or .tsx and create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules"]
}

3. Create Reusable Modules
The core of your SDK will be reusable components or modules. Depending on what functionality your SDK provides, you may need to create native modules (for Android/iOS) or JavaScript components.
3.1. Create a Native Module
React Native allows you to write native code for Android and iOS that interacts with JavaScript. Let’s create a simple native module.

iOS
Create a new Objective-C or Swift file in the ios/ directory (for this example, we’ll use Objective-C):

Go to ios/MySDK and add a new file called MyModule.m:

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(MyModule, NSObject)
RCT_EXTERN_METHOD(sayHello:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
@end

2.In MyModule.swift, implement the native functionality:

@objc(MyModule)
class MyModule: NSObject {
  @objc
  func sayHello(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    resolve("Hello from iOS Native Module!")
  }
}

For Android, you will create a new Java/Kotlin module:

1.Create a new file under android/app/src/main/java/com/mysdk/ called MyModule.java:

package com.mysdk;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class MyModule extends ReactContextBaseJavaModule {

    public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyModule";
    }

    @ReactMethod
    public void sayHello(Promise promise) {
        promise.resolve("Hello from Android Native Module!");
    }
}

3.2. Export Native Modules to JavaScript
You’ll need to bridge your native code to JavaScript.

In index.js, export the native module like this:

import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

export const sayHello = async () => {
  try {
    const message = await MyModule.sayHello();
    return message;
  } catch (error) {
    console.error(error);
  }
};

4. Create JavaScript Components
Not all functionality in your SDK needs to be written in native code. You can also create pure JavaScript components or hooks.

Here’s an example of a simple reusable button component:

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const MyButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007BFF',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    textAlign: 'center',
  },
});

export default MyButton;

5. Publish Your SDK
Once your SDK is ready, it’s time to package and distribute it. You can publish it to npm so other developers can install and use it.

5.1. Prepare for Publishing
Update your package.json to include the necessary information:

{
  "name": "my-react-native-sdk",
  "version": "1.0.0",
  "main": "index.js",
  "react-native": "index.js",
  "author": "Your Name",
  "license": "MIT"
}

Make sure your .npmignore file excludes unnecessary files like build artifacts and node_modules.

5.2. Publish to npm
To publish your SDK, first login to npm:

npm login

Then publish your package:

npm publish

5.3. Install in Another Project
Once published, your SDK can be installed in any React Native project:

npm install my-react-native-sdk

Developers can then use it in their applications:

import { sayHello } from 'my-react-native-sdk';

const App = () => {
  useEffect(() => {
    sayHello().then(message => console.log(message));
  }, []);

  return <Text>Check the console for the message!</Text>;
};

6. Testing and Documentation
Testing your SDK across different environments (iOS, Android) is crucial. Use a combination of manual testing and automated tests (e.g., Jest, Detox) to ensure it works as expected.

In addition, providing comprehensive documentation is key to making your SDK easy for others to use. Document your SDK features, APIs, and provide examples.

Conclusion
Creating a React Native SDK involves setting up reusable components or modules that can be shared across multiple applications. By combining native code with JavaScript components, you can create a flexible and powerful SDK that serves different needs.

Whether you're creating a payment gateway SDK, analytics tool, or authentication system, following the steps outlined in this blog will help you build and distribute a React Native SDK effectively.