Organize files and add style to tabs

App.js

@@ -1,25 +1,35 @@
-import * as React from 'react';
+// Import Stuff
-import { Button, StyleSheet, Text, View } from 'react-native';
+/// React Native
-import { NavigationContainer } from '@react-navigation/native';
+import * as React from 'react'
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { Text } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { WebView } from 'react-native-webview'
-import { StatusBar } from 'expo-status-bar';
 
-const Tab = createMaterialTopTabNavigator();
+/// React Native Navigation
+import { NavigationContainer } from '@react-navigation/native'
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 
+/// Expo Modules
+import * as SystemUI from 'expo-system-ui'
 
+/// Options
+import ScreenOptions from './options/TabOptions'
+
+/// Stylesheets
+import Styles from './stylesheets/style'
+
+// Others
+SystemUI.setBackgroundColorAsync("black")
+const Tab = createMaterialTopTabNavigator()
+
+// App
 export default function App() {
-
-
   const [tabs, setTabs] = React.useState([
       {
         name : "tab-1",
         component : TabScreen,
       }
   ])
-
-
   const addNewTab = () => {
     setTabs(tabs => [
       ...tabs,
@@ -29,78 +39,47 @@ export default function App() {
       }
     ])
   }
-
+  const remove = (route) => {setTabs(tabs => tabs.filter(tab => tab.name !== route.name))}
-
-  const remove = (route) => {
-    setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
-  }
-
 
   function TabScreen({route}) {
     return (
-      <SafeAreaView style={S.container}>
+      <SafeAreaView style={Styles.Container}>
         <WebView
           onError={() => Alert.alert("Page failed to load", "The page you're trying to view has failed to load. Either caused by a connection error or the a server-side issue.", [{text: 'OK'}])}
           source={{ uri: 'https://design.penpot.app' }}
           javaScriptEnabled={true}
           javaScriptEnabledAndroid={true}
-          onMessage={(event) => {}}
+          scalesPageToFit={false} // Too big if set to true
-          scalesPageToFit={false}
           allowsBackForwardNavigationGestures
         />
-        <Button
-          title="Add a new tab"
-          style={S.AddButton}
-          onPress={addNewTab}
-        ></Button>
-        {
-          route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
-        }
       </SafeAreaView>
-    );
+    )
   }
 
-  const S = StyleSheet.create({
-    container: {
-      flex: 1,
-      position: 'relative'
-    },
-    AddButton: {
-      position: 'absolute',
-      bottom: 0,
-      right: 0, 
-      left: 0,
-      height: 100,
-      borderWidth: 2,
-      borderColor: 'blue',
-      backgroundColor: 'white',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }
-  })
-
   return (
     <NavigationContainer>
-      <Tab.Navigator styles={S.Tab}>
+      <Tab.Navigator
+        optimizationsEnabled={true}
+        backBehavior='none'
+        keyboardDismissMode='none'
+        screenOptions={{
+          tabBarGap: 10,
+          tabBarAndroidRipple: { borderless: false },
+        }}
+        {...{ screenOptions }}>
         {
           tabs.map(tab => <Tab.Screen
             key={tab.name}
             name={tab.name}
             component={tab.component}
-            options={{
-              headerTitle: (props) => <LogoTitle {...props} />,
-              headerRight: () => (
-                <Button
-                  onPress={() => alert('This is a button!')}
-                  title="Info"
-                  color="#fff"
-                />
-              ),
-            }}
           />)
         }
       </Tab.Navigator>
+      {/* {route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>} */}
+      <Text
+        style={Styles.AddButton}
+        onPress={addNewTab}
+      >+</Text>
     </NavigationContainer>
-  );
+  )
 }

options/TabOptions.js

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+export default screenOptions = {
+    lazy: true,
+    swipeEnabled: false,
+    tabBarGap: 10,
+    activeTintColor: "#FFF",
+    inactiveTintColor: "gray",
+    tabBarIndicatorStyle: {
+      backgroundColor: '#202020',
+      height: 40,
+      top: 4,
+      margin: 0,
+      borderRadius: 10,
+      marginLeft: 6
+    },
+    tabBarStyle:{
+      backgroundColor:'#303236',
+      width: "auto",
+      height: 48,
+      paddingLeft: 6
+    },
+    labelStyle: {
+      fontSize: 10,
+      margin: 0,
+      padding: 0,
+    },
+    tabBarItemStyle:{
+      alignSelf: 'stretch',
+      color: 'white',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      textAlign: 'left',
+      paddingHorizontal: 0,
+      position: 'relative',
+      width: 160,
+    },
+    tabBarLabelStyle: {
+      fontSize: 10,
+      color: 'white',
+      textAlign: 'left'
+    },
+}

stylesheets/style.js

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+export default StyleSheet.create({
+    Container: {
+      flex: 1,
+      position: 'relative'
+    },
+    AddButton: {
+      position: 'absolute',
+      color: 'white',
+      backgroundColor: '#202020',
+      right: 0,
+      height: 36,
+      width: 36,
+      fontSize: 18,
+      display: 'flex',
+      textAlign: 'center',
+      textAlignVertical: "center",
+      borderRadius: 50,
+      marginTop: 6,
+      marginRight: 12
+    },
+    RemoveButton: {
+      position: 'absolute',
+      color: 'white',
+      backgroundColor: '#202020',
+      right: 0,
+      height: 36,
+      width: 36,
+      fontSize: 18,
+      display: 'flex',
+      textAlign: 'center',
+      textAlignVertical: "center",
+      borderRadius: 50,
+      marginTop: 4,
+      marginRight: 80
+    },
+    Tab: {
+      display: 'flex',
+      backgroundColor: 'black'
+    }
+})