Replace Eva icons with Expo's vector icons

assets/eva-icons/home-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="home"><rect width="24" height="24" opacity="0"/><path d="M20.42 10.18L12.71 2.3a1 1 0 0 0-1.42 0l-7.71 7.89A2 2 0 0 0 3 11.62V20a2 2 0 0 0 1.89 2h14.22A2 2 0 0 0 21 20v-8.38a2.07 2.07 0 0 0-.58-1.44zM10 20v-6h4v6zm9 0h-3v-7a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v7H5v-8.42l7-7.15 7 7.19z"/></g></g></svg>

src/components/context-menu.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dimensions, View, Image } from "react-native";
-import { FontAwesome } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
 import {
     Menu,
     MenuOptions,
@@ -34,8 +34,8 @@ const ContextMenuJsx = (props) => {
         <View style = { props.containerStyle }>
             <Menu renderer = { SlideInMenu }>
                 <MenuTrigger>
-                    <FontAwesome
+                    <Ionicons
-                        name = "ellipsis-h"
+                        name = "ellipsis-horizontal"
                         size = { props.size ? props.size : 24 }
                         color = { props.colour ? props.colour : "#666" } />
                 </MenuTrigger>

src/components/moderate-menu.js

@@ -7,6 +7,7 @@ import {
     MenuTrigger,
     renderers
 } from "react-native-popup-menu";
+import { Ionicons } from "@expo/vector-icons";
 
 const { SlideInMenu } = renderers;
 
@@ -33,8 +34,9 @@ const ModerateMenuJsx = (props) => {
         <View style = { props.containerStyle }>
             <Menu renderer = { SlideInMenu }>
                 <MenuTrigger>
-                    <Image
+                    <Ionicons
-                        source = { require("assets/eva-icons/ellipsis.png") }
+                        name = "ellipsis-horizontal"
+                        color = "#000"
                         style = { props.triggerStyle }/>
                 </MenuTrigger>
                 <MenuOptions customStyles = { optionsStyles }>

src/components/navigation/back-bar.js

@@ -1,18 +1,19 @@
 import React from "react";
 import { Image } from "react-native";
 import { TouchableOpacity, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 
 const BackBarJsx = (props) => {
-    const backIcon = require("assets/eva-icons/back.png");
 
     return (
         <View style = { styles.nav }>
             <TouchableOpacity
                   onPress = { () => props.navigation.goBack() }
                   style = { styles.button }>
-                <Image
+                <Ionicons
-                    style = { styles.chevron }
+                    name = "chevron-back"
-                    source = { backIcon }/>
+                    color = "#000"
+                    size = { 30 }/>
             </TouchableOpacity>
             <View style = { styles.rest }>
                 { props.children }

src/components/navigation/tray.js

@@ -3,6 +3,7 @@ import {
     Image,
     Dimensions,
 } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 
 import { checkUnreadNotifications } from "src/requests";
 
@@ -13,11 +14,14 @@ const TrayButtonJsx = (props) => {
     return (
         <TouchableWithoutFeedback
             onPress={ () => props.nav.navigate(props.where, {}) }>
-            <Image
+            <Ionicons
-                source = {
+                name = { props.icon }
-                    activeOrNot(props.active == props.where, props.pack)
+                color = { activeOrNot(props.active == props.where, {
+                        active: "#000",
+                        inactive: "#888",
+                    })
                 }
-                style = { styles.icon } />
+                size = { 30 } />
         </TouchableWithoutFeedback>
     );
 }
@@ -37,64 +41,32 @@ const TrayJsx = (props) => {
             });
     }, []);
 
-
-    const icons = {
-        feed: {
-            active: require("assets/eva-icons/home-black.png"),
-            inactive: require("assets/eva-icons/home-grey.png")
-        },
-        discover: {
-            active: require("assets/eva-icons/search-black.png"),
-            inactive: require("assets/eva-icons/search-grey.png")
-        },
-        publish: {
-            active: require("assets/eva-icons/camera-black.png"),
-            inactive: require("assets/eva-icons/camera-grey.png")
-        },
-        direct: {
-            active: require("assets/eva-icons/email-black.png"),
-            inactive: require("assets/eva-icons/email-grey.png")
-        },
-        profile: {
-            active: require("assets/eva-icons/person-black.png"),
-            inactive: require("assets/eva-icons/person-grey.png")
-        },
-        profileNotif: {
-            active: require("assets/eva-icons/person-black-notif.png"),
-            inactive: require("assets/eva-icons/person-grey-notif.png")
-        },
-    }
-
     return (
         <View style = { styles.tray }>
             <View style = { styles.iconList }>
                     <TrayButtonJsx
                         where = "Feed"
-                        pack = { icons.feed }
+                        icon = { "home-outline" }
                         active = { props.active }
                         nav = { nav } />
                     <TrayButtonJsx
                         where = "Discover"
-                        pack = { icons.discover }
+                        icon = { "search-outline" }
                         active = { props.active }
                         nav = { nav } />
                     <TrayButtonJsx
                         where = "Publish"
-                        pack = { icons.publish }
+                        icon = { "camera-outline" }
                         active = { props.active }
                         nav = { nav } />
                     <TrayButtonJsx
                         where = "Direct"
-                        pack = { icons.direct }
+                        icon = { "mail-outline" }
                         active = { props.active }
                         nav = { nav } />
                     <TrayButtonJsx
                         where = "Profile"
-                        pack = {
+                        icon = { "person-outline" }
-                            state.unreadNotifications ?
-                                icons.profileNotif
-                                : icons.profile
-                        }
                         active = { props.active }
                         nav = { nav } />
             </View>
@@ -102,14 +74,12 @@ const TrayJsx = (props) => {
     );
 };
 
-const iconSize = 30;
-
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const styles = {
     tray: {
         width: SCREEN_WIDTH,
-        paddingTop: iconSize / 2,
+        paddingTop: 15,
-        paddingBottom: iconSize / 2,
+        paddingBottom: 15,
 
         borderTopWidth: 2,
         borderTopColor: "#CCC",
@@ -123,10 +93,6 @@ const styles = {
         margin: 0,
         paddingLeft: 0,
     },
-    icon: {
-        width: iconSize,
-        height: iconSize
-    }
 };
 
 export default TrayJsx;

src/components/pages/direct/conversation.js

@@ -72,7 +72,7 @@ const ConversationContainerJsx = (props) => (
                   style = { styles.send.button }
                   onPress = { props.onSubmit }>
                 <Ionicons
-                    name = "ios-send"
+                    name = "paper-plane-outline"
                     size = { 24 }
                     color = "black" />
             </TouchableOpacity>

src/components/pages/feed.js

@@ -11,7 +11,6 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as requests from "src/requests";
 
 const FeedJsx = (props) => {
-    const checkmark = require("assets/eva-icons/checkmark-circle-large.png");
     const [state, setState] = useState({
         loaded: false,
     });

src/components/pages/profile.js

@@ -248,13 +248,6 @@ const ProfileJsx = ({ navigation }) => {
 };
 
 const RawProfileJsx = (props) => {
-    const notif_pack = {
-        active: require("assets/eva-icons/bell-unread.png"),
-        inactive: require("assets/eva-icons/bell-black.png")
-    }
-
-    const _handleFollow = () => {};
-
     let profileButton;
     if (props.own) {
         profileButton = (
@@ -307,25 +300,8 @@ const RawProfileJsx = (props) => {
                         </Text>
                     </View>
                     {
-                        props.own ?
+                        !props.own
-                            <View style = { styles.profileContextContainer }>
+                        ? <ContextMenuJsx
-                                <TouchableOpacity
-                                      onPress = {
-                                        () => {
-                                            props.navigation.navigate("Notifications");
-                                        }
-                                      }>
-                                    <Image
-                                        source = {
-                                            activeOrNot(
-                                                props.notifs.unread,
-                                                notif_pack
-                                            )
-                                        }
-                                        style = { styles.profileHeaderIcon } />
-                                </TouchableOpacity>
-                            </View>
-                        : <ContextMenuJsx
                               containerStyle = {
                                   styles.profileContextContainer
                               }>
@@ -339,6 +315,7 @@ const RawProfileJsx = (props) => {
                                 onSelect = { props.onBlock }
                                 text = "Block" />
                         </ContextMenuJsx>
+                        : <></>
                     }
                 </View>
                 <Text style = { styles.accountStats }>

src/components/pages/profile/notifications.js

@@ -7,6 +7,7 @@ import {
     Image,
     Text,
 } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
@@ -303,9 +304,11 @@ const ReblogJsx = (props) => {
               thumbnailPressCallback = {
                 navigatePostFactory(props.navigation, props.data.status.id)
               }>
-            <Image
+            <FontAwesome
-                style = { styles.notif.inlineIcon }
+                name = "retweet"
-                source = { require("assets/eva-icons/post-actions/boost-full.png") } />
+                color = "#000"
+                size = { 20 }
+                style = { styles.notif.inlineIcon }/>
             <Text style = { styles.notif.content }>
                 <UserTextJsx acct = { props.data.account.acct } />
                 shared your post.
@@ -321,9 +324,11 @@ const FavouriteJsx = (props) => {
               thumbnailPressCallback = {
                 navigatePostFactory(props.navigation, props.data.status.id)
               }>
-            <Image
+            <FontAwesome
-                style = { styles.notif.inlineIcon }
+                name = "heart"
-                source = { require("assets/eva-icons/post-actions/heart-active.png") } />
+                size = { 20 }
+                color = "black"
+                style = { styles.notif.inlineIcon }/>
             <Text style = { styles.notif.content }>
                 <UserTextJsx acct = { props.data.account.acct } />
                 liked your post.
@@ -416,8 +421,6 @@ const styles = {
             alignItems: "center",
         },
         inlineIcon: {
-            width: 20,
-            height: 20,
             marginRight: 10,
         },
         status: { fontStyle: "italic" },

src/components/pages/view-comments.js

@@ -7,7 +7,7 @@ import {
     TextInput,
     Text
 } from "react-native";
-import { FontAwesome } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
 import { ScrollView } from "react-native-gesture-handler";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
@@ -138,8 +138,8 @@ const CommentJsx = (props) => {
 
     const packs = {
         favourited: {
-            active: require("assets/eva-icons/post-actions/heart-active.png"),
+            active: "heart",
-            inactive: require("assets/eva-icons/post-actions/heart-inactive.png")
+            inactive: "heart-outline",
         }
     };
 
@@ -179,14 +179,18 @@ const CommentJsx = (props) => {
                     </TouchableOpacity>
                     <TouchableOpacity
                           onPress = { props.onFavourite(props.data) }>
-                        <Image
+                        <Ionicons
-                            style = { [styles.heart, styles.action] }
+                            name = { activeOrNot(props.data.favourited, packs.favourited) }
-                            source = { activeOrNot(props.data.favourited, packs.favourited) } />
+                            size = { 15 }
+                            style = { styles.action }/>
                     </TouchableOpacity>
                     <View style = { { paddingLeft: 10, } }>
                         <Menu renderer = { SlideInMenu }>
                             <MenuTrigger>
-                                <FontAwesome name="ellipsis-h" size={18} color="#666" />
+                                <Ionicons
+                                    name="ellipsis-horizontal"
+                                    size={18}
+                                    color="#666" />
                             </MenuTrigger>
                             <MenuOptions customStyles = { menuOptionsStyles }>
                                 { props.profile.acct == props.data.account.acct
@@ -409,7 +413,7 @@ const ViewCommentsJsx = (props) => {
                             { state.inReplyTo.id != state.postData.id
                                 ? <TouchableOpacity onPress = { _handleCancelSubReply }>
                                     <View style = { styles.form.inReplyTo.container }>
-                                        <FontAwesome name="close" size={24} color="#666" />
+                                        <Ionicons name="close" size={24} color="#666" />
                                         <Text style = { styles.form.inReplyTo.message }>
                                             &nbsp;Replying to&nbsp;
                                             <Text style = { styles.bold }>
@@ -433,9 +437,10 @@ const ViewCommentsJsx = (props) => {
                                 onChangeText = { c => setState({...state, reply: c }) }/>
                             <View style = { styles.submitContainer }>
                                 <TouchableOpacity onPress = { _handleSubmitReply }>
-                                    <Image
+                                    <Ionicons
-                                        style = { styles.commentSubmit }
+                                        name = "paper-plane-outline"
-                                        source = { require("assets/eva-icons/paper-plane.png") }/>
+                                        color = "black"
+                                        size = { 30 }/>
                                 </TouchableOpacity>
                             </View>
                         </View>

src/components/posts/post-action-bar.js

@@ -6,22 +6,24 @@ import {
     Dimensions,
     TouchableOpacity
 } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
 import { activeOrNot } from "src/interface/interactions";
 
 const PostActionJsx = (props) => {
     return (
         <TouchableOpacity
               onPress = { props.onPress }>
-            <Image
+            <View style = { { marginLeft: SCREEN_WIDTH / 20 } }>
-                source = {
+                <FontAwesome
-                    activeOrNot(props.active, props.pack)
+                    name = { activeOrNot(props.active, props.pack) }
-                }
+                    size = { 24 }
-                style = {
+                    color = {
-                    [
+                        activeOrNot(props.active, {
-                        styles.icon,
+                            active: "#000",
-                        props.last ? styles.lastIcon : {}
+                            inactive: "#888",
-                    ]
+                        })
                     }/>
+            </View>
         </TouchableOpacity>
     )
 }
@@ -29,16 +31,16 @@ const PostActionJsx = (props) => {
 const PostActionBarJsx = (props) => {
     const icons = {
         heart: {
-            active: require("assets/eva-icons/post-actions/heart-active.png"),
+            active: "heart",
-            inactive: require("assets/eva-icons/post-actions/heart-inactive.png")
+            inactive: "heart-o",
         },
         reblog: {
-            active: require("assets/eva-icons/post-actions/reblog-active.png"),
+            active: "retweet",
-            inactive: require("assets/eva-icons/post-actions/reblog-inactive.png")
+            inactive: "retweet",
         },
         bookmark: {
-            active: require("assets/eva-icons/post-actions/bookmark-active.png"),
+            active: "bookmark",
-            inactive: require("assets/eva-icons/post-actions/bookmark-inactive.png")
+            inactive: "bookmark-o",
         }
     }
     return (
@@ -55,7 +57,6 @@ const PostActionBarJsx = (props) => {
 
             <PostActionJsx
                 pack = { icons.bookmark }
-                last = { true }
                 active = { props.bookmarked }
                 onPress = { props.onBookmark } />
         </View>
@@ -68,14 +69,6 @@ const styles = {
         flexDirection: "row",
         padding: SCREEN_WIDTH / 40
     },
-    icon: {
-        width: 30,
-        height: 30,
-        marginRight: SCREEN_WIDTH / 20
-    },
-    lastIcon: {
-        marginLeft: "auto"
-    }
 }
 
 export default PostActionBarJsx;