Refactor state

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

android/app/src/main/java/com/karaolidis/terminallyonline/MainActivity.java

@@ -5,6 +5,8 @@ import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactActivityDelegate;
 
+import android.os.Bundle;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -16,6 +18,12 @@ public class MainActivity extends ReactActivity {
     return "Terminally Online";
   }
 
+  // react-native-screens override
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
+
   /**
    * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
    * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React

index.js

@@ -1,6 +1,9 @@
 import { AppRegistry } from 'react-native';
+import 'react-native-get-random-values';
+import { enableFreeze } from 'react-native-screens';
 import App from './src/app';
 import { name as appName } from './app.json';
-import 'react-native-get-random-values';
+
+enableFreeze(true);
 
 AppRegistry.registerComponent(appName, () => App);

src/navigation.tsx

@@ -10,10 +10,11 @@ import { BottomNavigation, useTheme } from 'react-native-paper';
 import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
 import { darkNavigationTheme, lightNavigationTheme } from './theme';
 import { FloatingActionButton } from './components';
+import { ROUTE } from './types';
 
 const TabNavigator = () => {
-  const [showFab, setShowFab] = React.useState(true);
   const TabNavigatorBase = createBottomTabNavigator();
+  const [showFab, setShowFab] = React.useState(true);
 
   return (
     <>
@@ -39,7 +40,7 @@ const TabNavigator = () => {
                   target: state.key,
                 });
               }
-              setShowFab(route.name !== 'Settings');
+              setShowFab((route.name as ROUTE) !== ROUTE.SETTINGS);
             }}
             renderIcon={({ route, focused, color }) => {
               const { options } = descriptors[route.key];
@@ -58,7 +59,7 @@ const TabNavigator = () => {
           />
         )}>
         <TabNavigatorBase.Screen
-          name="Home"
+          name={ROUTE.HOME}
           component={Home}
           options={{
             tabBarIcon: ({ color, size }) => (
@@ -67,7 +68,7 @@ const TabNavigator = () => {
           }}
         />
         <TabNavigatorBase.Screen
-          name="Tags"
+          name={ROUTE.TAGS}
           component={Tags}
           options={{
             tabBarIcon: ({ color, size }) => (
@@ -76,7 +77,7 @@ const TabNavigator = () => {
           }}
         />
         <TabNavigatorBase.Screen
-          name="Settings"
+          name={ROUTE.SETTINGS}
           component={Settings}
           options={{
             tabBarIcon: ({ color, size }) => (
@@ -97,18 +98,15 @@ const NavigationContainer = () => {
   return (
     <NavigationContainerBase
       theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
-      <StackNavigatorBase.Navigator screenOptions={{ headerShown: false }}>
-        <StackNavigatorBase.Screen name="Main" component={TabNavigator} />
-        <StackNavigatorBase.Screen
-          name="Add Meme"
-          component={AddMeme}
-          options={{ animation: 'slide_from_bottom' }}
-        />
-        <StackNavigatorBase.Screen
-          name="Add Tag"
-          component={AddTag}
-          options={{ animation: 'slide_from_bottom' }}
-        />
+      <StackNavigatorBase.Navigator
+        screenOptions={{
+          headerShown: false,
+          freezeOnBlur: true,
+          animation: 'slide_from_bottom',
+        }}>
+        <StackNavigatorBase.Screen name={ROUTE.MAIN} component={TabNavigator} />
+        <StackNavigatorBase.Screen name={ROUTE.ADD_MEME} component={AddMeme} />
+        <StackNavigatorBase.Screen name={ROUTE.ADD_TAG} component={AddTag} />
       </StackNavigatorBase.Navigator>
     </NavigationContainerBase>
   );

src/screens/home.tsx

@@ -71,7 +71,7 @@ const Home = () => {
   };
 
   const [search, setSearch] = useState('');
-  const memes = useQuery<Meme>('Meme');
+  const memes = useQuery<Meme>(Meme.schema.name);
 
   return (
     <RootScrollView padded>

src/screens/tags.tsx

@@ -60,7 +60,7 @@ const Tags = () => {
   };
 
   const [search, setSearch] = useState('');
-  const tags = useQuery<Tag>('Tag')
+  const tags = useQuery<Tag>(Tag.schema.name)
     .filtered(`name CONTAINS[c] "${search}"`)
     .sorted(tagSortQuery(sort), sortDirection === SORT_DIRECTION.ASCENDING);
 

src/state/settings.ts

@@ -44,6 +44,8 @@ const updateStorageUri = createAsyncThunk(
 const updateNoMedia = createAsyncThunk(
   'settings/updateNoMedia',
   async (newNoMedia: boolean, { dispatch, getState }) => {
+    dispatch(setNoMedia(newNoMedia));
+
     const state = getState() as RootState;
     const { storageUri } = state.settings;
     if (!storageUri) return;
@@ -51,12 +53,12 @@ const updateNoMedia = createAsyncThunk(
     const noMediaExists = await FileSystem.exists(
       AndroidScoped.appendPath(storageUri, '.nomedia'),
     );
+
     if (newNoMedia && !noMediaExists) {
       await createFile(storageUri, '.nomedia', 'text/x-unknown');
     } else if (!newNoMedia && noMediaExists) {
       await deleteFile(AndroidScoped.appendPath(storageUri, '.nomedia'));
     }
-    dispatch(setNoMedia(newNoMedia));
   },
 );
 

src/types/index.ts

@@ -1,3 +1,4 @@
+export { ROUTE } from './route';
 export {
   HOME_SORT,
   homeSortQuery,

src/types/route.ts

@@ -0,0 +1,9 @@
+enum ROUTE {
+  MAIN = 'Main',
+  HOME = 'Home',
+  TAGS = 'Tags',
+  SETTINGS = 'Settings',
+  ADD_MEME = 'Add Meme',
+  ADD_TAG = 'Add Tag',
+}
+export { ROUTE };