Init react-native project

reactnative/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

reactnative/App.tsx

@@ -0,0 +1,83 @@
+import { FlashList } from '@shopify/flash-list';
+import { StatusBar } from 'expo-status-bar';
+import { useRef, useState } from 'react';
+import { LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  const generateArray = (size: number) => {
+    const arr = new Array(size);
+    for (let i = 0; i < size; i++) {
+      arr[i] = i;
+    }
+    return arr;
+  };
+  
+  const [refreshing, setRefreshing] = useState(false);
+  const [data, setData] = useState(generateArray(100));
+  
+  const list = useRef<FlashList<number> | null>(null);
+  
+  const removeItem = (item: number) => {
+    setData(
+      data.filter((dataItem) => {
+        return dataItem !== item;
+      })
+    );
+    list.current?.prepareForLayoutAnimationRender();
+    // after removing the item, we start animation
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  };
+  
+  const renderItem = ({ item }: { item: number }) => {
+    const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
+    return (
+      <Pressable
+        onPress={() => {
+          removeItem(item);
+        }}
+      >
+        <View
+          style={{
+            ...styles.container,
+            backgroundColor: item > 97 ? "red" : backgroundColor,
+            height: item % 2 === 0 ? 100 : 200,
+          }}
+        >
+          <Text>Cell Id: {item}</Text>
+        </View>
+      </Pressable>
+    );
+  };
+  
+  return (
+    <FlashList
+          ref={list}
+          style={{flexGrow: 1, width: '100%', height: 50, backgroundColor: '#88F'}}
+          refreshing={refreshing}
+          onRefresh={() => {
+            setRefreshing(true);
+            setTimeout(() => {
+              setRefreshing(false);
+            }, 2000);
+          }}
+          keyExtractor={(item: number) => {
+            return item.toString();
+          }}
+          getItemType={(item: number) => {
+            return item > 97 ? "even" : "odd";
+          }}
+          renderItem={renderItem}
+          estimatedItemSize={100}
+          data={data}
+        />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

reactnative/Makefile

@@ -0,0 +1,4 @@
+
+
+run:
+	npx expo start

reactnative/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "simplecloudnotifier",
+    "slug": "simplecloudnotifier",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

reactnative/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

reactnative/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "simplecloudnotifier",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.10",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "@shopify/flash-list": "1.4.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

reactnative/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}