Create a React Native Wallpaper App with Infinite Scroll & Categories

1. Fetching Wallpapers with Axios

import axios from 'axios';

const API = axios.create({
  baseURL: 'https://nexwall.kodnextech.com/api/developer/v1',
  headers: {
    Authorization: 'Bearer YOUR_NEXWALL_API_KEY',
    Accept: 'application/json',
  },
});

export const getWallpapers = async (page = 1, categoryId = null) => {
  const params = { page, per_page: 20 };
  if (categoryId) params.category_id = categoryId;
  const res = await API.get('/wallpapers', { params });
  return res.data.data;
};

2. FlatList 2-Column Grid Component

import React, { useEffect, useState } from 'react';
import { FlatList, Image, StyleSheet, View, Dimensions, ActivityIndicator } from 'react-native';
import { getWallpapers } from './api';

const { width } = Dimensions.get('window');
const ITEM_WIDTH = (width - 36) / 2;

export default function WallpaperGrid() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const loadMore = async () => {
    if (loading) return;
    setLoading(true);
    const newItems = await getWallpapers(page);
    setItems((prev) => [...prev, ...newItems]);
    setPage((p) => p + 1);
    setLoading(false);
  };

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

  return (
    <FlatList
      data={items}
      numColumns={2}
      keyExtractor={(item) => item.id.toString()}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Image source={ { uri: item.thumbnail_url } } style={styles.image} />
        </View>
      )}
      ListFooterComponent={loading ? <ActivityIndicator color="#7C8CFF" /> : null}
    />
  );
}

const styles = StyleSheet.create({
  card: { margin: 6, borderRadius: 14, overflow: 'hidden', backgroundColor: '#1A1D27' },
  image: { width: ITEM_WIDTH, height: ITEM_WIDTH * (16 / 9) },
});