Create Read component

frontend/src/router/router.js

-import React from "react";
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
-import Home from "../screen/Home";
-import Start from "../screen/Start"
-import Register from "../screen/auth/Register";
-import Login from "../screen/auth/Login";
-import Splash from "../screen/splash/Splash";
-import Color from "../screen/Color";
-import Blue from "../screen/Blue"
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
+import Home from '../screen/Home';
+import Start from '../screen/Start';
+import Register from '../screen/auth/Register';
+import Login from '../screen/auth/Login';
+import Splash from '../screen/splash/Splash';
+import Color from '../screen/Color';
+import Blue from '../screen/Blue';
+import Read from '../screen/Read';
 const Stack = createNativeStackNavigator();
 
 const AppRouter = () => {
-return(
+  return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Splash">
-        <Stack.Screen options={{headerShown:false}} name="Home" component={Home} />
-        <Stack.Screen options={{headerShown:false}} name="Splash" component={Splash} />
-        <Stack.Screen options={{headerShown:false}} name="Register" component={Register} />
-        <Stack.Screen options={{headerShown:false}} name="Login" component={Login} />
-        <Stack.Screen options={{headerShown:false}} name="Start" component={Start} />
-        <Stack.Screen options={{headerShown:false}} name="Color" component={Color} />
-        <Stack.Screen options={{headerShown:false}} name="Blue" component={Blue} />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Home"
+          component={Home}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Splash"
+          component={Splash}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Register"
+          component={Register}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Login"
+          component={Login}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Start"
+          component={Start}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Color"
+          component={Color}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Blue"
+          component={Blue}
+        />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="Read"
+          component={Read}
+        />
       </Stack.Navigator>
     </NavigationContainer>
-)
-}
+  );
+};
 
-export default AppRouter;
\ No newline at end of file
+export default AppRouter;

frontend/src/screen/Read.js

+import {useNavigation} from '@react-navigation/native';
+import axios from 'axios';
+import React, {useState, useEffect} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  Image,
+  ImageBackground,
+  Dimensions,
+  Animated,
+  Easing,
+  NativeModules,
+} from 'react-native';
+import ImageButton from '../component/ImageButton';
+import ColorActivity from '../component/colorActivity';
+
+// const {width,height} = Dimensions.get('screen');
+const webUrel = 'http://192.168.8.101:5000/ru';
+
+export default function Read() {
+  const [names, setNames] = useState([]);
+
+  const navigation = useNavigation();
+
+  function getSMSReport() {
+    axios
+      .get(webUrel)
+      .then(response => {
+        console.log(response);
+      })
+      .catch(err => {
+        setNotify({
+          isOpen: true,
+          message: err.message,
+          type: 'warning',
+        });
+      });
+  }
+
+  useEffect(() => {
+    getSMSReport();
+  });
+
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View>
+          <View>
+            <ImageBackground
+              source={require('../assets/color/background.png')}
+              style={styles.image}>
+              <Text style={styles.title}>Read Activity</Text>
+            </ImageBackground>
+          </View>
+        </View>
+
+        <ColorActivity></ColorActivity>
+
+        <ColorActivity></ColorActivity>
+
+        <ColorActivity></ColorActivity>
+
+        <ColorActivity></ColorActivity>
+
+        <ColorActivity></ColorActivity>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+  imageView: {
+    flex: 1,
+    width: '90%',
+    height: 200,
+    // borderWidth:1,
+    // borderColor: "#000",
+    marginHorizontal: 15,
+    borderRadius: 50,
+  },
+  image: {
+    width: '100%',
+    height: 250,
+  },
+  title: {
+    color: 'white',
+    fontSize: 40,
+    position: 'absolute',
+    left: 50,
+    bottom: 50,
+  },
+});

frontend/src/screen/home.js

@@ -9,18 +9,29 @@ export default function Home({ navigation }){
     }
 
     return (
-        <SafeAreaView>
-            <ScrollView>
-                <View style={styles.imageContainer}>
-                    <View style={styles.imageView}>
-                        <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain">
-                        </Image>
-                        <ImageButton path="Color" title="Color Activity"/>
-                    </View>
-                </View>
-            </ScrollView>
-        </SafeAreaView>
-    )
+      <SafeAreaView>
+        <ScrollView>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <Image
+                style={styles.image}
+                source={require('../assets/color/background.png')}
+                resizeMode="contain"></Image>
+              <ImageButton path="Color" title="Color Activity" />
+            </View>
+          </View>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <Image
+                style={styles.image}
+                source={require('../assets/color/background.png')}
+                resizeMode="contain"></Image>
+              <ImageButton path="Read" title="Read Activity" />
+            </View>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    );
 
 }