import React, { useState, useEffect, useCallback } from "react";
import { FlatList, ActivityIndicator, View, RefreshControl } from "react-native";

interface Article {
    id: number;
    title: string;
    excerpt: string;
}

function ArticleList() {
    const [articles, setArticles] = useState<Article[]>([]);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [page, setPage] = useState(1);

    const fetchArticles = useCallback(async (pageNum = 1) => {
        try {
            const response = await fetch(
                `https://api.futuretechzone.in/articles?page=${pageNum}&limit=20`
            );
            const data = await response.json();
            if (pageNum === 1) {
                setArticles(data.articles);
            } else {
                setArticles(prev => [...prev, ...data.articles]);
            }
        } catch (error) {
            console.error("Failed to fetch articles:", error);
        } finally {
            setLoading(false);
            setRefreshing(false);
        }
    }, []);

    useEffect(() => { fetchArticles(); }, []);

    const handleRefresh = () => {
        setRefreshing(true);
        setPage(1);
        fetchArticles(1);
    };

    const handleLoadMore = () => {
        const nextPage = page + 1;
        setPage(nextPage);
        fetchArticles(nextPage);
    };

    if (loading) return <ActivityIndicator size="large" color="#0066cc" />;

    return (
        <FlatList
            data={articles}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => <ArticleCard article={item} />}
            refreshControl={
                <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
            }
            onEndReached={handleLoadMore}
            onEndReachedThreshold={0.5}
            showsVerticalScrollIndicator={false}
        />
    );
}

npm install zustand

import { create } from "zustand";
import AsyncStorage from "@react-native-async-storage/async-storage";

interface AuthStore {
    user: User | null;
    token: string | null;
    isLoading: boolean;
    login: (email: string, password: string) => Promise<void>;
    logout: () => Promise<void>;
    loadUser: () => Promise<void>;
}

const useAuthStore = create<AuthStore>((set) => ({
    user: null,
    token: null,
    isLoading: true,

    login: async (email, password) => {
        const response = await fetch("https://api.futuretechzone.in/auth/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ email, password }),
        });
        const { user, token } = await response.json();
        await AsyncStorage.setItem("auth_token", token);
        set({ user, token });
    },

    logout: async () => {
        await AsyncStorage.removeItem("auth_token");
        set({ user: null, token: null });
    },

    loadUser: async () => {
        const token = await AsyncStorage.getItem("auth_token");
        if (token) {
            // Fetch user with token
            set({ token, isLoading: false });
        } else {
            set({ isLoading: false });
        }
    },
}));

// Use anywhere in the app
function ProfileScreen() {
    const { user, logout } = useAuthStore();
    return (
        <View>
            <Text>Welcome, {user?.name}!</Text>
            <Button title="Logout" onPress={logout} />
        </View>
    );
}

npx expo install expo-image-picker expo-camera

import * as ImagePicker from "expo-image-picker";
import { Image, Button, View } from "react-native";

function ProfileImagePicker() {
    const [image, setImage] = useState<string | null>(null);

    const pickImage = async () => {
        // Request permission
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== "granted") {
            alert("Camera roll permission required!");
            return;
        }

        // Open image picker
        const result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],         // Square crop
            quality: 0.8,
        });

        if (!result.canceled) {
            setImage(result.assets[0].uri);
            // Upload to server
            await uploadProfileImage(result.assets[0].uri);
        }
    };

    return (
        <View>
            {image && <Image source={{ uri: image }} style={{ width: 100, height: 100, borderRadius: 50 }} />}
            <Button title="Change Photo" onPress={pickImage} />
        </View>
    );
}

npx expo install expo-location

import * as Location from "expo-location";

async function getCurrentLocation() {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== "granted") return;

    const location = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.High
    });

    console.log(location.coords.latitude, location.coords.longitude);

    // Reverse geocode to get address
    const [address] = await Location.reverseGeocodeAsync({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude
    });

    console.log(`${address.street}, ${address.city}, ${address.country}`);
}

npx expo install expo-notifications expo-device

import * as Notifications from "expo-notifications";
import * as Device from "expo-device";

async function registerForPushNotifications(): Promise<string | null> {
    if (!Device.isDevice) {
        alert("Push notifications only work on physical devices");
        return null;
    }

    const { status } = await Notifications.requestPermissionsAsync();
    if (status !== "granted") {
        alert("Notification permission denied");
        return null;
    }

    const token = await Notifications.getExpoPushTokenAsync({
        projectId: "your-expo-project-id"
    });

    // Send this token to your backend to store per user
    return token.data;
}

// Listen for received notifications
Notifications.addNotificationReceivedListener(notification => {
    console.log("Notification received:", notification);
});

// Handle notification tap
Notifications.addNotificationResponseReceivedListener(response => {
    const { articleId } = response.notification.request.content.data;
    navigation.navigate("ArticleDetail", { articleId });
});

// Optimized FlatList for large lists
<FlatList
    data={articles}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => <ArticleCard article={item} />}

    // Performance optimizations
    removeClippedSubviews={true}        // Unmount off-screen components
    maxToRenderPerBatch={10}            // Render 10 items at a time
    updateCellsBatchingPeriod={50}      // Update every 50ms
    windowSize={10}                     // Keep 10 viewports worth of items mounted
    initialNumToRender={8}              // Initially render 8 items

    // Avoid inline arrow functions
    // BAD: renderItem={({ item }) => <ArticleCard article={item} />}
    // GOOD: renderItem={renderArticleCard}
    renderItem={renderArticleCard}
/>

// Memoize render function
const renderArticleCard = useCallback(
    ({ item }: { item: Article }) => <ArticleCard article={item} />,
    []
);

// Without memo: re-renders whenever parent renders
function ArticleCard({ article, onPress }) {
    return (...);
}

// With memo: only re-renders if article or onPress change
const ArticleCard = React.memo(function ArticleCard({ article, onPress }) {
    return (...);
});

// Also memoize callbacks
const handleArticlePress = useCallback(
    (id: number) => navigation.navigate("ArticleDetail", { articleId: id }),
    [navigation]
);

npx expo install react-native-reanimated

import Animated, {
    useSharedValue, useAnimatedStyle, withSpring, withTiming,
    FadeIn, SlideInRight
} from "react-native-reanimated";

function AnimatedCard({ article }) {
    const scale = useSharedValue(1);
    const opacity = useSharedValue(1);

    const animatedStyle = useAnimatedStyle(() => ({
        transform: [{ scale: scale.value }],
        opacity: opacity.value,
    }));

    const handlePressIn = () => {
        scale.value = withSpring(0.97);    // Runs on UI thread — 60fps
        opacity.value = withTiming(0.8);
    };

    const handlePressOut = () => {
        scale.value = withSpring(1);
        opacity.value = withTiming(1);
    };

    return (
        // entering = animation when component mounts
        <Animated.View entering={FadeIn.delay(100).duration(400)} style={animatedStyle}>
            <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
                <Text>{article.title}</Text>
            </Pressable>
        </Animated.View>
    );
}

// screens/HomeScreen.tsx — A simple but complete screen
import React, { useState, useEffect } from "react";
import {
    View, Text, FlatList, StyleSheet, ActivityIndicator,
    SafeAreaView, StatusBar
} from "react-native";

export default function HomeScreen() {
    const [articles, setArticles] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts?_limit=20")
            .then(res => res.json())
            .then(data => {
                setArticles(data);
                setLoading(false);
            });
    }, []);

    if (loading) {
        return (
            <View style={styles.centered}>
                <ActivityIndicator size="large" color="#0066cc" />
            </View>
        );
    }

    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <Text style={styles.header}>FutureTechZone</Text>
            <FlatList
                data={articles}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (
                    <View style={styles.card}>
                        <Text style={styles.title}>{item.title}</Text>
                        <Text style={styles.body} numberOfLines={3}>{item.body}</Text>
                    </View>
                )}
                contentContainerStyle={{ paddingBottom: 20 }}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: "#f5f5f5" },
    centered: { flex: 1, justifyContent: "center", alignItems: "center" },
    header: { fontSize: 28, fontWeight: "bold", padding: 16, color: "#0066cc" },
    card: {
        backgroundColor: "white",
        margin: 8,
        marginHorizontal: 16,
        padding: 16,
        borderRadius: 12,
        elevation: 2,
        shadowColor: "#000",
        shadowOpacity: 0.1,
        shadowRadius: 4,
    },
    title: { fontSize: 16, fontWeight: "700", color: "#1a1a1a", marginBottom: 8 },
    body: { fontSize: 14, color: "#666", lineHeight: 20 },
});