Fix: TabBar

app/components/Bar/BottomBar.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ConfigContext } from '~/contexts/config';
+
+import { ThemeContext } from '~/contexts/theme';
+
+const BottomBar = ({ state, descriptors, navigation }) => {
+  const insets = useSafeAreaInsets();
+  const config = React.useContext(ConfigContext)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <View>
+      <View style={{
+        flexDirection: 'row',
+        backgroundColor: theme.secondaryDark,
+        borderTopColor: theme.secondaryDark,
+        borderTopWidth: 1,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      >
+        {state.routes.map((route, index) => {
+          const { options } = descriptors[route.key];
+          const isFocused = state.index === index;
+
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
+            }
+          };
+
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+
+          const getColor = () => {
+            if (isFocused) return theme.primaryTouch
+            if (!config.query && route.name !== 'Settings') return theme.secondaryLight
+            return theme.primaryLight
+          }
+
+          return (
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityState={isFocused ? { selected: true } : {}}
+              accessibilityLabel={options.tabBarAccessibilityLabel}
+              testID={options.tabBarTestID}
+              onPress={onPress}
+              onLongPress={onLongPress}
+              style={{
+                flex: 1,
+                paddingBottom: insets.bottom ? insets.bottom : 10,
+                paddingTop: 10,
+              }}
+              key={index}
+              disabled={(!config.query && route.name !== 'Settings')}
+            >
+              <Icon name={options.icon} size={20} color={getColor()} style={{ alignSelf: 'center', marginBottom: 5 }} />
+              <Text style={{ color: getColor(), textAlign: 'center' }}>
+                {options.title}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View >
+  )
+}
+
+
+export default BottomBar;

app/components/Bar/SideBar.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Text, View, TouchableOpacity, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ConfigContext } from '~/contexts/config';
+
+import { ThemeContext } from '~/contexts/theme';
+import pkg from '~/../package.json';
+
+const SideBar = ({ state, descriptors, navigation }) => {
+  const insets = useSafeAreaInsets();
+  const config = React.useContext(ConfigContext)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <View style={{
+      flexDirection: 'column',
+      backgroundColor: theme.secondaryDark,
+      borderTopColor: theme.secondaryDark,
+      borderTopWidth: 1,
+      height: '100%',
+      width: 250,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+      borderEndWidth: 1,
+      borderEndColor: theme.tertiaryDark,
+    }}
+    >
+      <View style={{ marginHorizontal: 10, marginTop: 15, marginBottom: 15 }} >
+        <TouchableOpacity
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+          }}>
+          <Image
+            source={require('~/../assets/icon.png')}
+            style={{ width: 50, height: 50, borderRadius: 10, marginEnd: 10 }}
+          />
+          <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
+            <Text style={{ color: theme.primaryLight, fontSize: 20, marginBottom: 0 }}>Castafiore</Text>
+            <Text style={{ color: theme.secondaryLight, fontSize: 13 }}>Version {pkg.version}</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        const getColor = () => {
+          if (isFocused) return theme.primaryTouch
+          if (!config.query && route.name !== 'Settings') return theme.secondaryLight
+          return theme.primaryLight
+        }
+
+        return (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: isFocused ? theme.primaryDark : undefined,
+              marginHorizontal: 10,
+              paddingVertical: 4,
+              paddingLeft: 10,
+              borderRadius: 8,
+              marginBottom: 3,
+            }}
+            key={index}
+            disabled={(!config.query && route.name !== 'Settings')}
+          >
+            <Icon name={options.icon} size={26} color={getColor()} style={{ marginRight: 10 }} />
+            <Text style={{ color: getColor(), textAlign: 'left', fontSize: 20, fontWeight: '550' }}>
+              {options.title}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  )
+}
+
+export default SideBar;

app/components/ImageError.js

@@ -7,17 +7,18 @@ const ImageError = ({ source, style, children }) => {
 	React.useEffect(() => {
 		if (!source?.uri) setIsImage(false)
 		else setIsImage(true)
-	}, [source.uri])
+	}, [source?.uri])
 
-	return (
-		<>
-			{isImage ? <Image
+	if (isImage) {
+		return (
+			<Image
 				source={source}
 				onError={() => setIsImage(false)}
 				style={style}
-			/> : children}
-		</>
-	)
+			/>
+		)
+	}
+	return children
 }
 
 export default ImageError;