Expo update, components fix

components/Layout/Layout.jsx

@@ -6,10 +6,15 @@ const Layout = ({ children }) => {
   const { colors } = useTheme();
 
   return (
-    <View style={{ flex: 1, backgroundColor: colors.background }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: colors.background,
+      }}
+    >
       {children}
     </View>
   );
 };
 
-export default Layout
+export default Layout;

components/ListItem/ListItem.jsx

@@ -25,7 +25,7 @@ const ListItem = ({ photo, title, onPress, publishedAt }) => {
       <View style={styles.imageContainer}>
         <Image
           style={styles.image}
-          source={{ uri: `http://localhost:1337${photo.small.url}` }}
+          source={{ uri: `https://strapi.dilig.net${photo.small.url}` }}
         />
         <View style={{ width: windowWidth - 220 }}>
           <Text

navigation/RootNavigation.js

@@ -1,7 +1,7 @@
 import React from "react";
 import AppStack from "./AppStack";
 import AuthStack from "./AuthStack";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useSelector } from "react-redux";
 import { selectTokens } from "@store/selectors/loginSelectors";
 import { StatusBar } from "expo-status-bar";

package.json

@@ -7,36 +7,36 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.5.2",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/datetimepicker": "6.7.3",
     "@react-native-masked-view/masked-view": "0.2.8",
     "@react-navigation/bottom-tabs": "^6.4.3",
     "@react-navigation/drawer": "^6.5.5",
     "@react-navigation/native": "^6.0.16",
     "@react-navigation/native-stack": "^6.9.4",
     "axios": "^1.2.1",
-    "expo": "~47.0.8",
-    "expo-auth-session": "~3.8.0",
-    "expo-random": "~13.0.0",
-    "expo-splash-screen": "~0.17.5",
+    "expo": "^48.0.19",
+    "expo-auth-session": "~4.0.3",
+    "expo-random": "~13.1.1",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.2",
-    "expo-web-browser": "~12.0.0",
+    "expo-web-browser": "~12.1.1",
     "formik": "^2.2.9",
     "i18next": "^22.4.13",
     "jwt-decode": "^3.1.2",
     "lodash.filter": "^4.6.0",
     "lodash.isempty": "^4.4.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-i18next": "^12.2.0",
-    "react-native": "0.70.8",
-    "react-native-gesture-handler": "~2.8.0",
+    "react-native": "0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-indicators": "^0.17.0",
     "react-native-loading-spinner-overlay": "^3.0.1",
-    "react-native-reanimated": "~2.12.0",
+    "react-native-reanimated": "~2.14.4",
     "react-native-responsive-screen": "^1.4.2",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-vector-icons": "^9.2.0",

request/index.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const request = axios.create({
-  baseURL: "http://localhost:1337/",
+  baseURL: "https://strapi.dilig.net",
   headers: {
     "Content-Type": "application/json",
   },

screens/HomeScreen.jsx

@@ -45,8 +45,8 @@ const HomeScreen = ({ navigation }) => {
   const fetchAll = async () => {
     const { data } = await getRequest("api/posts?populate=*");
 
-    if (data.data) {
-      setPosts(data.data);
+    if (data?.data) {
+      setPosts(data?.data);
     }
   };
 
@@ -61,7 +61,6 @@ const HomeScreen = ({ navigation }) => {
   }, [posts]);
   return (
     <Layout>
-      <ScrollView style={{ padding: 20 }}>
         <View style={styles.wrapper}>
           <Text style={{ fontSize: 18, color: colors.textPrimary }}>
             {t("common.hello")}, Diligent
@@ -102,36 +101,37 @@ const HomeScreen = ({ navigation }) => {
             </View>
           )}
         </Text>
+        <ScrollView style={{flex: 1,paddingHorizontal: 18}}>
         {query.length === 0
-          ? posts.map((post) => (
+          ? posts?.map((post) => (
               <ListItem
-                key={post.id}
-                title={post.attributes.title}
-                photo={post.attributes.profileImage.data.attributes.formats}
-                publishedAt={post.attributes.publishedAt}
+                key={post?.id}
+                title={post?.attributes?.title}
+                photo={post?.attributes?.profileImage?.data?.attributes?.formats}
+                publishedAt={post?.attributes?.publishedAt}
                 onPress={() =>
                   navigation.navigate("PostDetails", {
-                    title: post.attributes.title,
-                    id: post.id,
+                    title: post?.attributes?.title,
+                    id: post?.id,
                   })
                 }
               />
             ))
           : filteredData.map((post) => (
               <ListItem
-                key={post.id}
-                title={post.attributes.title}
-                photo={post.attributes.profileImage.data.attributes.formats}
-                publishedAt={post.attributes.publishedAt}
+                key={post?.id}
+                title={post?.attributes?.title}
+                photo={post?.attributes?.profileImage?.data?.attributes?.formats}
+                publishedAt={post?.attributes?.publishedAt}
                 onPress={() =>
                   navigation.navigate("PostDetails", {
-                    title: post.attributes.title,
-                    id: post.id,
+                    title: post?.attributes?.title,
+                    id: post?.id,
                   })
                 }
               />
-            ))}
-      </ScrollView>
+              ))}
+              </ScrollView>
     </Layout>
   );
 };
@@ -141,6 +141,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     marginBottom: 20,
+    padding: 18
   },
   imageBackground: {
     width: 35,
@@ -154,6 +155,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
     marginBottom: 20,
+    marginHorizontal: 18
   },
 });
 

screens/PostDetailsScreen.jsx

@@ -28,7 +28,7 @@ const PostDetailsScreen = ({ navigation, route }) => {
       <Image
         style={styles.image}
         source={{
-          uri: `http://localhost:1337${post?.attributes?.profileImage.data.attributes.url}`,
+          uri: `https://strapi.dilig.net${post?.attributes?.profileImage.data.attributes.url}`,
         }}
       />
       <Text

store/middleware/accessTokenMiddleware.js

@@ -29,7 +29,7 @@ export default ({ dispatch }) =>
       // If access token is expired, refresh access token
       if (new Date() > new Date(jwtTokenDecoded.exp * 1000)) {
         const axiosResponse = await axios.post(
-          "http://localhost:1337/api/token/refresh",
+          "https://strapi.dilig.net/api/token/refresh",
           {
             refreshToken: refresh,
           },