$devvkit learn --librarie react-native-guide

React Native Guide

[react][mobile][native][cross-platform]

Cross-platform

Install

npx @react-native-community/cli init MyApp
# or: npx create-expo-app my-app

React Native uses React's component model but renders to native platform UI elements (UIView on iOS, View on Android) instead of DOM nodes. Core components like `<View>`, `<Text>`, `<ScrollView>` map directly to native widgets.

The bridge (or JSI in the new architecture) enables JavaScript to call native modules and vice versa. The new architecture (Fabric renderer + TurboModules + JSI) improves performance and reduces the bridge overhead.

Expo is the recommended starting point — it provides a managed workflow with over-the-air updates, EAS Build (cloud builds), and a rich SDK covering camera, location, notifications, payments, and more.

Setup

Create project (Expo)— Start with Expo.

npx create-expo-app@latest MyApp --template blank-typescript
cd MyApp
npx expo start
# Press i for iOS, a for Android, w for web

Create project (CLI)— Vanilla React Native.

npx @react-native-community/cli@latest init MyApp
cd MyApp
npx react-native run-ios
npx react-native run-android

Components

Core components— Building blocks.

import { View, Text, ScrollView, TextInput, Pressable } from 'react-native';

function MyComponent() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 24 }}>Hello, RN!</Text>
      <TextInput placeholder="Enter name" style={{ borderWidth: 1, padding: 8 }} />
      <Pressable onPress={() => alert('Pressed!')}>
        <Text>Press me</Text>
      </Pressable>
    </View>
  );
}

StyleSheet— Declarative styles.

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

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold', color: '#333' },
});

function MyScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

Navigation

Navigation— Stack navigation.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

State & Data

FlatList— Performant list.

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);

  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

Native Modules

Native module— Call native code.

// NativeModules.js
import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;
export default MyModule;

// Usage:
const result = await MyModule.doSomething('param');

Expo

Build with EAS— Cloud build & submit.

npm install -g eas-cli
eas build --platform ios --profile production
eas build --platform android --profile production
eas submit --platform ios    # Submit to App Store Connect
eas submit --platform android # Submit to Google Play