A bit of cleanup

website/App.js

@@ -7,6 +7,12 @@ import List from "./screens/List";
 import Detail from "./screens/Detail";
 import Help from "./screens/Help";
 
+const IsPwa = !!["fullscreen", "standalone", "minimal-ui"].some((displayMode) =>
+  window.matchMedia("(display-mode: " + displayMode + ")")
+).matches;
+const IsSmallScreen = Dimensions.get("window").width <= 900;
+const ShowHeader = IsPwa || !IsSmallScreen;
+
 const linking = {
   config: {
     Index: {
@@ -24,70 +30,48 @@ const linking = {
 };
 
 const BrowsingStack = createStackNavigator();
-
-const IsPwa = !!["fullscreen", "standalone", "minimal-ui"].some((displayMode) =>
-  window.matchMedia("(display-mode: " + displayMode + ")")
-).matches;
-
-const IsSmallScreen = Dimensions.get("window").width <= 900;
-const ShowHeader = IsPwa || !IsSmallScreen;
-
 function Browsing() {
   return (
     <BrowsingStack.Navigator
       mode="modal"
       headerMode={ShowHeader ? "float" : "none"}
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: "#000",
+          borderBottomColor: "#000",
+        },
+        headerTintColor: "#ccc",
+      }}
     >
       <BrowsingStack.Screen
         name="List"
         component={List}
         options={{
           title: `@expo/vector-icons@${version}`,
-          headerStyle: {
-            backgroundColor: "#000",
-            borderBottomColor: "#000",
-          },
-          headerTintColor: "#CCCCCC",
-        }}
-      />
-      <BrowsingStack.Screen
-        name="Details"
-        component={Detail}
-        options={{
-          headerStyle: {
-            backgroundColor: "#000",
-            borderBottomColor: "#000",
-          },
-          headerTintColor: "#CCCCCC",
-        }}
-      />
-
-      <Stack.Screen
-        name="Help"
-        component={Help}
-        options={{
-          headerStyle: {
-            backgroundColor: "#000",
-            borderBottomColor: "#000",
-          },
-          headerTintColor: "#CCCCCC",
         }}
       />
+      <BrowsingStack.Screen name="Details" component={Detail} />
+      <BrowsingStack.Screen name="Help" component={Help} />
     </BrowsingStack.Navigator>
   );
 }
 
 const Stack = createStackNavigator();
+function Navigation() {
+  return (
+    <NavigationContainer linking={linking}>
+      <Stack.Navigator headerMode="none">
+        <Stack.Screen name="Index" component={Browsing} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
 
 export default function App() {
   return (
-    <View style={{ backgroundColor: "#FAFAFA", flex: 1 }}>
+    <View style={{ backgroundColor: "#fafafa", flex: 1 }}>
       <StatusBar barStyle="light-content" />
-      <NavigationContainer linking={linking}>
-        <Stack.Navigator headerMode="none">
-          <Stack.Screen name="Index" component={Browsing} />
-        </Stack.Navigator>
-      </NavigationContainer>
+      <Navigation />
     </View>
   );
 }

website/components/Display.js

@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import { Dimensions } from 'react-native';
-import * as Animatable from 'react-native-animatable';
-
-const { DEVICE_WIDTH, DEVICE_HEIGHT } = Dimensions.get('window');
-
-const DEFAULT_DURATION = 250;
-
-export default class Display extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { enable: this.props.enable };
-  }
-
-  onEndAnimation(endState) {
-    if (endState.finished == true) this.setState({ enable: false });
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return true;
-  }
-
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
-    if (nextProps.enable != this.props.enable) {
-      if (nextProps.enable == false) {
-        let duration =
-          nextProps.exitDuration ||
-          nextProps.defaultDuration ||
-          DEFAULT_DURATION;
-
-        if (nextProps.exit != null) {
-          this.refs.display[nextProps.exit](duration).then((endState) =>
-            this.onEndAnimation(endState)
-          );
-        } else nextState.enable = false;
-      } else nextState.enable = true;
-    }
-  }
-
-  enableStyle() {
-    if (this.state.enable) return {};
-
-    return {
-      position: 'absolute',
-      top: DEVICE_HEIGHT,
-      left: DEVICE_WIDTH,
-      height: 0,
-      width: 0,
-    };
-  }
-
-  render() {
-    if (this.state.enable == false && this.props.keepAlive != true) return null;
-
-    return (
-      <Animatable.View
-        ref="display"
-        style={[this.props.style, this.enableStyle.bind(this)()]}>
-        {this.props.children}
-      </Animatable.View>
-    );
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.enable != this.props.enable)
-      if (this.props.enable == true) {
-        this.refs.display.stopAnimation();
-
-        let duration =
-          this.props.enterDuration ||
-          this.props.defaultDuration ||
-          DEFAULT_DURATION;
-
-        if (this.props.enter != null) {
-          this.refs.display[this.props.enter](duration).then((endState) => {});
-        }
-      }
-  }
-}

website/screens/List.js

@@ -4,7 +4,6 @@ import { useDebouncedCallback } from "use-debounce";
 import { useMediaQuery } from "react-responsive";
 import { IconsArray } from "../IconConstants";
 import ListItem from "../components/ListItem";
-import Display from "../components/Display";
 import FilterButton from "../components/FilterButton";
 import ClearButton from "../components/ClearButton";
 import HelpButton from "../components/HelpButton";
@@ -153,9 +152,7 @@ const List = ({ navigation }) => {
         />
       </View>
 
-      {/* Filter section */}
       <View style={styles.filterContainer}>
-        {/* Filter & Clear button */}
         <View style={{ flexDirection: "row" }}>
           <FilterButton
             buttonColor={barOpen ? "#447181" : "#515460"}
@@ -172,99 +169,116 @@ const List = ({ navigation }) => {
         </View>
       </View>
 
-      <Display enable={barOpen}>
-        <View style={styles.displayContainer}>
-          <View style={styles.familySection}>
-            <View>
-              <View style={styles.checkDisplay}>
-                <CheckBox
-                  label="AntDesign"
-                  icon={ant ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setAnt(!ant)}
-                />
+      <View
+        style={[
+          styles.displayContainer,
+          { display: barOpen ? "block" : "none" },
+        ]}
+      >
+        <View style={styles.familySection}>
+          <View>
+            <View style={styles.checkDisplay}>
+              <CheckBox
+                key="AntDesign"
+                label="AntDesign"
+                icon={ant ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setAnt(!ant)}
+              />
 
-                <CheckBox
-                  label="Entypo"
-                  icon={ent ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setEnt(!ent)}
-                />
+              <CheckBox
+                key="Entypo"
+                label="Entypo"
+                icon={ent ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setEnt(!ent)}
+              />
 
-                <CheckBox
-                  label="EvilIcons"
-                  icon={evil ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setEvil(!evil)}
-                />
+              <CheckBox
+                key="EvilIcons"
+                label="EvilIcons"
+                icon={evil ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setEvil(!evil)}
+              />
 
-                <CheckBox
-                  label="Feather"
-                  icon={feather ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setFeather(!feather)}
-                />
+              <CheckBox
+                key="Feather"
+                label="Feather"
+                icon={feather ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setFeather(!feather)}
+              />
 
-                <CheckBox
-                  label="FontAwesome"
-                  icon={fontawe ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setFontawe(!fontawe)}
-                />
+              <CheckBox
+                key="FontAwesome"
+                label="FontAwesome"
+                icon={fontawe ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setFontawe(!fontawe)}
+              />
 
-                <CheckBox
-                  label="FontAwesome5"
-                  icon={fontawe5 ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setFontawe5(!fontawe5)}
-                />
+              <CheckBox
+                key="FontAwesome5"
+                label="FontAwesome5"
+                icon={fontawe5 ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setFontawe5(!fontawe5)}
+              />
 
-                <CheckBox
-                  label="Foundation"
-                  icon={found ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setFound(!found)}
-                />
+              <CheckBox
+                key="Foundation"
+                label="Foundation"
+                icon={found ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setFound(!found)}
+              />
 
-                <CheckBox
-                  label="Ionicons"
-                  icon={ioni ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setIoni(!ioni)}
-                />
+              <CheckBox
+                key="Ionicons"
+                label="Ionicons"
+                icon={ioni ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setIoni(!ioni)}
+              />
 
-                <CheckBox
-                  label="MaterialIcons"
-                  icon={material ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setMaterial(!material)}
-                />
+              <CheckBox
+                key="MaterialIcons"
+                label="MaterialIcons"
+                icon={material ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setMaterial(!material)}
+              />
 
-                <CheckBox
-                  label="MaterialCommunityIcons"
-                  icon={matcom ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setMatcom(!matcom)}
-                />
+              <CheckBox
+                key="MaterialCommunityIcons"
+                label="MaterialCommunityIcons"
+                icon={matcom ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setMatcom(!matcom)}
+              />
 
-                <CheckBox
-                  label="SimpleLineIcons"
-                  icon={sim ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setSim(!sim)}
-                />
+              <CheckBox
+                key="SimpleLineIcons"
+                label="SimpleLineIcons"
+                icon={sim ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setSim(!sim)}
+              />
 
-                <CheckBox
-                  label="Octicons"
-                  icon={octi ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setOcti(!octi)}
-                />
+              <CheckBox
+                key="Octicons"
+                label="Octicons"
+                icon={octi ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setOcti(!octi)}
+              />
 
-                <CheckBox
-                  label="Zocial"
-                  icon={zocial ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setZocial(!zocial)}
-                />
+              <CheckBox
+                key="Zocial"
+                label="Zocial"
+                icon={zocial ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setZocial(!zocial)}
+              />
 
-                <CheckBox
-                  label="Fontisto"
-                  icon={fontisto ? "checkbox-marked" : "checkbox-blank-outline"}
-                  onPress={() => setFontisto(!fontisto)}
-                />
-              </View>
+              <CheckBox
+                key="Fontisto"
+                label="Fontisto"
+                icon={fontisto ? "checkbox-marked" : "checkbox-blank-outline"}
+                onPress={() => setFontisto(!fontisto)}
+              />
             </View>
           </View>
         </View>
-      </Display>
+      </View>
 
       <FlatList
         data={listIcons}
@@ -315,7 +329,7 @@ const styles = StyleSheet.create({
   },
   filterContainer: {
     height: 40,
-    alignItems: 'flex-end',
+    alignItems: "flex-end",
     backgroundColor: "#2A2C33",
     paddingHorizontal: 20,
   },