Extractin "Em construção" code from all screens to component

src/app/components/InDevelopment.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+
+import { FontAwesome5 } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";
+import colors from "../config/colors";
+
+function InDevelopment(props) {
+  return (
+    <View style={styles.container}>
+      <FontAwesome5 name="laptop-code" size={60} color="black" />
+      <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
+        Em construção...
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white,
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+});
+
+export default InDevelopment;

src/app/screens/AccountScreen.js

@@ -1,34 +1,13 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
-
-import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { dimensions } from "../config/dimensions";
-import { FontAwesome5 } from '@expo/vector-icons';
+import InDevelopment from "../components/InDevelopment";
 
-function AccountScreen({ navigation }) {
+function AccountScreen(props) {
   return (
-    <Screen style={styles.screen}>
-      <View style={styles.container}>
-        <FontAwesome5 name="laptop-code" size={60} color="black" />
-        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
-          Em construção...
-        </Text>
-      </View>
+    <Screen>
+      <InDevelopment />
     </Screen>
   );
 }
 
-const styles = StyleSheet.create({
-  screen: {
-    backgroundColor: colors.light,
-  },
-  container: {
-    flex: 1,
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "flex-start",
-  },
-});
-
 export default AccountScreen;

src/app/screens/MessagesScreen.js

@@ -1,98 +1,13 @@
-import React, { useState } from "react";
-import { FlatList, StyleSheet, View, Text } from "react-native";
-
+import React from "react";
 import Screen from "../components/Screen";
-import {
-  ListItem,
-  ListItemDeleteAction,
-  ListItemSeparator,
-} from "../components/lists";
-
-import colors from "../config/colors";
-import { FontAwesome5 } from '@expo/vector-icons';
-import { dimensions } from "../config/dimensions";
-
-/*const initialMessages = [
-  {
-    id: 1,
-    title: "Defesa Civil",
-    description: "Enviado um aviso de chuvas intensas na região do M'Boi Mirim. Há possibilidade ...",
-    image: require("../assets/defesa_civil.png"),
-  },
-  {
-    id: 2,
-    title: "Defesa Civil",
-    description:
-      "Enviado um aviso de alagamento na região de Pinheiros. Há possibilidade de alagamentos. Evite a região.",
-    image: require("../assets/defesa_civil.png"),
-  },
-];*/
-
-function MessagesScreen(props) {
-  /*const [messages, setMessages] = useState(initialMessages);
-  const [refreshing, setRefreshing] = useState(false);
-
-  const handleDelete = (message) => {
-    setMessages(messages.filter((m) => m.id !== message.id));
-  }; */
+import InDevelopment from "../components/InDevelopment";
 
+function MessageScreen(props) {
   return (
-    {
-      /*<Screen>
-      <FlatList
-        data={messages}
-        keyExtractor={(message) => message.id.toString()}
-        renderItem={({ item }) => (
-          <ListItem
-            title={item.title}
-            subTitle={item.description}
-            image={item.image}
-            onPress={() => console.log("Message selected", item)}
-            renderRightActions={() => (
-              <ListItemDeleteAction onPress={() => handleDelete(item)} />
-            )}
-          />
-        )}
-        ItemSeparatorComponent={ListItemSeparator}
-        refreshing={refreshing}
-        onRefresh={() => {
-          setMessages([
-            {
-              id: 2,
-              title: "T2",
-              description: "D2",
-              image: require("../assets/ddangelorb.png"),
-            },
-          ]);
-        }}
-      />
-      </Screen>*/
-    },
-    (
-      <Screen style={styles.screen}>
-        <View style={styles.container}>
-          <FontAwesome5 name="laptop-code" size={60} color="black" />
-          <Text
-            style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}
-          >
-            Em construção...
-          </Text>
-        </View>
-      </Screen>
-    )
+    <Screen>
+      <InDevelopment />
+    </Screen>
   );
 }
 
-const styles = StyleSheet.create({
-  screen: {
-    backgroundColor: colors.light,
-  },
-  container: {
-    flex: 1,
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "flex-start",
-  },
-});
-
-export default MessagesScreen;
+export default MessageScreen;

src/app/screens/OfficialMessagesScreen.js

@@ -1,34 +1,13 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
-
-import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { FontAwesome5 } from '@expo/vector-icons';
-import { dimensions } from "../config/dimensions";
+import InDevelopment from "../components/InDevelopment";
 
 function OfficialMessagesScreen(props) {
   return (
-    <Screen style={styles.screen}>
-      <View style={styles.container}>
-        <FontAwesome5 name="laptop-code" size={60} color="black" />
-        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
-          Em construção...
-        </Text>
-      </View>
+    <Screen>
+      <InDevelopment />
     </Screen>
   );
 }
 
-const styles = StyleSheet.create({
-  screen: {
-    backgroundColor: colors.light,
-  },
-  container: {
-    flex: 1,
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "flex-start",
-  },
-});
-
 export default OfficialMessagesScreen;