React Native — Build Cross-Platform Mobile Apps in 2024

npx create-expo-app@latest MyApp
cd MyApp
npx expo start

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 
export default function Card({ title, onPress }: { title: string; onPress: () => void }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <TouchableOpacity style={styles.button} onPress={onPress}>
        <Text style={styles.buttonText}>Read More</Text>
      </TouchableOpacity>
    </View>
  )
}
 
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: '600', marginBottom: 8 },
  button: { backgroundColor: '#3858f6', borderRadius: 8, padding: 10 },
  buttonText: { color: '#fff', textAlign: 'center', fontWeight: '600' },
})

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router'
import { Ionicons } from '@expo/vector-icons'
 
export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{ title: 'Home', tabBarIcon: ({ color }) => <Ionicons name="home" color={color} size={24} /> }}
      />
      <Tabs.Screen
        name="profile"
        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Ionicons name="person" color={color} size={24} /> }}
      />
    </Tabs>
  )
}

import { useQuery } from '@tanstack/react-query'
import { FlatList, Text, View } from 'react-native'
 
function PostList() {
  const { data, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('https://api.example.com/posts').then(r => r.json()),
  })
 
  if (isLoading) return <Text>Loading...</Text>
 
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  )
}

# Install EAS CLI
npm install -g eas-cli
 
# Configure your project
eas build:configure
 
# Build for both platforms
eas build --platform all