WIP 1.4 updates.

components/screen-main/screen-main.component.jsx

@@ -1,13 +1,11 @@
 import { Ionicons } from "@expo/vector-icons";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { createDrawerNavigator } from "@react-navigation/drawer";
 import { NavigationContainer } from "@react-navigation/native";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import i18n from "i18next";
 import moment from "moment";
 import React, { useEffect } from "react";
-import { View } from "react-native";
-import { Button, Text } from "react-native-paper";
+import { Button } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
@@ -28,11 +26,10 @@ import ScreenSettingsComponent from "../screen-settings/screen-settings.componen
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
 
-const JobsTab = createDrawerNavigator();
-const ActiveJobStack = createStackNavigator();
-const MoreStack = createStackNavigator();
+const ActiveJobStack = createNativeStackNavigator();
+const MoreStack = createNativeStackNavigator();
 const BottomTabs = createBottomTabNavigator();
-const MediaBrowserStack = createStackNavigator();
+const MediaBrowserStack = createNativeStackNavigator();
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -48,21 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
   setCameraJob: (job) => dispatch(setCameraJob(job)),
 });
 
-const JobsTabNavigator = () => (
-  <JobsTab.Navigator initialRouteName="Home">
-    <JobsTab.Screen name="Home" component={ActiveJobStackNavigator} />
-    <JobsTab.Screen
-      name="Home2"
-      component={() => (
-        <View>
-          <Text>2</Text>
-        </View>
-      )}
-    />
-  </JobsTab.Navigator>
-);
-
-const ActiveJobStackNavigator = connect(
+const JobsTabNavigator = connect(
   mapStateToProps,
   mapDispatchToProps
 )(({ setCameraJobId, setCameraJob }) => (

components/screen-production/screen-production.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
+import DraggableFlatList, {
+  ScaleDecorator,
+  NestableScrollContainer,
+  NestableDraggableFlatList,
+} from "react-native-draggable-flatlist";
+
+const NUM_ITEMS = 10;
+function getColor(i) {
+  const multiplier = 255 / (NUM_ITEMS - 1);
+  const colorVal = i * multiplier;
+  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
+}
+
+const initialData = [...Array(NUM_ITEMS)].map((d, index) => {
+  const backgroundColor = getColor(index);
+  return {
+    key: `item-${index}`,
+    label: String(index) + "",
+    height: 100,
+    width: 60 + Math.random() * 40,
+    backgroundColor,
+  };
+});
+
+const initialData2 = [...Array(NUM_ITEMS)].map((d, index) => {
+  const backgroundColor = getColor(index);
+  return {
+    key: `item-${index}`,
+    label: String(index) + "",
+    height: 100,
+    width: 60 + Math.random() * 40,
+    backgroundColor,
+  };
+});
+
+export default function App() {
+  const [data, setData] = useState(initialData);
+  const [data2, setData2] = useState(initialData2);
+
+  const renderItem = ({ item, drag, isActive }) => {
+    return (
+      <ScaleDecorator>
+        <TouchableOpacity
+          onLongPress={drag}
+          disabled={isActive}
+          style={[
+            styles.rowItem,
+            { backgroundColor: isActive ? "red" : item.backgroundColor },
+          ]}
+        >
+          <Text style={styles.text}>{item.label}</Text>
+        </TouchableOpacity>
+      </ScaleDecorator>
+    );
+  };
+
+  return (
+    <NestableScrollContainer>
+      <NestableDraggableFlatList
+        data={data}
+        onDragEnd={({ data }) => setData(data)}
+        keyExtractor={(item) => item.key}
+        renderItem={renderItem}
+      />
+      <NestableDraggableFlatList
+        data={data2}
+        onDragEnd={({ data }) => setData2(data)}
+        keyExtractor={(item) => item.key}
+        renderItem={renderItem}
+      />
+    </NestableScrollContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  rowItem: {
+    height: 100,
+    width: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    color: "white",
+    fontSize: 24,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});