React Native CLI and Expo

React Native allows developers to build native mobile applications using JavaScript and React. When starting a React Native project, you typically choose between two main approaches: using the React Native CLI directly or using Expo.

React Native CLI

What it is: The official command-line tool provided by the React Native team. It creates a 'bare' React Native project, giving you direct access to the native iOS (`ios/`) and Android (`android/`) project files.

Pros:
* Full Control: You have complete control over the native code, allowing for deep customization and optimization.
* Custom Native Modules: Ability to integrate any third-party native module or write your own custom native code.
* Optimized Builds: Can create smaller, more focused app bundles by including only the necessary native components.
* Flexibility: Ideal for complex applications requiring specific native functionalities not available in Expo's SDK.

Cons:
* Complex Setup: Requires installing native development tools like Xcode (for iOS) and Android Studio, Java Development Kit (JDK), and environment variables, which can be time-consuming and error-prone.
* Slower Iteration for Native Changes: Modifying native code often requires recompiling the native project, which can be slower than JavaScript-only changes.
* Platform-Specific Knowledge: Developers may need some familiarity with Swift/Objective-C (iOS) or Java/Kotlin (Android) for advanced native integrations or debugging.
* Harder to Share: Sharing development builds for testing can be more involved, often requiring provisioning profiles or manual APK installations.

When to Choose: For experienced developers, projects with unique native requirements, apps needing specific performance optimizations, or when integration with specialized native libraries is crucial.

Expo

What it is: An open-source framework and platform for building universal React applications. Expo provides a set of tools and services that simplify React Native development, offering a 'managed workflow' where Expo handles much of the underlying native build process.

Pros:
* Quick Start: Extremely easy to set up and get started. Often, you only need `npm install -g expo-cli` and `expo init`.
* Managed Workflow: You don't typically need Xcode or Android Studio for basic development. Apps run inside the Expo Go client app on your device or simulator.
* Pre-built Modules: Comes with a comprehensive SDK of common native modules (camera, location, file system, push notifications, etc.) that are readily available via JavaScript APIs.
* Over-the-Air (OTA) Updates: Allows you to update your app's JavaScript bundle over the air without resubmitting to app stores.
* Easy Sharing: Development builds can be easily shared by scanning a QR code with the Expo Go app.
* Web Support: Seamlessly build for web from the same codebase.

Cons:
* Limited Native Modules: If a native module is not included in Expo's SDK, you cannot directly add it in the managed workflow. You would either need to 'eject' to a bare workflow (similar to React Native CLI) or use `expo prebuild` with 'config plugins'.
* Less Native Control: Less direct control over low-level native configurations and functionalities.
* App Size: Can result in slightly larger app bundles because it includes the entire Expo SDK, even if all features aren't used (though this has been significantly improved with recent Expo versions).
* Expo Go Dependency: While convenient for development, some native-specific behaviors might only appear when running a standalone build, not within Expo Go.

When to Choose: For beginners, rapid prototyping, apps that don't require highly specialized or custom native modules, or projects where quick development and iteration are prioritized.

Conclusion
Both React Native CLI and Expo are powerful tools for building React Native applications. Your choice depends on your project's specific requirements, your team's expertise, and the level of native control and customization you need.

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

const App = () => {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Text style={styles.title}>Welcome to React Native!</Text>
      <Text style={styles.subtitle}>
        This code runs on both React Native CLI and Expo projects.
      </Text>
      <Text style={styles.body}>
        The core components and APIs like View, Text, and StyleSheet are universal.
        The difference lies in how your project is set up and managed behind the scenes.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 26,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
    marginBottom: 25,
    textAlign: 'center',
    paddingHorizontal: 10,
  },
  body: {
    fontSize: 16,
    color: '#444',
    textAlign: 'center',
    lineHeight: 24,
    paddingHorizontal: 15,
  },
});

export default App;