Merge pull request functionland#175 from ghorbani-m/main

- LocalDB sync issue is fixed. - The library tab is implemented. - The library's assets list is added.
keithluchtel · May 17, 2022 · a392ad3 · a392ad3
2 parents 2f523b5 + 9b97557
commit a392ad3
Show file tree

Hide file tree

Showing 21 changed files with 531 additions and 229 deletions.
diff --git a/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx b/app/components/asset-list/recycler-asset-list/asset-items/asset-item.tsx
@@ -49,7 +49,7 @@ const AssetItem = (props: Props): JSX.Element => {
           <Image
             style={styles.image}
             source={{
-              uri: asset.uri,
+              uri: asset?.uri,
             }}
             fadeDuration={100}
             resizeMode="cover"

diff --git a/app/components/asset-list/recycler-asset-list/index.tsx b/app/components/asset-list/recycler-asset-list/index.tsx
@@ -286,6 +286,15 @@ const RecyclerAssetList = forwardRef<RecyclerAssetListHandler, Props>(({
     //rclRef.current?._onScroll(0, dyanmicScrollY.value + lastScrollY.value)
     setCurrentColumns(numColumns.value)
   }
+
+  const updateContainerSize=()=>{
+    const heights = Object.values(
+      gridLayoutProvider.getLayoutManager?.()?.getAllContentDimension()?.height || {},
+    )
+    if (heights.length) {
+      setContainerSize(heights)
+    }
+  }
   return (
     <View style={{ flex: 1 }} onLayout={(e) => {
       setViewPortHeight(e.nativeEvent.layout.height)
@@ -308,19 +317,15 @@ const RecyclerAssetList = forwardRef<RecyclerAssetListHandler, Props>(({
         dataProvider={dataProvider}
         extendedState={extendedState}
         layoutProvider={gridLayoutProvider}
+
         rowRenderer={rowRenderer}
         externalScrollView={ExternalScrollView}
         scrollViewProps={{
           disableScrollViewPanResponder: false,
           scrollRefExternal: scrollRef,
           _onScrollExternal: scrollHandler,
           onLayout: () => {
-            const heights = Object.values(
-              gridLayoutProvider.getLayoutManager?.()?.getAllContentDimension()?.height || {},
-            )
-            if (heights.length) {
-              setContainerSize(heights)
-            }
+            updateContainerSize();
           }
         }}
         onVisibleIndicesChanged={(all = [], now, notNow) => {
@@ -337,7 +342,11 @@ const RecyclerAssetList = forwardRef<RecyclerAssetListHandler, Props>(({
         renderItemContainer={renderItemContainer}
         renderContentContainer={(props, children) => {
           return (
-            <Animated.View {...props} style={[props.style, containerStyle]}>
+            <Animated.View {...props} style={[props.style, containerStyle]} onLayout={()=>{
+              if(!pinching.value){
+                updateContainerSize()
+              }
+            }}>
               {children}
             </Animated.View>
           )

diff --git a/app/components/header/header-arrow-back.tsx b/app/components/header/header-arrow-back.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+import { Icon, IconProps } from "@rneui/themed"
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+interface Props {
+    iconProps?: IconProps,
+    navigation?: NativeStackNavigationProp<unknown, unknown>;
+}
+
+export const HeaderArrowBack = ({ iconProps = {}, navigation }: Props) => {
+    return (
+        <Icon type="Ionicons" name="arrow-back" size={28} style={{marginTop:3}} {...iconProps} onPress={() => {
+            navigation?.pop()
+        }} />
+    )
+}
diff --git a/app/components/header/header-center-container.tsx b/app/components/header/header-center-container.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import { View, ViewStyle, StyleSheet, StyleProp } from "react-native"
+
+type Props = {
+    style?: StyleProp<ViewStyle>
+}
+export const HeaderCenterContainer: React.FC<Props> = ({ style, children }) => {
+    return (
+        <View style={[styles.headerCenterContainer,style]}>
+            {children}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    headerCenterContainer: {
+        flex: 1,
+        flexDirection: "row",
+    },
+})
diff --git a/app/components/header/header-left-container.tsx b/app/components/header/header-left-container.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { View, ViewStyle, StyleSheet, StyleProp } from "react-native"
+
+type Props = {
+    style?: StyleProp<ViewStyle>
+}
+export const HeaderLeftContainer: React.FC<Props> = ({ style, children }) => {
+    return (
+        <View style={[styles.headerLeftContainer,style]}>
+            {children}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    headerLeftContainer: {
+        flex: 1,
+        flexDirection: "row",
+        paddingStart: 5,
+        alignItems:"center"
+    },
+})
diff --git a/app/components/header/header-logo.tsx b/app/components/header/header-logo.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import { Image, ImageStyle, StyleProp, StyleSheet } from "react-native"
+
+type Props = {
+    style?: StyleProp<ImageStyle>
+}
+export const HeaderLogo = (props: Props) => {
+    return (
+        <Image
+            fadeDuration={0}
+            resizeMode="contain"
+            source={require("../../../assets/images/logo.png")}
+            {...props}
+            style={[styles.logo, props.style]}
+        />
+    )
+}
+
+const styles = StyleSheet.create({
+    logo: {
+        height: 30,
+        alignSelf: "center",
+        backgroundColor: "transparent"
+    }
+})
diff --git a/app/components/header/header-right-container.tsx b/app/components/header/header-right-container.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { View, ViewStyle, StyleSheet, StyleProp } from "react-native"
+
+type Props = {
+    style?: StyleProp<ViewStyle>
+}
+export const HeaderRightContainer: React.FC<Props> = ({ style, children }) => {
+    return (
+        <View style={[styles.headerRightContainer, style]}>
+            {children}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    headerRightContainer: {
+        flex: 1,
+        flexDirection: "row",
+        paddingEnd: 5,
+        alignItems:"center"
+    },
+})
diff --git a/app/components/header/index.ts b/app/components/header/index.ts
@@ -1 +1,6 @@
 export * from "./header"
+export * from "./header-center-container"
+export * from "./header-left-container"
+export * from "./header-right-container"
+export * from "./header-arrow-back"
+export * from "./header-logo"
diff --git a/app/navigators/app-navigator.tsx b/app/navigators/app-navigator.tsx
@@ -5,7 +5,7 @@ import { NavigationContainer } from "@react-navigation/native"
 import { createSharedElementStackNavigator } from "react-navigation-shared-element"
 
 import { navigationRef } from "./navigation-utilities"
-import { PhotoScreen } from "../screens"
+import { PhotoScreen, LibraryAssetsScreen } from "../screens"
 import { HomeNavigator } from "./home-navigator"
 import { ThemeContext } from '../theme';
 enableScreens()
@@ -16,7 +16,8 @@ export type NavigatorParamList = {
 }
 export enum AppNavigationNames {
   HomeScreen = "home",
-  PhotoScreen = "photo"
+  PhotoScreen = "photo",
+  LibraryAssets = "LibraryAssets"
 }
 const Stack = createSharedElementStackNavigator<NavigatorParamList>()
 
@@ -25,16 +26,18 @@ const AppStack = () => {
     <Stack.Navigator
       nitialRouteName={AppNavigationNames.HomeScreen}
       screenOptions={{
+        headerShown: false,
+        headerTransparent: true,
       }}
     >
       <Stack.Screen
         name={AppNavigationNames.HomeScreen}
-        options={{
-          headerShown: false,
-          headerTransparent: true,
-        }}
         component={HomeNavigator}
       />
+      <Stack.Screen
+        name={AppNavigationNames.LibraryAssets}
+        component={LibraryAssetsScreen}
+      />
       <Stack.Screen
         name={AppNavigationNames.PhotoScreen}
         options={{

diff --git a/app/navigators/home-navigator.tsx b/app/navigators/home-navigator.tsx
@@ -4,7 +4,7 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
 import { useTheme } from "@react-navigation/native"
 import FontAwesome5 from "react-native-vector-icons/FontAwesome5"
 
-import { HomeScreen } from "../screens"
+import { HomeScreen, LibraryScreen } from "../screens"
 import { TabHeader } from "../components/header/tab-header"
 import { UnderConstruction } from "../components"
 export type HomeNavigationParamList = {
@@ -13,6 +13,7 @@ export type HomeNavigationParamList = {
 
 export enum HomeNavigationTypes {
   PhotosTab = "PhotosTab",
+  LibraryTab = "LibraryTab",
 }
 function UnderConstructionScreen() {
   return (
@@ -52,11 +53,11 @@ export function HomeNavigator() {
                 size={25}
                 color={props?.focused ? colors.text : "gray"}
               />
-      )
+            )
           },
         }}
-      name={HomeNavigationTypes.PhotosTab}
-      component={HomeScreen}
+        name={HomeNavigationTypes.PhotosTab}
+        component={HomeScreen}
       />
       <HomeTabs.Screen
         name="Search"
@@ -91,8 +92,9 @@ export function HomeNavigator() {
         component={UnderConstructionScreen}
       />
       <HomeTabs.Screen
-        name="Library"
+        name={HomeNavigationTypes.LibraryTab}
         options={{
+          tabBarLabel: "Library",
           tabBarIcon: function tabIcon(props) {
             return (
               <FontAwesome5
@@ -104,7 +106,7 @@ export function HomeNavigator() {
             )
           },
         }}
-        component={UnderConstructionScreen}
+        component={LibraryScreen}
       />
     </HomeTabs.Navigator>
   )