React Native and Expo: setup and your first app

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

duka/
├── app/                 ← screens: each file is a route (Expo Router)
│   ├── _layout.tsx      ← navigation layout (stack, tabs)
│   └── index.tsx        ← the first screen
├── assets/              ← images, fonts, icon, splash screen
├── components/          ← your reusable components
├── app.json             ← app name, icon, package id, permissions
└── package.json

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

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Karibu Duka 🛒</Text>
      <Text style={styles.subtitle}>Items in your cart: {count}</Text>
      <Pressable style={styles.button} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>Add item</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24, backgroundColor: "#fff" },
  title: { fontSize: 28, fontWeight: "800", color: "#0b1b35" },
  subtitle: { fontSize: 16, marginVertical: 12, color: "#475569" },
  button: { backgroundColor: "#ffb800", paddingVertical: 14, paddingHorizontal: 28, borderRadius: 999 },
  buttonText: { fontWeight: "700", color: "#0b1b35", fontSize: 16 },
});

import { useState } from "react";
import { View, Text, FlatList, Pressable, TextInput, StyleSheet } from "react-native";

const PRODUCTS = [
  { id: "1", name: "Unga 2kg", price: 180 },
  { id: "2", name: "Sugar 1kg", price: 210 },
  { id: "3", name: "Cooking oil 1L", price: 350 },
];

export default function ProductsScreen() {
  const [query, setQuery] = useState("");
  const [cart, setCart] = useState([]);
  const visible = PRODUCTS.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()));
  const total = cart.reduce((s, p) => s + p.price, 0);

  return (
    <View style={styles.screen}>
      <TextInput style={styles.search} placeholder="Search products" value={query} onChangeText={setQuery} />
      <FlatList
        data={visible}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.row}>
            <Text style={styles.name}>{item.name}</Text>
            <Text>KSh {item.price}</Text>
            <Pressable style={styles.button} onPress={() => setCart([...cart, item])}>
              <Text style={styles.buttonText}>Add</Text>
            </Pressable>
          </View>
        )}
        ListEmptyComponent={<Text>No products found</Text>}
      />
      <Text style={styles.total}>{cart.length} items · KSh {total}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, backgroundColor: "#fff" },
  search: { borderWidth: 1, borderColor: "#cbd5e1", borderRadius: 8, padding: 10, marginBottom: 12 },
  row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingVertical: 10 },
  name: { flex: 1, fontWeight: "600" },
  button: { backgroundColor: "#0b1b35", paddingHorizontal: 14, paddingVertical: 8, borderRadius: 8, marginLeft: 8 },
  buttonText: { color: "#fff", fontWeight: "700" },
  total: { fontSize: 18, fontWeight: "700", paddingTop: 12 },
});

app/
├── _layout.jsx          ← stack or tab layout
├── index.jsx            ← home screen "/"
├── cart.jsx             ← "/cart"
└── product/[id].jsx     ← "/product/123" (dynamic route)

import { Link, useLocalSearchParams } from "expo-router";

<Link href="/product/2">View sugar</Link>          // navigate

const { id } = useLocalSearchParams();            // read the id on product/[id].jsx

import { useEffect, useState } from "react";
import { ActivityIndicator, Text } from "react-native";

function useProducts() {
  const [state, setState] = useState({ loading: true, data: [], error: null });
  useEffect(() => {
    let cancelled = false;
    fetch("https://api.example.co.ke/products")
      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
      .then((data) => !cancelled && setState({ loading: false, data, error: null }))
      .catch(() => !cancelled && setState({ loading: false, data: [], error: "Check your internet connection" }));
    return () => { cancelled = true; };
  }, []);
  return state;
}

npm install -g eas-cli
eas login
eas build --platform android      # builds an .aab in the cloud (no Android Studio needed)
eas build --platform ios          # needs an Apple Developer account
eas submit --platform android     # upload to Google Play