React Native: Components, Navigation and New Architecture Reference Guide

# Expo (managed) — fastest start, no Xcode/Android Studio needed
npx create-expo-app@latest MyApp --template
cd MyApp
npx expo start                  # press i (iOS) / a (Android) / w (web)

# Bare React Native (full native access)
npx @react-native-community/cli@latest init MyApp
cd MyApp
npx pod-install ios             # macOS only
npm run ios                     # or npm run android

# Node ≥ 20, watchman recommended on macOS:
brew install watchman

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

export default function Counter() {
  const [n, setN] = useState(0);
  return (
    
      Count: {n}
       setN(n + 1)} style={styles.btn}>
        Increment
      
    
  );
}

const styles = StyleSheet.create({
  box:      { padding: 16, gap: 12 },
  label:    { fontSize: 18, fontWeight: '600' },
  btn:      { padding: 12, borderRadius: 8, backgroundColor: '#2563eb' },
  btnText:  { color: 'white', textAlign: 'center', fontWeight: '600' },
});

import { FlatList, Text, View, RefreshControl } from 'react-native';
import { useState, useCallback } from 'react';

export function Feed({ items, onRefresh, onEndReached }) {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  }, [onRefresh]);

  return (
     it.id}
      renderItem={({ item }) => (
        
          {item.title}
        
      )}
      ItemSeparatorComponent={() => }
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      refreshControl={}
      initialNumToRender={10}
    />
  );
}

// npm i @react-navigation/native @react-navigation/native-stack
// npx expo install react-native-screens react-native-safe-area-context

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

const Stack = createNativeStackNavigator();

function Home({ navigation }) {
  return  navigation.navigate('Detail', { id: 42 })} />;
}

function Detail({ route }) {
  return id = {route.params.id};
}

export default function App() {
  return (
    
      
        
        
      
    
  );
}

// npx expo install react-native-reanimated
import Animated, {
  useSharedValue, useAnimatedStyle, withSpring, withTiming,
} from 'react-native-reanimated';
import { Pressable, View } from 'react-native';

export function Bouncer() {
  const scale = useSharedValue(1);
  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

  return (
     { scale.value = withSpring(0.92); }}
      onPressOut={() => { scale.value = withSpring(1);    }}
    >
      
    
  );
}

// One-shot timing
// opacity.value = withTiming(1, { duration: 300 });

// A minimal Expo app: fetch a list, navigate to detail, persist a favourite.
// Run with: npx expo start
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState } from 'react';
import { FlatList, Pressable, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

function List({ navigation }) {
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((r) => r.json()).then(setItems);
  }, []);
  return (
     String(it.id)}
      renderItem={({ item }) => (
         navigation.navigate('Detail', { post: item })}>
          {item.title}
        
      )}
    />
  );
}

function Detail({ route }) {
  const { post } = route.params;
  const fav = async () => AsyncStorage.setItem(`fav:${post.id}`, '1');
  return (
    
      {post.title}
      {post.body}
      Save ★
    
  );
}

export default function App() {
  return (
    
      
        
        
      
    
  );
}