Fix various warnings that show up on Andriod

src/App.js

@@ -56,7 +56,7 @@ const App = (props) => {
         }
     };
 
-    return <MenuProvider style = { providerStyles }>
+    return <MenuProvider customStyles = { providerStyles }>
         <AppContainer />
     </MenuProvider>;
 };

src/components/pages/direct.js

@@ -16,8 +16,8 @@ import ModerateMenuJsx from "src/components/moderate-menu.js";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
-const TEST_ACCOUNT_1 = { acct: "njms", display_name: "Nat🔆", avatar: TEST_IMAGE_1 };
-const TEST_ACCOUNT_2 = { acct: "someone", display_name: "Some person", avatar: TEST_IMAGE_2 };
+const TEST_ACCOUNT_1 = { id: 1, acct: "njms", display_name: "Nat🔆", avatar: TEST_IMAGE_1 };
+const TEST_ACCOUNT_2 = { id: 2, acct: "someone", display_name: "Some person", avatar: TEST_IMAGE_2 };
 
 const TEST_STATUS = {
     id: 1,
@@ -68,10 +68,13 @@ const DirectJsx = ({ navigation }) => {
         }
     };
 
-    const renderConversation = ({ item }) => {
+    const renderConversation = (item) => {
         const boldIfUnread = item.unread ? styles.bold : {};
 
-        return <View style = { [styles.row, styles.conv.container] }>
+        return (
+            <View
+                  style = { [styles.row, styles.conv.container] }
+                  key = { item.id }>
                 <TouchableOpacity
                       style = { [styles.row, styles.conv.containerButton] }
                       onPress = {
@@ -104,6 +107,7 @@ const DirectJsx = ({ navigation }) => {
                         triggerStyle = { styles.menu.trigger } />
                 </View>
             </View>
+        );
     };
 
     return (
@@ -129,10 +133,10 @@ const DirectJsx = ({ navigation }) => {
                 </TouchableOpacity>
             </View>
             { state.loaded ?
-                <FlatList
-                    data = { filterConversations(state.conversations, state.query) }
-                    renderItem = { renderConversation }
-                    keyExtractor = { conv => conv.id }/>
+                filterConversations(
+                    state.conversations,
+                    state.query
+                ).map(renderConversation)
                 : <></>
             }
         </ScreenWithTrayJsx>

src/components/pages/direct/conversation.js

@@ -4,7 +4,6 @@ import {
     Text,
     Image,
     TextInput,
-    FlatList,
     ScrollView,
     Dimensions,
     TouchableOpacity,
@@ -30,8 +29,8 @@ import { timeToAge } from "src/interface/rendering";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
-const TEST_ACCOUNT_1 = { acct: "someone", display_name: "Someone", avatar: TEST_IMAGE_1 };
-const TEST_ACCOUNT_2 = { acct: "someone_else", display_name: "Another person", avatar: TEST_IMAGE_2 };
+const TEST_ACCOUNT_1 = { id: 1, acct: "someone", display_name: "Someone", avatar: TEST_IMAGE_1 };
+const TEST_ACCOUNT_2 = { id: 2, acct: "someone_else", display_name: "Another person", avatar: TEST_IMAGE_2 };
 
 const TEST_STATUS = {
     account: TEST_ACCOUNT_1,
@@ -168,7 +167,7 @@ const ConversationJsx = ({ navigation }) => {
                 <MenuOptions customStyles = { accountListOptionsStyles }>
                     {
                         conversation.accounts.map(account =>
-                            <MenuOption>
+                            <MenuOption key = { account.id }>
                                 <Image
                                     source = { { uri: account.avatar } }
                                     style = { styles.backBar.accountList.avatar }/>
@@ -188,9 +187,9 @@ const ConversationJsx = ({ navigation }) => {
         </View>
     );
 
-    const renderMessage = ({ item }) => {
+    const renderMessage = (item) => {
         const yours = state.profile.acct == item.account.acct;
-        return <>
+        return <View key = { item.id }>
             { !yours
                 ? <Text style = { styles.message.acct }>
                     { item.account.acct }
@@ -223,7 +222,7 @@ const ConversationJsx = ({ navigation }) => {
                     </Text>
                 </View>
             </View>
-        </>;
+        </View>;
     };
 
     return (
@@ -233,10 +232,7 @@ const ConversationJsx = ({ navigation }) => {
               state = { state }
               setState = { setState }>
             { state.loaded
-                ? <FlatList
-                    data = { state.messages }
-                    renderItem = { renderMessage }
-                    keyExtractor = { item => item.id }/>
+                ? state.messages.map(renderMessage)
                 : <></>
             }
         </ConversationContainerJsx>

src/components/pages/discover/search.js

@@ -10,23 +10,25 @@ const TEST_ACCOUNTS = [
         avatar: TEST_IMAGE,
         username: "njms",
         acct: "njms",
-        display_name: "Nat🔆"
+        display_name: "Nat🔆",
     },
     {
-        id: 1,
+        id: 2,
         avatar: TEST_IMAGE,
         username: "njms",
         acct: "njms",
-        display_name: "Nat🔆"
+        display_name: "Nat🔆",
     }
 ];
 
 const TEST_HASHTAGS = [
     {
-        name: "hashtag1"
+        id: 1,
+        name: "hashtag1",
     },
     {
-        name: "hashtag2"
+        id: 2,
+        name: "hashtag2",
     },
 ];
 

src/components/pages/profile.js

@@ -265,7 +265,11 @@ const ProfileDisplayJsx = ({navigation}) => {
                                           style = { styles.fields.row }
                                           key = { index }>
                                         <View style = { styles.fields.cell.name }>
-                                            <Text>{ field.name }</Text>
+                                            <Text style = {
+                                                { textAlign: "center", }
+                                            }>
+                                                { field.name }
+                                            </Text>
                                         </View>
                                         <View style = { styles.fields.cell.value }>
                                             <HTMLLink link = { field.value }/>
@@ -341,7 +345,6 @@ const styles = {
         cell: {
             name: {
                 width: screen_width / 3,
-                textAlgin: "center",
             },
             value: {
                 width: (screen_width / 3) * 2,

src/components/pages/profile/settings.js

@@ -202,11 +202,11 @@ const SettingsJsx = (props) => {
                         style = { styles.fields.plus }
                         source = { require("assets/eva-icons/plus.png") } />
                 </TouchableOpacity>
-                <TouchableOpacity style = { styles.largeButton }>
-                    <Text> Save Profile </Text>
+                <TouchableOpacity style = { styles.button.container }>
+                    <Text style = { styles.button.text }> Save Profile </Text>
                 </TouchableOpacity>
                 <TouchableOpacity
-                      style = { styles.largeButton }
+                      style = { styles.button.container }
                       onPress = {
                         () => {
                             AsyncStorage.multiRemove(
@@ -216,7 +216,11 @@ const SettingsJsx = (props) => {
                             });
                         }
                       }>
-                    <Text style = { styles.textWarning }> Log out </Text>
+                    <Text style = {
+                            [ styles.button.text, styles.button.warning ]
+                          }>
+                        Log out
+                    </Text>
                 </TouchableOpacity>
             </View>
         </ScreenWithBackBarJsx>
@@ -284,7 +288,8 @@ const styles = {
             width: SCREEN_WIDTH / 2.5,
         },
     },
-    largeButton: {
+    button: {
+        container: {
             width: SCREEN_WIDTH / 1.2,
             padding: 15,
             marginTop: 10,
@@ -294,12 +299,13 @@ const styles = {
             borderWidth: 1,
             borderColor: "#888",
             borderRadius: 5,
-        textAlign: "center",
         },
-    textWarning: {
+        text: { textAlign: "center" },
+        warning: {
             fontWeight: "bold",
             textDecorationLine: "underline",
         },
+    },
 };
 
 export default SettingsJsx;

src/components/pages/user-list.js

@@ -4,7 +4,6 @@ import {
     View,
     Image,
     Text,
-    FlatList,
     Dimensions,
     TouchableOpacity,
 } from "react-native";
@@ -42,14 +41,28 @@ const TEST_DATA = [
     {...TEST_PROFILE, id: 3},
     {...TEST_PROFILE, id: 4},
     {...TEST_PROFILE, id: 5},
-    {...TEST_PROFILE, id: 6}
+    {...TEST_PROFILE, id: 6},
 ]
 
-function renderItemFactory(navigation) {
-    // Returns a renderItem function with the context of props.navigation so
-    // that it can enable the person to navigate to the selected account.
-    return ({item}) => (
-        <View style = { [ styles.flexContainer, styles.itemContainer ] }>
+const UserListJsx = ({navigation}) => {
+    // const data = navigation.getParam("data", [])
+    const data = TEST_DATA;
+    const context = navigation.getParam("context", "");
+
+    return (
+        <ScreenWithBackBarJsx navigation = { navigation }>
+            {
+                context ?
+                    <Text style = { styles.context }>
+                        { context }:
+                    </Text>
+                    : <></>
+            }
+            {
+                data.map(item =>
+                    <View
+                          key = { item.id }
+                          style = { [ styles.flexContainer, styles.itemContainer ] }>
                         <TouchableOpacity
                           style = { styles.accountButton }
                           onPress = {
@@ -75,29 +88,8 @@ function renderItemFactory(navigation) {
                             containerStyle = { styles.moderateMenu }
                             triggerStyle = { styles.ellipsis } />
                     </View>
-    );
+                )
             }
-
-const UserListJsx = ({navigation}) => {
-    // const data = navigation.getParam("data", [])
-    const data = TEST_DATA;
-    const context = navigation.getParam("context", "");
-
-    const renderItem = renderItemFactory(navigation);
-
-    return (
-        <ScreenWithBackBarJsx navigation = { navigation }>
-            {
-                context ?
-                    <Text style = { styles.context }>
-                        { context }:
-                    </Text>
-                    : <></>
-            }
-            <FlatList
-                data = { data }
-                renderItem = { renderItem }
-                keyExtractor = { item => item.id }/>
         </ScreenWithBackBarJsx>
     );
 };

src/components/pages/view-comments.js

@@ -223,7 +223,7 @@ const ViewCommentsJsx = (props) => {
     }, []);
 
     return (
-        <View>
+        <>
             { state.loaded ?
                 <View style = { { flex: 1 } }>
                     <BackBarJsx navigation = { props.navigation }/>
@@ -283,7 +283,7 @@ const ViewCommentsJsx = (props) => {
                 </View>
                 : <></>
             }
-        </View>
+        </>
     );
 }