Refactor dimension handling

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

src/app.tsx

@@ -3,17 +3,18 @@ import { AppState, StatusBar, useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
-import { Provider } from 'react-redux';
+import { Provider as ReduxProvider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import type {} from 'redux-thunk/extend-redux';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { lightTheme, darkTheme } from './theme';
 import { Meme, Tag } from './database';
 import NavigationContainer from './navigation';
 import { store, persistor, validateSettings } from './state';
 import { LoadingView } from './components';
 import { Welcome } from './screens';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import styles from './styles';
+import { DimensionsProvider } from './contexts';
 
 const App = () => {
   const [showWelcome, setShowWelcome] = useState(false);
@@ -43,28 +44,30 @@ const App = () => {
 
   return (
     <PaperProvider theme={theme}>
-      <Provider store={store}>
-        <PersistGate
-          loading={<LoadingView />}
-          persistor={persistor}
-          onBeforeLift={onBeforeLift}>
-          <RealmProvider schema={[Meme, Tag]}>
-            <GestureHandlerRootView style={styles.flex}>
-              <SafeAreaProvider>
-                <StatusBar
-                  barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-                  backgroundColor={theme.colors.background}
-                />
-                {showWelcome ? (
-                  <Welcome onWelcomeComplete={() => setShowWelcome(false)} />
-                ) : (
-                  <NavigationContainer />
-                )}
-              </SafeAreaProvider>
-            </GestureHandlerRootView>
-          </RealmProvider>
-        </PersistGate>
-      </Provider>
+      <DimensionsProvider>
+        <ReduxProvider store={store}>
+          <PersistGate
+            loading={<LoadingView />}
+            persistor={persistor}
+            onBeforeLift={onBeforeLift}>
+            <RealmProvider schema={[Meme, Tag]}>
+              <GestureHandlerRootView style={styles.flex}>
+                <SafeAreaProvider>
+                  <StatusBar
+                    barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+                    backgroundColor={theme.colors.background}
+                  />
+                  {showWelcome ? (
+                    <Welcome onWelcomeComplete={() => setShowWelcome(false)} />
+                  ) : (
+                    <NavigationContainer />
+                  )}
+                </SafeAreaProvider>
+              </GestureHandlerRootView>
+            </RealmProvider>
+          </PersistGate>
+        </ReduxProvider>
+      </DimensionsProvider>
     </PaperProvider>
   );
 };