feat(mobile): 💄 minor code optimisations

Signed-off-by: Yunus Andréasson <yunus@edenmind.com>

mobile/components/category-chip.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import { Chip, Text, useTheme } from 'react-native-paper'
 
 import { useSharedStyles } from '../styles/common.js'
@@ -9,20 +9,9 @@ export const CategoryChip = ({ category }) => {
   const theme = useTheme()
   const sharedStyle = useSharedStyles(theme)
 
-  const styles = StyleSheet.create({
-    chip: {
-      backgroundColor: theme.colors.elevation.transparent,
-      borderBottomWidth: 4,
-      borderColor: theme.colors.elevation.level2,
-      borderWidth: 2,
-      marginRight: 15,
-      marginTop: -20
-    }
-  })
-
   return (
     <View style={{ alignSelf: 'flex-start' }}>
-      <Chip compact={true} style={styles.chip}>
+      <Chip compact={true} style={sharedStyle.chip}>
         <Text style={sharedStyle.labelText}>{category.toUpperCase()}</Text>
       </Chip>
     </View>

mobile/components/fade-in-view.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React, { useEffect, useRef } from 'react'
 import { Animated } from 'react-native'
 
-const FadeInView = ({ children, style }) => {
+const FadeInView = ({ children }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current
 
   useEffect(() => {
@@ -19,16 +19,11 @@ const FadeInView = ({ children, style }) => {
     return () => animation.stop()
   }, []) // Empty dependency array to run effect only once
 
-  return <Animated.View style={[style, { opacity: fadeAnim }]}>{children}</Animated.View>
+  return <Animated.View style={{ opacity: fadeAnim }}>{children}</Animated.View>
 }
 
 FadeInView.propTypes = {
-  children: PropTypes.node.isRequired,
-  style: PropTypes.object.isRequired
-}
-
-FadeInView.defaultProps = {
-  style: {}
+  children: PropTypes.node.isRequired
 }
 
 export default FadeInView

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.368",
+  "version": "1445.2.369",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],
@@ -27,15 +27,14 @@
     "@bugsnag/source-maps": "^2.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/netinfo": "9.3.10",
-    "@react-navigation/drawer": "^6.6.3",
-    "@react-navigation/material-top-tabs": "^6.6.3",
-    "@react-navigation/native": "^6.1.7",
-    "@react-navigation/native-stack": "^6.9.13",
-    "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.5.0",
+    "@react-navigation/drawer": "^6.6.4",
+    "@react-navigation/native": "^6.1.8",
+    "@react-navigation/native-stack": "^6.9.14",
+    "@reduxjs/toolkit": "^1.9.6",
+    "axios": "^1.5.1",
     "axios-retry": "^3.8.0",
     "deepmerge": "^4.3.1",
-    "expo": "^49.0.11",
+    "expo": "^49.0.13",
     "expo-application": "~5.3.1",
     "expo-av": "~13.6.0",
     "expo-constants": "~14.4.2",
@@ -44,6 +43,7 @@
     "expo-file-system": "~15.6.0",
     "expo-font": "~11.4.0",
     "expo-haptics": "~12.6.0",
+    "expo-linear-gradient": "^12.5.0",
     "expo-mail-composer": "~12.5.0",
     "expo-splash-screen": "~0.22.0",
     "expo-updates": "~0.18.12",
@@ -70,10 +70,10 @@
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-typescript": "^7.22.5",
-    "@testing-library/react-native": "^12.2.0",
-    "@types/jest": "^29.5.3",
-    "axios-mock-adapter": "^1.21.5",
-    "eslint": "^8.49.0",
+    "@testing-library/react-native": "^12.3.0",
+    "@types/jest": "^29.5.5",
+    "axios-mock-adapter": "^1.22.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^5.0.0",

mobile/screens/text-bilingual-heading.js

@@ -1,6 +1,7 @@
+import { LinearGradient } from 'expo-linear-gradient'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Image } from 'react-native'
+import { Image, View, StyleSheet } from 'react-native'
 import { Text, Divider, useTheme } from 'react-native-paper'
 
 import { useSharedStyles } from '../styles/common.js'
@@ -13,7 +14,15 @@ export default function TextBilingualHeading({ heading }) {
 
   return (
     <>
-      <Image source={{ uri: image }} style={style.image} />
+      <View>
+        <Image source={{ uri: image }} style={style.image} />
+        <LinearGradient
+          colors={['transparent', theme.colors.background]} // Change rgba values to your desired color and opacity
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+      </View>
       <Text variant="headlineLarge" style={style.title}>
         {title}
       </Text>

mobile/screens/text-list.js

@@ -75,12 +75,11 @@ export default function TextList({ route, navigation }) {
         alignItems: 'center',
         backgroundColor: theme.colors.background,
         borderBottomWidth: 4,
-        borderColor: theme.colors.elevation.level3,
+        borderColor: theme.colors.elevation.level2,
         borderRadius: 10,
-        borderTopWidth: 1,
         borderWidth: 2,
         flexDirection: 'row',
-        marginBottom: 5
+        marginBottom: 4
       }}
     >
       <View style={{ ...sharedStyle.container, flex: 1 }}>{children}</View>
@@ -119,7 +118,7 @@ export default function TextList({ route, navigation }) {
 
   return textsLoading ? (
     <>
-      <FadeInView style={{ flex: 1 }}>
+      <FadeInView>
         <FlatList
           initialNumToRender={5}
           removeClippedSubviews={true}

mobile/styles/common.js

@@ -34,6 +34,12 @@ export const useSharedStyles = (theme) => {
   const { englishFontSize } = useSelector(englishSelector) || { englishFontSize: 17 }
   const { arabicFontName } = useSelector(arabicFontNameSelector) || { arabicFontName: 'uthman' }
 
+  // Branded components
+  const BACKGROUND_COLOR = theme.colors.transparent
+  const BORDER_BOTTOM_WIDTH = 4
+  const BORDER_WIDTH = 2
+  const BORDER_COLOR = theme.colors.elevation.level2
+
   const arabicFontSizeWeighted = arabicFontSize * (FONT_WEIGHTS[arabicFontName] || 1)
 
   return useMemo(() => {
@@ -99,17 +105,17 @@ export const useSharedStyles = (theme) => {
         marginTop: BASE_MARGIN
       },
       buttonAnswer: {
-        backgroundColor: elevation.transparent,
-        borderBottomWidth: 4,
-        borderColor: elevation.level2,
-        borderWidth: 2,
+        backgroundColor: BACKGROUND_COLOR,
+        borderBottomWidth: BORDER_BOTTOM_WIDTH,
+        borderColor: BORDER_COLOR,
+        borderWidth: BORDER_WIDTH,
         marginVertical: BASE_MARGIN
       },
       card: {
-        borderBottomWidth: 4,
-        borderColor: elevation.level2,
-        borderTopWidth: 0,
-        borderWidth: 2,
+        backgroundColor: BACKGROUND_COLOR,
+        borderBottomWidth: BORDER_BOTTOM_WIDTH,
+        borderColor: BORDER_COLOR,
+        borderWidth: BORDER_WIDTH,
         marginHorizontal: 3 * BASE_MARGIN,
         marginVertical: 1.5 * BASE_MARGIN
       },
@@ -121,6 +127,14 @@ export const useSharedStyles = (theme) => {
         fontFamily: 'philosopher',
         fontSize: 21
       },
+      chip: {
+        backgroundColor: BACKGROUND_COLOR,
+        borderBottomWidth: BORDER_BOTTOM_WIDTH,
+        borderColor: BORDER_COLOR,
+        borderWidth: BORDER_WIDTH,
+        marginRight: 15,
+        marginTop: -20
+      },
       container: {
         margin: BASE_MARGIN * 3
       },
@@ -212,7 +226,6 @@ export const useSharedStyles = (theme) => {
         color: theme.colors.onBackground,
         fontFamily: 'philosopher',
         paddingHorizontal: 25,
-        paddingTop: 25,
         textAlign: 'center'
       },
       wordCenteredView: {
@@ -246,14 +259,14 @@ export const useSharedStyles = (theme) => {
     error,
     englishFontSize,
     elevation.tertiaryContainer,
-    elevation.transparent,
-    elevation.level2,
     theme.colors.onSurfaceVariant,
     theme.colors.secondary,
     theme.colors.tertiary,
     theme.colors.elevation.level0,
     theme.colors.elevation.level5,
     theme.colors.outline,
-    theme.colors.onBackground
+    theme.colors.onBackground,
+    BACKGROUND_COLOR,
+    BORDER_COLOR
   ])
 }