feat: go to expo-status bar + lazy screens on native

web-ridge · May 13, 2023 · b0071b4 · b0071b4
1 parent 39962b7
commit b0071b4
Show file tree

Hide file tree

Showing 27 changed files with 57 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -117,24 +117,6 @@ or with npm
 npm install react-native-navigation navigation navigation-react navigation-react-mobile navigation-react-native
 ```
 
-### 2. Extra (optional)
-
-Add react-native-web-image-loader (see example), this will make sure the images in the BottomBar will be in good quality
-on the web.
-
-```js
-
-// ...
-addWebpackModuleRule({
-  test: /\.(png|jpe?g|gif)$/,
-  options: {
-    name: 'static/media/[name].[hash:8].[ext]',
-    scalings: { '@3x': 1 },
-  },
-  loader: 'react-native-web-image-loader',
-})
-// ...
-```
 
 Support for Material You bottom bar in Android
 
@@ -410,15 +392,16 @@ navigation://home/post/post-1
 ## More
 
 ```ts
-// global
-createLinkComponent,
+  // global
+  createLinkComponent,
   SwitchRoot,
   BottomTabLink,
   Link
-BackLink // for now .pop() but we'll update this according to Android guidelines later on (to always go back in hierarchy)
-lazyWithPreload // only available on the web: see example app
-Redirect
-NavigationRoot,
+  BackLink // for now .pop() but we'll update this according to Android guidelines later on (to always go back in hierarchy)
+  lazyWithPreload // only available on the web: see example app
+  Redirect,
+  StatusBar,
+  NavigationRoot,
   createNavigation,
   // refreshBottomTabs, TODO: implement this
   createBottomTabsRoot,

diff --git a/example/package.json b/example/package.json
@@ -16,7 +16,7 @@
     "expo": "~48.0.15",
     "expo-linking": "~4.0.1",
     "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "expo-status-bar": "^1.4.4",
     "expo-system-ui": "~2.2.1",
     "navigation": "^6.1.0",
     "navigation-react": "^4.5.1",

diff --git a/example/src/Account/AccountScreenLazy.native.tsx b/example/src/Account/AccountScreenLazy.native.tsx
diff --git a/example/src/Account/AccountScreenLazy.tsx b/example/src/Account/AccountScreenLazy.tsx
diff --git a/example/src/Account/AccountScreen.tsx → example/src/AccountScreen.tsx b/example/src/Account/AccountScreen.tsx → example/src/AccountScreen.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Paragraph, Text, useTheme } from 'react-native-paper';
-import useAuthState, { reset } from '../Auth/useAuthState';
+import useAuthState, { reset } from './useAuthState';
 
 import {
   useBottomTabIndex,
@@ -10,11 +10,11 @@ import {
   BottomTabLink,
 } from 'react-native-ridge-navigation';
 import { View, ScrollView, Modal } from 'react-native';
-import { BottomRoot } from '../Navigator';
-import Header from '../Header';
-import { useRenderLog } from '../helpers/utils';
-import routes from '../Routes';
-import ButtonLink from '../ButtonLink';
+import { BottomRoot } from './Navigator';
+import Header from './Header';
+import { useRenderLog } from './helpers/utils';
+import routes from './Routes';
+import ButtonLink from './ButtonLink';
 
 function AccountScreen() {
   useRenderLog('AccountScreen');

diff --git a/example/src/Auth/AuthScreenLazy.native.tsx b/example/src/Auth/AuthScreenLazy.native.tsx
diff --git a/example/src/Auth/AuthScreenLazy.tsx b/example/src/Auth/AuthScreenLazy.tsx
diff --git a/example/src/Auth/AuthScreen.tsx → example/src/AuthScreen.tsx b/example/src/Auth/AuthScreen.tsx → example/src/AuthScreen.tsx
@@ -4,13 +4,13 @@ import { Button, TextInput } from 'react-native-paper';
 
 import { useFormState, Form, ScrollView } from 'react-native-use-form';
 
-import PaddingView from '../helpers/PaddingView';
-import Spacer from '../helpers/Spacer';
-import ScreenWrapper from '../helpers/ScreenWrapper';
+import PaddingView from './helpers/PaddingView';
+import Spacer from './helpers/Spacer';
+import ScreenWrapper from './helpers/ScreenWrapper';
 import { SwitchRoot } from 'react-native-ridge-navigation';
-import { NavigationRoots } from '../Navigator';
+import { NavigationRoots } from './Navigator';
 import { fetchAndSaveProfileForToken } from './useAuthState';
-import Introduction from '../Introduction';
+import Introduction from './Introduction';
 
 interface SignInFormState {
   username: string;

diff --git a/example/src/Auth/Authorization.tsx → example/src/Authorization.tsx b/example/src/Auth/Authorization.tsx → example/src/Authorization.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { SwitchRoot } from 'react-native-ridge-navigation';
-import { NavigationRoots } from '../Navigator';
+import { NavigationRoots } from './Navigator';
 import useAuthState from './useAuthState';
 
 export function RequireAuthHOC<T>(WrappedComponent: any) {

diff --git a/example/src/Home/HomeScreenLazy.native.tsx b/example/src/Home/HomeScreenLazy.native.tsx
diff --git a/example/src/Home/HomeScreenLazy.tsx b/example/src/Home/HomeScreenLazy.tsx
diff --git a/example/src/Home/HomeScreen.tsx → example/src/HomeScreen.tsx b/example/src/Home/HomeScreen.tsx → example/src/HomeScreen.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { StyleSheet, ScrollView, View, Linking } from 'react-native';
 import { Button } from 'react-native-paper';
-import Introduction from '../Introduction';
-import { useRenderLog } from '../helpers/utils';
+import Introduction from './Introduction';
+import { useRenderLog } from './helpers/utils';
 
 function HomeScreen() {
   useRenderLog('HomeScreen');

diff --git a/example/src/NavigatorScreens.tsx b/example/src/NavigatorScreens.tsx
@@ -1,10 +1,5 @@
-import { registerScreen } from 'react-native-ridge-navigation';
-import { RequireAuthHOC } from './Auth/Authorization';
-import AuthScreenLazy from './Auth/AuthScreenLazy';
-import PostsScreenLazy from './Post/PostsScreenLazy';
-import AccountScreenLazy from './Account/AccountScreenLazy';
-import PostScreenLazy from './Post/PostScreenLazy';
-import HomeScreenLazy from './Home/HomeScreenLazy';
+import { lazyWithPreload, registerScreen } from 'react-native-ridge-navigation';
+import { RequireAuthHOC } from './Authorization';
 
 import queryClient from './queryClient';
 import {
@@ -14,17 +9,25 @@ import {
   queryKeyPostsScreenPromise,
 } from './queryKeys';
 
-export const AuthScreen = registerScreen('/auth', AuthScreenLazy, () => {});
-export const HomeScreen = registerScreen('/home', HomeScreenLazy, () => {});
+export const AuthScreen = registerScreen(
+  '/auth',
+  lazyWithPreload(() => import('./AuthScreen')),
+  () => {}
+);
+export const HomeScreen = registerScreen(
+  '/home',
+  lazyWithPreload(() => import('./HomeScreen')),
+  () => {}
+);
 export const AccountScreen = registerScreen(
   '/account',
-  RequireAuthHOC(AccountScreenLazy),
+  RequireAuthHOC(lazyWithPreload(() => import('./AccountScreen'))),
   () => {}
 );
 
 export const PostsScreen = registerScreen(
   '/overview',
-  RequireAuthHOC(PostsScreenLazy),
+  RequireAuthHOC(lazyWithPreload(() => import('./PostsScreen'))),
   () => {
     queryClient.prefetchQuery(queryKeyPostsScreen, queryKeyPostsScreenPromise, {
       staleTime: 3000,
@@ -35,7 +38,7 @@ export const PostsScreen = registerScreen(
 
 export const PostScreen = registerScreen(
   '/post-test/:id',
-  RequireAuthHOC(PostScreenLazy),
+  RequireAuthHOC(lazyWithPreload(() => import('./PostScreen'))),
   (params) => {
     const { id } = params;
     queryClient.prefetchQuery(

diff --git a/example/src/Post/PostScreenLazy.native.tsx b/example/src/Post/PostScreenLazy.native.tsx
diff --git a/example/src/Post/PostScreenLazy.tsx b/example/src/Post/PostScreenLazy.tsx
diff --git a/example/src/Post/PostsScreenLazy.native.tsx b/example/src/Post/PostsScreenLazy.native.tsx
diff --git a/example/src/Post/PostsScreenLazy.tsx b/example/src/Post/PostsScreenLazy.tsx
diff --git a/example/src/Post/PostScreen.tsx → example/src/PostScreen.tsx b/example/src/Post/PostScreen.tsx → example/src/PostScreen.tsx
@@ -7,11 +7,11 @@ import {
 } from 'react-native-ridge-navigation';
 import { useQuery } from '@tanstack/react-query';
 import { ScrollView } from 'react-native';
-import Header from '../Header';
-import { queryKeyPostScreen, queryKeyPostScreenPromise } from '../queryKeys';
-import routes from '../Routes';
-import ButtonLink from '../ButtonLink';
-import Spacer from '../helpers/Spacer';
+import Header from './Header';
+import { queryKeyPostScreen, queryKeyPostScreenPromise } from './queryKeys';
+import routes from './Routes';
+import ButtonLink from './ButtonLink';
+import Spacer from './helpers/Spacer';
 
 function PostScreen() {
   // optional with react-query  but could be used i.c.w. Relay.dev etc.

diff --git a/example/src/Post/PostsScreen.tsx → example/src/PostsScreen.tsx b/example/src/Post/PostsScreen.tsx → example/src/PostsScreen.tsx
@@ -4,13 +4,13 @@ import { usePreloadResult } from 'react-native-ridge-navigation';
 import { FlashList } from '@shopify/flash-list';
 import { useQuery } from '@tanstack/react-query';
 
-import { queryKeyPostsScreen, queryKeyPostsScreenPromise } from '../queryKeys';
+import { queryKeyPostsScreen, queryKeyPostsScreenPromise } from './queryKeys';
 
-import routes from '../Routes';
+import routes from './Routes';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useRenderLog } from '../helpers/utils';
-import ListItemLink from '../ListItemLink';
+import { useRenderLog } from './helpers/utils';
+import ListItemLink from './ListItemLink';
 
 const ITEM_HEIGHT = 79;
 

diff --git a/example/src/Auth/useAuthState.tsx → example/src/useAuthState.tsx b/example/src/Auth/useAuthState.tsx → example/src/useAuthState.tsx
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
-import { storage } from '../storage';
-import api from '../api';
+import { storage } from './storage';
+import api from './api';
 
 export interface User {
   id: number;

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -4277,7 +4277,7 @@ expo-splash-screen@~0.18.2:
     "@expo/configure-splash-screen" "^0.6.0"
     "@expo/prebuild-config" "6.0.1"
 
-expo-status-bar@~1.4.4:
+expo-status-bar@^1.4.4:
   version "1.4.4"
   resolved "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.4.4.tgz#6874ccfda5a270d66f123a9f220735a76692d114"
   integrity sha512-5DV0hIEWgatSC3UgQuAZBoQeaS9CqeWRZ3vzBR9R/+IUD87Adbi4FGhU10nymRqFXOizGsureButGZIXPs7zEA==

diff --git a/src/Link.tsx b/src/Link.tsx
@@ -17,8 +17,10 @@ export default function Link<T extends BaseScreen>({
   ...rest
 }: LinkProps<T>) {
   const isPushing = React.useRef<boolean>(false);
-  const { push, replace, refresh, preload } = useNavigation();
-
+  const { push, replace, refresh, preload, preloadElement } = useNavigation();
+  const preloadElementInner = React.useCallback(() => {
+    preloadElement(to);
+  }, [preloadElement, to]);
   const onPress = React.useCallback(
     async (event: GestureResponderEvent) => {
       // we don't want to go to another screen but we do want preloading
@@ -58,8 +60,9 @@ export default function Link<T extends BaseScreen>({
   );
 
   const onPressIn = React.useCallback(() => {
+    preloadElementInner();
     preload(to, params);
-  }, [to, preload, params]);
+  }, [to, preload, preloadElementInner, params]);
 
   if (skipLinkBehaviourIfPressIsDefined && onCustomPress) {
     return children({ onPress: onCustomPress });

diff --git a/src/NavigationProvider.tsx b/src/NavigationProvider.tsx
@@ -15,7 +15,7 @@ import { defaultTheme, ThemeSettings } from './theme';
 import { Platform, useColorScheme } from 'react-native';
 import { NavigationHandler } from 'navigation-react';
 import NavigationStack from './navigation/NavigationStack';
-import StatusBar from './navigation/StatusBar';
+
 import BottomTabsStack from './BottomTabsStack';
 import RidgeNavigationContext from './contexts/RidgeNavigationContext';
 import NavigationStackWrapper from './NavigationStackWrapper';
@@ -240,12 +240,6 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
         SuspenseContainer,
       }}
     >
-      <StatusBar
-        style={theme.statusBar.style}
-        backgroundColor={theme.statusBar.backgroundColor as any}
-        translucent
-      />
-
       <BottomTabBadgeProvider>
         <NavigationHandler stateNavigator={rootNavigator}>
           <NavigationStackWrapper>

diff --git a/src/navigation/StatusBar.tsx → src/StatusBar.tsx b/src/navigation/StatusBar.tsx → src/StatusBar.tsx
diff --git a/src/navigation/StatusBar.web.tsx → src/StatusBar.web.tsx b/src/navigation/StatusBar.web.tsx → src/StatusBar.web.tsx
diff --git a/src/theme.ts b/src/theme.ts
@@ -1,49 +1,6 @@
 import type { ColorValue } from 'react-native';
 import Color from 'color';
 
-export interface OptionsStatusBar {
-  /**
-   * Set the status bar visibility
-   * @default true
-   */
-  visible?: boolean;
-  /**
-   * Set the text color of the status bar
-   * @default 'light'
-   */
-  style?: 'light' | 'dark';
-  /**
-   * Set the background color of the status bar
-   * #### (Android specific)
-   */
-  backgroundColor?: ColorValue;
-  /**
-   * Draw screen behind the status bar
-   * #### (Android specific)
-   */
-  drawBehind?: boolean;
-  /**
-   * Allows the StatusBar to be translucent (blurred)
-   * #### (Android specific)
-   */
-  translucent?: boolean;
-  /**
-   * Animate StatusBar style changes.
-   * #### (iOS specific)
-   */
-  animated?: boolean;
-  /**
-   * Automatically hide the StatusBar when the TopBar hides.
-   * #### (iOS specific)
-   */
-  hideWithTopBar?: boolean;
-  /**
-   * Blur content beneath the StatusBar.
-   * #### (iOS specific)
-   */
-  blur?: boolean;
-}
-
 export interface ThemeLayout {
   backgroundColor: ColorValue;
 }
@@ -71,7 +28,6 @@ export interface ThemeBottomBar {
 export interface Theme {
   bottomBar: ThemeBottomBar;
   layout: ThemeLayout;
-  statusBar: OptionsStatusBar;
 }
 
 type FontWeight =
@@ -120,12 +76,6 @@ export function createSimpleTheme(
 ): ThemeSettings {
   return {
     light: {
-      statusBar: {
-        translucent: false,
-        drawBehind: true,
-        style: 'dark',
-        backgroundColor: 'transparent',
-      },
       layout: {
         backgroundColor: simpleTheme.light.backgroundColor || '#fff',
       },
@@ -154,12 +104,6 @@ export function createSimpleTheme(
       },
     },
     dark: {
-      statusBar: {
-        translucent: false,
-        drawBehind: true,
-        style: 'light',
-        backgroundColor: 'transparent',
-      },
       layout: {
         backgroundColor: simpleTheme.dark.backgroundColor || '#000',
       },

diff --git a/yarn.lock b/yarn.lock
@@ -6627,7 +6627,7 @@ [email protected]:
 
 expo-status-bar@^1.4.4:
   version "1.4.4"
-  resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.4.4.tgz#6874ccfda5a270d66f123a9f220735a76692d114"
+  resolved "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.4.4.tgz#6874ccfda5a270d66f123a9f220735a76692d114"
   integrity sha512-5DV0hIEWgatSC3UgQuAZBoQeaS9CqeWRZ3vzBR9R/+IUD87Adbi4FGhU10nymRqFXOizGsureButGZIXPs7zEA==
 
 [email protected]: