@fadyshawky/react-native-magic 2.2.0 → 2.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 **Plug and play** – create your app and start developing without hassle.
 
-A production-ready React Native template with TypeScript, Redux, React Navigation, and a scalable architecture (Uprise-style). Use it to bootstrap new apps with one command.
+A production-ready React Native template with TypeScript, Redux Toolkit, React Navigation, and a scalable architecture (Uprise-style). Use it to bootstrap new apps with one command.
 
 ## Requirements
 
@@ -43,6 +43,7 @@ npm run ios    # or an Android variant below
 2. **API** – Copy `.env.example` to `.env` and set `API_BASE_URL` (and other vars) for your backend.
 3. **Theme** – Edit `src/core/theme/colors.ts` (and `fonts.ts`, `commonSizes.ts` if needed) for your brand.
 4. **Config** – Optional: adjust `src/core/config/index.ts` for feature toggles or app-level constants.
+5. **Lists** – Use `src/common/components/FlatListWrapper.tsx` (FlashList-backed) and tune `estimatedItemSize` for heavy lists.
 
 ## Documentation
 
@@ -57,7 +58,7 @@ In your generated project you’ll have:
 ```
 src/
 ├── common/          # Shared components, localization, helpers, validations, utils
-├── core/            # Store (Redux), API, theme, config
+├── core/            # Store (Redux Toolkit), API, theme, config
 ├── navigation/      # Auth stack, main stack, tabs
 ├── screens/         # Feature screens
 └── sheetManager/    # Action sheets

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.2.0",
-  "description": "Plug-and-play React Native template: TypeScript, Redux, React Navigation, scalable architecture. Init and start developing without hassle.",
+  "version": "2.2.1",
+  "description": "Plug-and-play React Native template: TypeScript, Redux Toolkit, React Navigation, scalable architecture. Init and start developing without hassle.",
   "keywords": [
     "react-native-magic",
     "react-native",

package/template/package.json

@@ -22,6 +22,7 @@
     "@react-navigation/native": "7.1.33",
     "@react-navigation/native-stack": "7.14.4",
     "@reduxjs/toolkit": "2.11.2",
+    "@shopify/flash-list": "^2.0.2",
     "axios": "1.13.6",
     "babel-plugin-transform-remove-console": "6.9.4",
     "dayjs": "1.11.19",

package/template/src/common/components/FlatListWrapper.tsx

@@ -1,5 +1,5 @@
 import React, {FC, useMemo} from 'react';
-import {FlatList, FlatListProps} from 'react-native';
+import {FlashList, FlashListProps} from '@shopify/flash-list';
 import {LoadState} from '../../../types';
 import {TryAgain} from './TryAgain';
 import {Separator} from './Separator';
@@ -9,14 +9,16 @@ import {localization} from '../localization/localization';
 import {defaultKeyIdExtractor} from '../helpers/defaultKeyIdExtractor';
 import {CommonStyles} from '../../core/theme/commonStyles';
 
-interface IProps extends FlatListProps<any> {
+interface IProps extends FlashListProps<any> {
   loadState: LoadState;
   tryAgain?: () => void;
   error?: string | null;
 }
 
+// Shared FlashList defaults. Tune estimatedItemSize per-screen for long/heavy lists.
 const FlatListWrapperProps = {
   keyExtractor: defaultKeyIdExtractor,
+  estimatedItemSize: 72,
   ListEmptyComponent: (
     <EmptyView
       title={localization.empty.noData}
@@ -54,13 +56,12 @@ export function FlatListWrapper({
     return <LoadingComponent />;
   } else {
     return (
-      <FlatList
+      <FlashList
         contentContainerStyle={CommonStyles.listContentContainer}
         {...FlatListWrapperProps}
         {...props}
         refreshing={refreshing}
         ListEmptyComponent={ListEmptyComponent}
-        removeClippedSubviews={true}
       />
     );
   }