React Native has revolutionized mobile app development. By enabling developers to write a single codebase that works for both iOS and Android, it has saved time, effort, and resources. As of 2024, about 42% of developers worldwide prefer React Native for mobile app development, with companies like Facebook, Instagram, and Airbnb using it for their apps.
While Expo makes getting started with React Native easier, many developers prefer React Native CLI for more flexibility, particularly when they need custom native code or complex configurations. Expo abstracts away a lot of the native code, which can be helpful for simple projects but becomes a limitation when you want to extend the app’s functionality with custom components or access device-specific features.
In this guide, we’ll walk you through the steps of creating a React Native app without using Expo. You’ll learn how to set up your development environment, install React Native CLI, and create your first React Native project. With this approach, you’ll have full control over your app and its features.
Setting Up Your Development Environment
Before jumping into creating a React Native app, the first step is to set up your development environment. This means installing the necessary tools and software on your computer to allow you to build and test your app.
# What You’ll Need
To get started with React Native development, you’ll need the following tools:
1. Node.js: React Native relies on Node.js, which is a runtime environment for JavaScript. It enables you to use JavaScript code on both the client and the server. You’ll also need npm (Node Package Manager) to install libraries and manage dependencies in your project.
2. npm or Yarn: These are package managers that help you install libraries and dependencies you need to build your React Native app. Both npm and Yarn are interchangeable, but Yarn is slightly faster and has some additional features.
3. Java Development Kit (JDK): If you’re targeting Android devices, you need the JDK to compile your app. The JDK provides the tools needed for compiling and building Android apps.
4. Android Studio: Android Studio is the official IDE for Android app development. It includes an Android emulator, which allows you to run your app on a virtual device. Android Studio is also necessary for configuring the Android SDK, which React Native requires to build Android apps.
5. Xcode (for macOS users): For iOS development, Xcode is a must-have tool. It provides all the tools you need to build iOS apps, including the iOS simulator, which lets you run your app on a virtual iPhone.
# Installing the Necessary Tools
Follow these steps to install the tools you need:
1. Install Node.js:
- Download and install the latest version of Node.js from the official website.
- This installation also includes npm, which you’ll need for managing your project dependencies.
After installing, check if it’s installed correctly by running the following commands:
bash
node -v npm -v
2. Install JDK:
- You can download the JDK from Oracle’s official website here. Make sure to download the version that corresponds to your operating system.
- After installing the JDK, set the JAVA_HOME environment variable to point to the directory where the JDK is installed. This is crucial for React Native to find the necessary tools to build Android apps.
3. Install Android Studio:
- Download Android Studio from the official site.
- During the installation, make sure to select options to install the Android SDK and Android Virtual Device (AVD). These are necessary for building Android apps and running them in an emulator.
4. Install Xcode (for macOS users):
- For macOS users, download Xcode from the Mac App Store. Xcode includes the iOS simulator, which is essential for testing iOS apps without needing a physical iPhone.
Once all tools are installed, open a terminal and run the following commands to check if everything is set up:
- node -v to check Node.js version.
- npm -v to check npm version.
- java -version to check JDK version.
- adb devices to check the Android SDK setup.
If everything is working, you’re ready to move to the next step!
Installing React Native CLI
The React Native CLI is the command-line interface used to create and manage your React Native projects. It gives you full control over your app’s configuration and native code, which is useful when you need advanced features.
# Why React Native CLI Over Expo?
While Expo is perfect for beginners or small projects that don’t require custom native code, React Native CLI provides greater flexibility. With React Native CLI, you can add custom native modules, access more device features, and configure your app in any way you want. It’s the go-to option for developers who want to have full control over their project’s build process and native functionality.
# How to Install React Native CLI?
To install React Native CLI globally, follow these steps:
1. Open your terminal or command prompt.
Run the following command:
bash
npm install -g react-native-cli
Alternatively, you can use Yarn:
bash
yarn global add react-native-cli
2. After the installation is complete, verify that React Native CLI is installed by running:
bash
react-native --version
3. Once you see the version of React Native CLI printed in the terminal, you know the installation was successful. You’re now ready to create your first React Native app without Expo.
Creating a New React Native Project
Now that React Native CLI is installed, let’s create your very first React Native project. This is a simple process, and React Native CLI will generate all the necessary files for you.
# Starting a New Project
To create a new project, open your terminal and run the following command:
bash
npx react-native init MyNewApp
In this command:
- npx ensures that you’re using the latest version of React Native.
- react-native init initializes a new React Native project.
- MyNewApp is the name of your project. You can replace it with whatever name you prefer for your app.
After you run the command, React Native CLI will generate a new directory with the name MyNewApp, and it will create the following project structure:
- android/: Contains all Android-specific configurations and code.
- ios/: Contains all iOS-specific configurations and code.
- App.js: This is the entry point of your app where you’ll write the main code.
- index.js: Registers the root component for your app and starts the app.
- package.json: Manages your app’s dependencies and configurations.
# Understanding the Project Structure
As soon as the project is generated, open the project folder in your preferred code editor. Here’s a brief explanation of the main folders and files:
- android/: The folder where all Android-related code and settings are stored. You’ll mainly interact with this folder when building and testing for Android.
- ios/: The folder where all iOS-related code and settings are stored. You’ll mainly interact with this folder when building and testing for iOS.
- App.js: This is where you will write most of the UI-related code for your app. It’s the first file React Native looks at when starting the app.
- index.js: This file registers the main component of the app and is responsible for bootstrapping the app.
Once the project is created, you’ll be able to start building the user interface and logic of your app directly in App.js.
Running Your App on an Emulator/Simulator
Once you’ve set up your React Native project, the next step is to run it and see how it looks and behaves on a device. Instead of testing on a physical phone, you can use an emulator (for Android) or a simulator (for iOS), which allows you to run your app on a virtual device.
# Running on Android Emulator
1. Start Android Studio: Open Android Studio and make sure the Android Virtual Device (AVD) is set up. If you haven’t created an emulator yet, you can create one by going to Tools > AVD Manager in Android Studio.
2. Run the App: After setting up the emulator, go back to your terminal and navigate to your project directory. Run the following command:
bash
npx react-native run-android
3. This command will build your app and launch it on the Android emulator. If you face issues, ensure that your AVD is running properly, and try restarting the emulator.
4. Testing on Multiple Devices: If you want to test your app on different devices (e.g., tablet or phone), you can configure multiple emulators. Each emulator can be set up with different screen sizes, Android versions, and device specifications, giving you an accurate representation of how your app will behave on various devices.
# Running on iOS Simulator (Mac Only)
1. Open Xcode: Make sure you have Xcode installed on your Mac, as it includes the iOS simulator.
2. Run the App: To run your app on the iOS simulator, go to your terminal and execute:
bash
npx react-native run-ios
This command will start the app on the default iOS simulator. If you want to test on a specific device, you can specify the device name in the command, like so:
bash
npx react-native run-ios --simulator="iPhone 11"
3. Troubleshooting: If you see any errors related to the simulator, ensure your Xcode is up to date and that you have the necessary components installed. Sometimes, clearing derived data can help resolve issues:
- Go to Xcode > Preferences > Locations, and click on the arrow next to Derived Data.
- Delete the contents of the folder and rebuild your project.
Testing on these virtual devices is crucial before you test on real devices. It gives you the first chance to identify layout issues, performance lags, and other potential problems in your app’s functionality.
Basic Customization
Once your app is running, the next step is to customize it to meet your needs. React Native offers flexibility in customization, from changing the UI layout to integrating third-party libraries for extra functionality.
# Editing App.js
The main file where most of the initial app structure is located is App.js. When you open this file, you’ll see some default code that looks like this:
javascript
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
};
export default App;
You can modify this to make your app reflect the first steps of customization. For example, you can change the text to display something else or adjust the layout using other components.
javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to My New React Native App!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
text: {
fontSize: 20,
color: '#333',
},
});
export default App;
This is just the beginning. From here, you can add buttons, images, and navigation to different screens as you begin to build out the core features of your app.
# Adding Components
React Native comes with a wide variety of built-in components like View, Text, Button, Image, and TextInput. You can combine these to create complex UIs. For instance, adding a button can be done like this:
javascript
import React from 'react';
import { View, Text, Button } from 'react-native';
const App = () => {
const handlePress = () => {
alert('Button pressed!');
};
return (
<View>
<Text>Hello, React Native!</Text>
<Button title="Click Me" onPress={handlePress} />
</View>
);
};
export default App;
This shows how easily you can start building interactive elements within your app. The flexibility of React Native allows you to mix and match different components to create a UI that fits your app’s requirements.
You can also use third-party libraries to add more complex functionality to your app. For example, libraries like React Navigation can help you add navigation between different screens in your app, while React Native Gesture Handler allows you to add custom touch gestures.
Debugging Common Issues
While working with React Native, you might encounter a few errors or issues. Here are some of the most common problems and how to fix them:
# Metro Bundler Issues
Metro Bundler is the JavaScript bundler used by React Native. If you see errors related to the bundler, like Unable to resolve module, try the following steps:
- Stop the running server by pressing Ctrl+C in your terminal.
- Run npx react-native start –reset-cache to clear the cache and start the bundler again.
This will often resolve issues related to caching and missing modules.
# Build Failures for Android
If your Android app fails to build, you can try the following steps:
- Ensure that Android Studio is set up properly and the necessary SDKs are installed.
- Check that you have the correct version of JDK installed (React Native typically works best with JDK 11).
- Run cd android && ./gradlew clean to clean the build and then try again.
This can resolve many build-related issues on Android, especially if the error stems from a misconfigured build.
# iOS Build Issues
If you’re facing problems while building for iOS, make sure you’re using the correct version of Xcode. Often, upgrading React Native or Xcode might cause compatibility issues. In such cases, try:
- Updating the CocoaPods dependency by running cd ios && pod install.
- Ensure that your macOS version is compatible with the latest version of Xcode.
- If the app fails to launch on the simulator, try restarting both the simulator and the React Native server.
React Native comes with an excellent error message system, which usually helps you pinpoint the issue. Always read the logs in the terminal to understand the root cause. Many times, solving these issues requires simple configuration adjustments.
Shiv Technolabs – Your Trusted React Native App Development Company USA
Looking for a trusted React Native app development company USA to build your next mobile app? At Shiv Technolabs, we specialize in creating custom mobile applications tailored to your business needs. Our team of experienced React Native developers can help you craft high-performance apps that work across both iOS and Android. With years of expertise in mobile development, we provide end-to-end solutions, from design to deployment.
Whether you’re building a simple app or a complex solution with custom native code, Shiv Technolabs is here to help you bring your idea to life. Our team understands the nuances of React Native development and delivers projects on time and within budget.
When you decide to create and run a React Native app without Expo, it gives you complete freedom to shape your project the way you envision it. By following the steps outlined in this guide—from setting up your environment and running your app on virtual devices to customizing and debugging—you’re equipped to build a powerful, tailored mobile application that meets your unique needs.
For businesses seeking expert assistance, Shiv Technolabs is your trusted React Native app development company USA. With a team of skilled React Native developers, we’re ready to help you turn your ideas into a fully functional app. Contact Shiv Technolabs today to start building a custom solution that takes your business to the next level!
Revolutionize Your Digital Presence with Our Mobile & Web Development Service. Trusted Expertise, Innovation, and Success Guaranteed.
