GPT

Cross-Platform React Native Component

// React Native component with platform-specific optimizations import React, { useMemo, useCallback } from 'react'; import { FlatList, StyleSheet, Platform, RefreshControl, } from 'react-native'; import { useSafeArea

Prompt text

Original English text. Replace placeholders with your own details.

// React Native component with platform-specific optimizations
import React, { useMemo, useCallback } from 'react';
import {
 FlatList,
 StyleSheet,
 Platform,
 RefreshControl,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useInfiniteQuery } from '@tanstack/react-query';

interface ProductListProps {
 onProductSelect: (product: Product) => void;
}

export const ProductList: React.FC<ProductListProps> = ({ onProductSelect }) => {
 const insets = useSafeAreaInsets();

 const {
 data,
 fetchNextPage,
 hasNextPage,
 isLoading,
 isFetchingNextPage,
 refetch,
 isRefetching,
 } = useInfiniteQuery({
 queryKey: ['products'],
 queryFn: ({ pageParam = 0 }) => fetchProducts(pageParam),
 getNextPageParam: (lastPage, pages) => lastPage.nextPage,
 });

 const products = useMemo(
 () => data?.pages.flatMap(page => page.products) ?? [],
 [data]
 );

 const renderItem = useCallback(({ item }: { item: Product }) => (
 <ProductCard
 product={item}
 onPress={() => onProductSelect(item)}
 style={styles.productCard}
 />
 ), [onProductSelect]);

 const handleEndReached = useCallback(() => {
 if (hasNextPage && !isFetchingNextPage) {
 fetchNextPage();
 }
 }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

 const keyExtractor = useCallback((item: Product) => item.id, []);

 return (
 <FlatList
 data={products}
 renderItem={renderItem}
 keyExtractor={keyExtractor}
 onEndReached={handleEndReached}
 onEndReachedThreshold={0.5}
 refreshControl={
 <RefreshControl
 refreshing={isRefetching}
 onRefresh={refetch}
 colors={['#007AFF']}
 tintColor="#007AFF"
 />
 }
 contentContainerStyle={[
 styles.container,
 { paddingBottom: insets.bottom }
 ]}
 showsVerticalScrollIndicator={false}
 removeClippedSubviews={Platform.OS === 'android'}
 maxToRenderPerBatch={10}
 updateCellsBatchingPeriod={50}
 windowSize={21}
 />
 );
};

const styles = StyleSheet.create({
 container: {
 padding: 16,
 },
 productCard: {
 marginBottom: 12,
 ...Platform.select({
 ios: {
 shadowColor: '#000',
 shadowOffset: { width: 0, height: 2 },
 shadowOpacity: 0.1,
 shadowRadius: 4,
 },
 android: {
 elevation: 3,
 },
 }),
 },
});

Source & attribution

Awesome Prompts · Awesome Prompts

Source-listed license: GPL-3.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →