DEV Community: Vishal Singh

Why Choose React Native Expo Over React Native CLI in 2025

Vishal Singh — Sat, 26 Apr 2025 12:33:33 +0000

If you're diving into mobile app development with React Native, one of the first decisions you'll face is whether to use Expo or the React Native CLI. While both options can help you build cross-platform mobile applications, they offer different development experiences and trade-offs.

As someone who has worked with both approaches extensively, I'd like to share why Expo might be the better choice for many developers, especially those just starting with React Native.

What are Expo and React Native CLI?

Before diving into the comparison, let's clarify what each option provides:

Expo is a framework and platform built around React Native that provides a managed workflow with pre-configured tools and services to help you build, deploy, and iterate on iOS, Android, and web apps.

React Native CLI offers a bare-bones setup that gives you complete control over the native code but requires more manual configuration and native development knowledge.

Why Choose Expo in 2025

1. Simplified Setup and Development

Expo dramatically reduces the barrier to entry for React Native development. With Expo, you can start building your app with just a few commands:

npm install -g expo-cli
expo init MyNewApp
cd MyNewApp
expo start

No need to install Android Studio, Xcode, or deal with complex native build configurations right away. This means you can focus on writing JavaScript and building your app's functionality immediately.

2. Enhanced Development Experience

Expo comes with several features that improve the development experience:

Hot Reloading: See changes instantly as you make them.
Expo Go App: Test your app on physical devices without building native binaries.
Expo DevTools: A web-based interface for managing your development workflow.
QR Code Sharing: Share a link or QR code to let anyone with Expo Go try your app instantly.

3. Comprehensive SDK Access

Expo provides a comprehensive SDK that gives you access to device features and APIs without writing native code:

Camera and image picker
Location services
Push notifications
Local authentication (fingerprint/face ID)
Secure storage
Sensors and device motion

These APIs are maintained by the Expo team, ensuring compatibility across versions and platforms.

4. Easy Updates with EAS Update

Expo Application Services (EAS) allows you to push updates directly to your users without going through the app store review process (for non-native code changes). This means:

Faster bug fixes and feature deployments
Lower risk when releasing updates
Better user experience with seamless updates

5. Streamlined Production Builds with EAS Build

Building and distributing mobile apps traditionally involves complex native build systems. Expo simplifies this with EAS Build:

Cloud-based builds for iOS and Android
No need for a Mac to build iOS apps
Consistent build environments
Automated submission to app stores

6. Expo Development Builds for Native Modules

One of the historical limitations of Expo was the inability to add custom native code. The "ejecting" process to overcome this limitation was often painful. Now, with Expo Development Builds, you can:

Use custom native modules
Maintain the Expo workflow
Access native code when needed without "ejecting"

7. Growing Community and Ecosystem

The Expo ecosystem continues to grow with:

Extensive documentation
Active community support
Regular updates and improvements
A wide range of compatible libraries

8. Scalability Concerns Addressed

Earlier versions of Expo had limitations for large-scale production apps. Most of these concerns have been addressed:

Support for custom native code
Improved build configuration options
Better performance optimization
Enterprise-ready features

When to Consider React Native CLI Instead

Despite Expo's advantages, there are situations where React Native CLI might be preferable:

When you need deep integration with native modules not supported by Expo
When you require fine-grained control over the native build process
For apps with unique background processing requirements
When working with specific hardware features not exposed by Expo SDK

Conclusion

In 2025, Expo has evolved to address many of its previous limitations while maintaining its developer-friendly approach. For most developers, particularly those new to mobile development or looking to move quickly, Expo provides the optimal balance of ease-of-use and flexibility.

The ability to add native modules through development builds means you're no longer making a permanent decision that might limit your app later. You can start with Expo for its simplified workflow and still access native functionality when needed.

React Native CLI remains an excellent option for developers who need complete control, but Expo has become sophisticated enough to handle most production app requirements while providing a significantly better development experience.

What's your experience with Expo vs React Native CLI? I'd love to hear your thoughts in the comments!

Happy Coding...🚀🚀

Storybook for React Native

Vishal Singh — Tue, 24 Sep 2024 15:17:05 +0000

Hello Experts, We all use Reusable Components in our applications OR we develop custom components that are frequently used at multiple places and keep that logic separate, so whenever we change on business logic it will be reflected everywhere where it is used. What happens if I say show me the component you developed, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it? Yes it’s there.

What is a Storybook?

Storybook allows developers to write Story (Custom Component), Run Story, Play with various properties, Validate it without running actual application and without importing in any component. Storybook makes developer life more simple, developers can play with all Story (Custom Component) from one place — that’s called Storybook. Storybook integrates with most popular JavaScript UI frameworks like React, React Native, Angular, Vue and supports a server-rendered component framework such as Ruby on Rails.

What is a Story?

Story captures the rendered state of a UI Component. Developers can write multiple stories per component. Stories are written in Component Story Format (CSF) an ES6 module-based standard — for writing components.

Storybook Features —

Isolated component development
Deliver robust UIs
Addons to power up your workflow
Consistent user experience
Unit test components
Share & Reuse component

Installations —

Execute this command from within the root of your react native app:

npx -p @storybook/cli sb init — type react_native
You’ll be prompted asking if you want to install @storybook/react-native-server, you can safely choose not to install this now since you can add it later and it’s not required.

Run Storybook —

# Starts Storybook in development mode
npm run storybook

Writing Stories —

Create Task Component

// components/Task.js
import * as React from 'react';
import { TextInput, SafeAreaView } from 'react-native';
import { styles } from '../constants/globalStyles';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <SafeAreaView style={styles.ListItem}>
      <TextInput value={title} editable={false} />
    </SafeAreaView>
  );
}

Create TaskStories


// components/Task.stories.js
import * as React from 'react';
import { View } from 'react-native';
import { styles } from '../constants/globalStyles';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import Task from './Task';
export const task = {
  id: '1',
  title: 'Test Task',
  state: 'TASK_INBOX',
  updatedAt: new Date(2018, 0, 1, 9, 0),
};

export const actions = {
  onPinTask: action('onPinTask'),
  onArchiveTask: action('onArchiveTask'),
};
storiesOf('Task', module)
  .addDecorator(story => <View style={styles.TaskBox}>{story()}</View>)
  .add('default', () => <Task task={task} {...actions} />)
  .add('pinned', () => <Task task={{ ...task, state: 'TASK_PINNED' }} {...actions} />)
  .add('archived', () => <Task task={{ ...task, state: 'TASK_ARCHIVED' }}

Configuration

// storybook/index.js
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  require('../components/Task.stories.js');
}, module);

const StorybookUIRoot = getStorybookUI({
  asyncStorage: null,
});

export default StorybookUIRoot;

Render All | Specific Stories

import { getStorybookUI, configure } from '@storybook/react-native';
import { name as appName } from './app.json';
import { AppRegistry } from 'react-native';

configure(() => {
  require('./storybook/stories/Button/Button.stories.js'); // render all stories require(‘./storybook/stories’) - which contain all your stories
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

AddOns —

Knobs —
npm i — save @storybook/addon-ondevice-knobsAllow developers to adjust components props in real time.

Actions —
npm i — save @storybook/addon-ondevice-actionsDeveloper can verify onPress calls with actions that will log information in the actions tab.

Notes —
npm i — save @storybook/addon-ondevice-notesAllow developers to add some markdown to your stories to help document their usage.

Background —
npm i — save @storybook/addon-ondevice-backgroundsAllows developer to change the background of storybook to compare the look of your component against different backgrounds.

Thanks for reading Article!

Implementing Deep Linking in a React Native Application

Vishal Singh — Wed, 03 Apr 2024 05:48:14 +0000

Deep linking is a way of allowing users to navigate directly to specific screens or content within an application. In this article, we’ll explore how to implement deep linking in a React Native application using the React Navigation library.

Prerequisites

Before we get started, make sure you have the following installed on your machine:

Node.js and NPM or Yarn
React Native CLI
A code editor of your choice

Getting Started

Let’s start by creating a new React Native project:

npx react-native init DeepLinkProject

Next, install the required dependencies for React Navigation:

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

We also need to install react-navigation/stack which is the package we'll be using for navigation:

yarn add @react-navigation/stack

Setting up Deep Linking with React Navigation

To implement deep linking, we’ll use the Linking API provided by React Native. We'll also use the useEffect hook to handle deep links.

Let’s start by setting up the Stack Navigator in our App.tsx file:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

We’ve created two screens: HomeScreen and ProfileScreen. Now, let's add deep linking to these screens.

We’ll first create a useEffect hook in the App component to handle deep links. Here, we'll add an event listener to Linking that will parse the incoming URL and navigate to the corresponding screen:

import * as React from 'react';
import { Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default function App() {
  React.useEffect(() => {
    const handleDeepLink = ({ url }: { url: string }) => {
      const route = url.replace(/.*?:\/\//g, '');
      const routeName = route.split('/')[0];

      if (routeName === 'profile') {
        const username = route.split('/')[1];
        navigation.navigate('Profile', { username });
      }
    };

    Linking.addEventListener('url', handleDeepLink);

    return () => {
      Linking.removeEventListener('url', handleDeepLink);
    };
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={({ route }) => ({ title: route.params.username })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In the useEffect hook, we first define a function handleDeepLink that will handle the incoming deep link. We extract the route name and any parameters from the URL, and navigate to the corresponding screen using navigation.navigate.

In the ProfileScreen, we can then access the username parameter using route.params.username, and set it as the screen's title using the options prop.

Folder Structure

MyProject/ ├─ __tests__/ ├─ android/ ├─ ios/ ├─ src/ │ ├─ screens/ │ │ ├─ HomeScreen.tsx │ │ ├─ ProfileScreen.tsx │ ├─ App.tsx ├─ package.json

We’ll keep our React Navigation stack in the App.tsx file, and create separate files for each screen in the screens folder.

Full Code

Here is the full code for the application:

App.tsx

import * as React from 'react';
import { Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';

import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createStackNavigator();

export default function App() {
  React.useEffect(() => {
    const handleDeepLink = ({ url }: { url: string }) => {
      const route = url.replace(/.*?:\/\//g, '');
      const routeName = route.split('/')[0];

      if (routeName === 'profile') {
        const username = route.split('/')[1];
        navigation.navigate('Profile', { username });
      }
    };

    Linking.addEventListener('url', handleDeepLink);

    return () => {
      Linking.removeEventListener('url', handleDeepLink);
    };
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={({ route }) => ({ title: route.params.username })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

screens/HomeScreen.tsx

import * as React from 'react';
import { View, Text, Button } from 'react-native';

interface Props {
  navigation: any;
}

export default function HomeScreen({ navigation }: Props) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile', { username: 'johndoe' })}
      />
    </View>
  );
}

screens/ProfileScreen.tsx

import * as React from 'react';
import { View, Text } from 'react-native';

interface Props {
  route: any;
}

export default function ProfileScreen({ route }: Props) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <Text>{route.params.username}</Text>
    </View>
  );
}

Conclusion

In this article, we’ve explored how to implement deep linking in a React Native application using the React Navigation library. We’ve also covered considerations for different platforms and versions and provided code samples in TypeScript.

If you like the article, please give it a like, Thanks 🙏🏽
Happy Coding! 🚀

Managing Dates, Times and Time Zone Using Moment.js

Vishal Singh — Fri, 05 May 2023 06:07:47 +0000

Working with dates and times in JavaScript has always been a bit complex. That’s why if you ask a date-related question on StackOverflow, you’ll often hear the reply “Use Moment.js”.

What Is Moment.js?

Moment.js is big open source community working with dates and times in JavaScript. It allows you to parse, validate, manipulate, and display dates and times using a clean and concise API.

In this blog I’ll show you how to get up and running with Moment.js, as well as demonstrate several of its common use cases.

Getting Started with Moment.js

Moment.js can be run from the browser as well as from within a Node application. In order to use it with Node, install the module using the anyone following command.

npm install moment

yarn add moment

Then, simply require() or import and use it in your application as shown below.

const moment = require('moment') or import moment from 'moment';
const today = moment();
console.log(today.format());

// 2023-05-05T10:55:16+05:30

Date Formatting

Moment.js has simplified the process of date conversion to any particular format. Date format conversion with Moment is simple, as shown in the following example.

moment().format('MMMM Do YYYY, h:mm:ss a'); // May 5th 2023, 11:04:44 am
moment().format('dddd');                    // Friday
moment().format("MMM Do YY");               // May 5th 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();   // 2023-05-05T10:55:16+05:30

Manipulating Dates

There are a number of options for manipulating the moment object. For example, you can add or subtract days, months, years, etc. This is achieved via the add() and subtract() methods. The following example shows how seven days, months, or weeks are added to the current date.

moment().add(7, 'days');    // adds 7 days to current date
moment().add(7, 'months');  // adds 7 months to current date
moment().add(7, 'years');   // adds 7 years to current date

Similarly, the subtract() method is shown below.

moment().subtract(7, 'days');   // subtracts 7 days to current date
moment().subtract(7, 'months'); // subtracts 7 months to current date
moment().subtract(7, 'years');  // subtracts 7 years to current date

Note that each of the above examples will return the moment object. If you want a human-readable date, you’ll need to format it accordingly.

Time From Now

Another common task is determining how much time exists between two dates. For calculating time from the current date, Moment.js uses a method named fromNow().

moment('2023.05.03', 'YYYY.MM.DD').fromNow() // 2 days ago

If we pass in true as an argument, we can get the value without the suffix.

moment('2023.05.03', 'YYYY.MM.DD').fromNow(true) // 2 days

International Language Support

Moment.js offers great i18n support. It allows you to assign a global language or set the language for a particular moment object. By default, it supports the English language. If you want to support any other language, then assign the key values of that particular language to moment.locale. The following abridged example, taken from the Moment.js docs, shows how support can be added for French.

import moment from 'moment';

moment.locale('fr', {
  months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
  weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
  relativeTime : {
      future : 'dans %s',
      past : 'il y a %s',
      s : 'quelques secondes',
      m : 'une minute',
      mm : '%d minutes',
      h : 'une heure',
      hh : '%d heures',
      d : 'un jour',
      dd : '%d jours',
      M : 'un mois',
      MM : '%d mois',
      y : 'un an',
      yy : '%d ans'
  }
});

moment.locale('fr');

moment(1316116057189).fromNow(); // il y a une heure
moment.locale('en');
moment(1316116057189).fromNow(); // an hour ago

Moment Timezone

Moment-Timezone is an add-on for Moment.js. It can parse and display dates in any timezone. In order to use it, install the module using the anyone following command.

npm install moment-timezone --save   # npm
yarn add moment-timezone             # Yarn

Format Dates in Any Timezone

var jun = moment("2014-06-01T12:00:00Z");
var dec = moment("2014-12-01T12:00:00Z");

jun.tz('America/Los_Angeles').format('ha z');  // 5am PDT
dec.tz('America/Los_Angeles').format('ha z');  // 4am PST

jun.tz('America/New_York').format('ha z');     // 8am EDT
dec.tz('America/New_York').format('ha z');     // 7am EST

jun.tz('Asia/Tokyo').format('ha z');           // 9pm JST
dec.tz('Asia/Tokyo').format('ha z');           // 9pm JST

jun.tz('Australia/Sydney').format('ha z');     // 10pm EST
dec.tz('Australia/Sydney').format('ha z');     // 11pm EST

Convert Dates Between Timezones

var newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
var losAngeles = newYork.clone().tz("America/Los_Angeles");
var london     = newYork.clone().tz("Europe/London");

newYork.format();    // 2014-06-01T12:00:00-04:00
losAngeles.format(); // 2014-06-01T09:00:00-07:00
london.format();     // 2014-06-01T17:00:00+01:00

Conclusion

Moment.js is really an awesome library that simplifies date and time-related manipulations and validations. In this article, we focused on some of the features of Moment.js which help in parsing, validating, and manipulating dates and times in the browser and Node.js applications. A number of useful plugins are also available for Moment.js. For more on Moment.js, the reader is directed to the library’s documentation.

Thanks for reading this post, I hope you found it interesting!

Reactotron- Debugging tool for React Native and React Project

Vishal Singh — Fri, 31 Mar 2023 05:48:57 +0000

Reactotron - A Desktop App for inspecting your ReactJs and React Native projects. It's available for macOS, Windows, and Linux platforms. So you don't have to open any Web browser to see any console log or API response.

1. Use it to:

view your application state.
show API requests & responses.
perform quick performance benchmarks.
subscribe to parts of your application state.
display messages similar to console.log.
track your sagas.
track your Async Storage in React Native.
dispatch actions like a government-run mind control experiment.

2. Installing the Application

You can install it from the attached link according to your platform. Once you have the application installed it should download and alert you that a new version is available and that new version should be installed on next launch.
https://github.com/infinitered/reactotron/releases/tag/v2.17.1

3. Configure Reactotron with your project.

For React Native Project

Let's install Reactotron on your project as a dev dependency using below command.

npm i --save-dev reactotron-react-native

Create ReactotronConfig.js file.

Create ReactotronConfig.js file in your root folder of your project and copy the below code in it for initializing.

import Reactotron from 'reactotron-react-native'

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from 'react-native' or '@react-native-community/async-storage' depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

Finally, we import this on startup in App.js or index.js of your project.

if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

At this point, Reactotron is hooked up.

Refresh your app and have a look at Reactotorn now.

For ReactJs Project

Let's install Reactotron as a dev dependency.

npm i --save-dev reactotron-react-js

Create separate file for initializing src/ReactotronConfig.js in your editor of choice and paste this:

import Reactotron from 'reactotron-react-js'

Reactotron
  .configure() // we can use plugins here -- more on this later
  .connect() // let's connect!

Finally, we import this on startup in src/index.js on line 1:

import './ReactotronConfig'

At this point, Reactotron is hooked up.

Refresh your web page (or start it up npm start) and have a look at Reactotron now.

4. Configure Console.log

To see console.log, we have to configure ReactotronConfig.js additionally.


import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

Reactotron.configure({name: 'app_name'})
  .setAsyncStorageHandler(AsyncStorage)
  .useReactNative()
  .connect();

//  patch console.log to send log to Reactotron
const yeOldeConsoleLog = console.log;
console.log = (...args) => {
  yeOldeConsoleLog(...args);
  Reactotron.display({
    name: 'CONSOLE.LOG',
    value: args,
    preview: args.length > 0 && typeof args[0] === 'string' ? args[0] : null,
  });
};

export default Reactotron;

Summary

Effortlessly inspect React JS and React Native mobile apps with Reactotron, a free desktop application by Infinite Red.
Majorly, It is used for Realtime Event Timeline, to see Application state, console logs messages, API Requests/Responses and Track Global Errors.

You can also configure your Reactotron with redux for tracking global errors, and watching network requests.

Use this link to configure Reactotron with redux https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md.

I hope this article has helped in knowing Reactotron and its setup in ReactJs and React Native. Thanks for reading the article.

Migrate Expo Project to React Native CLI

Vishal Singh — Mon, 27 Sep 2021 05:05:00 +0000

Hi everyone , I hope everyone is doing good.
So generally when developers start learning React native, they choose Expo over RN CLI which is good but Expo has some limitations. Please use this link to know more about that https://docs.expo.dev/introduction/why-not-expo/ .

Here we learn how to convert our Expo project to RN CLI.

It's time to eject

Basically, for migration we use EJECT methodology to convert our Project to RN CLI.

We use expo eject command in terminal of our project directory.

After that it's asking about packages name for android and iOS identifier for iOS.

IMPORTANT!

Use the correct package name and iOS identifier as same as mention in your project.

After successfully completion, we get two new folder in our project.

android - contains files which are responsible for native android development
ios - contains files for which are responsible for native iOS development.

After that, you can configure App icon and Splash screen image in each environment i.e android and iOS.

And here we go, we successfully migrate our app from expo to RN CLI.

Happy Coding!