From b0071b483209e066f881920d0e9db3212767e24d Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Sat, 13 May 2023 22:35:03 +0200 Subject: [PATCH] feat: go to expo-status bar + lazy screens on native --- README.md | 31 +++------- example/package.json | 2 +- .../src/Account/AccountScreenLazy.native.tsx | 2 - example/src/Account/AccountScreenLazy.tsx | 2 - example/src/{Account => }/AccountScreen.tsx | 12 ++-- example/src/Auth/AuthScreenLazy.native.tsx | 2 - example/src/Auth/AuthScreenLazy.tsx | 2 - example/src/{Auth => }/AuthScreen.tsx | 10 ++-- example/src/{Auth => }/Authorization.tsx | 2 +- example/src/Home/HomeScreenLazy.native.tsx | 2 - example/src/Home/HomeScreenLazy.tsx | 2 - example/src/{Home => }/HomeScreen.tsx | 4 +- example/src/NavigatorScreens.tsx | 27 +++++---- example/src/Post/PostScreenLazy.native.tsx | 2 - example/src/Post/PostScreenLazy.tsx | 2 - example/src/Post/PostsScreenLazy.native.tsx | 2 - example/src/Post/PostsScreenLazy.tsx | 2 - example/src/{Post => }/PostScreen.tsx | 10 ++-- example/src/{Post => }/PostsScreen.tsx | 8 +-- example/src/{Auth => }/useAuthState.tsx | 4 +- example/yarn.lock | 2 +- src/Link.tsx | 9 ++- src/NavigationProvider.tsx | 8 +-- src/{navigation => }/StatusBar.tsx | 0 src/{navigation => }/StatusBar.web.tsx | 0 src/theme.ts | 56 ------------------- yarn.lock | 2 +- 27 files changed, 57 insertions(+), 150 deletions(-) delete mode 100644 example/src/Account/AccountScreenLazy.native.tsx delete mode 100644 example/src/Account/AccountScreenLazy.tsx rename example/src/{Account => }/AccountScreen.tsx (93%) delete mode 100644 example/src/Auth/AuthScreenLazy.native.tsx delete mode 100644 example/src/Auth/AuthScreenLazy.tsx rename example/src/{Auth => }/AuthScreen.tsx (92%) rename example/src/{Auth => }/Authorization.tsx (93%) delete mode 100644 example/src/Home/HomeScreenLazy.native.tsx delete mode 100644 example/src/Home/HomeScreenLazy.tsx rename example/src/{Home => }/HomeScreen.tsx (94%) delete mode 100644 example/src/Post/PostScreenLazy.native.tsx delete mode 100644 example/src/Post/PostScreenLazy.tsx delete mode 100644 example/src/Post/PostsScreenLazy.native.tsx delete mode 100644 example/src/Post/PostsScreenLazy.tsx rename example/src/{Post => }/PostScreen.tsx (92%) rename example/src/{Post => }/PostsScreen.tsx (92%) rename example/src/{Auth => }/useAuthState.tsx (95%) rename src/{navigation => }/StatusBar.tsx (100%) rename src/{navigation => }/StatusBar.web.tsx (100%) diff --git a/README.md b/README.md index a90963b..5ba46d8 100644 --- 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 index a1afa7b..51e7e08 100644 --- 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 deleted file mode 100644 index 8139b84..0000000 --- a/example/src/Account/AccountScreenLazy.native.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import AccountScreen from './AccountScreen'; -export default AccountScreen; diff --git a/example/src/Account/AccountScreenLazy.tsx b/example/src/Account/AccountScreenLazy.tsx deleted file mode 100644 index 34da22f..0000000 --- a/example/src/Account/AccountScreenLazy.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import { lazyWithPreload } from 'react-native-ridge-navigation'; -export default lazyWithPreload(() => import('./AccountScreen')); diff --git a/example/src/Account/AccountScreen.tsx b/example/src/AccountScreen.tsx similarity index 93% rename from example/src/Account/AccountScreen.tsx rename to example/src/AccountScreen.tsx index 2f5a559..7bcfdda 100644 --- a/example/src/Account/AccountScreen.tsx +++ b/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 deleted file mode 100644 index 51fdc94..0000000 --- a/example/src/Auth/AuthScreenLazy.native.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import AuthScreen from './AuthScreen'; -export default AuthScreen; diff --git a/example/src/Auth/AuthScreenLazy.tsx b/example/src/Auth/AuthScreenLazy.tsx deleted file mode 100644 index 040176b..0000000 --- a/example/src/Auth/AuthScreenLazy.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import { lazyWithPreload } from 'react-native-ridge-navigation'; -export default lazyWithPreload(() => import('./AuthScreen')); diff --git a/example/src/Auth/AuthScreen.tsx b/example/src/AuthScreen.tsx similarity index 92% rename from example/src/Auth/AuthScreen.tsx rename to example/src/AuthScreen.tsx index 7a29b5d..eb11561 100644 --- a/example/src/Auth/AuthScreen.tsx +++ b/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 b/example/src/Authorization.tsx similarity index 93% rename from example/src/Auth/Authorization.tsx rename to example/src/Authorization.tsx index 45e6de7..70dce2b 100644 --- a/example/src/Auth/Authorization.tsx +++ b/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(WrappedComponent: any) { diff --git a/example/src/Home/HomeScreenLazy.native.tsx b/example/src/Home/HomeScreenLazy.native.tsx deleted file mode 100644 index 7ca6e44..0000000 --- a/example/src/Home/HomeScreenLazy.native.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import HomeScreen from './HomeScreen'; -export default HomeScreen; diff --git a/example/src/Home/HomeScreenLazy.tsx b/example/src/Home/HomeScreenLazy.tsx deleted file mode 100644 index cece67a..0000000 --- a/example/src/Home/HomeScreenLazy.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import { lazyWithPreload } from 'react-native-ridge-navigation'; -export default lazyWithPreload(() => import('./HomeScreen')); diff --git a/example/src/Home/HomeScreen.tsx b/example/src/HomeScreen.tsx similarity index 94% rename from example/src/Home/HomeScreen.tsx rename to example/src/HomeScreen.tsx index e451556..3d34b8c 100644 --- a/example/src/Home/HomeScreen.tsx +++ b/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 index 80fc81f..16663c2 100644 --- 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 deleted file mode 100644 index b199cb2..0000000 --- a/example/src/Post/PostScreenLazy.native.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import PostScreen from './PostScreen'; -export default PostScreen; diff --git a/example/src/Post/PostScreenLazy.tsx b/example/src/Post/PostScreenLazy.tsx deleted file mode 100644 index 90421bb..0000000 --- a/example/src/Post/PostScreenLazy.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import { lazyWithPreload } from 'react-native-ridge-navigation'; -export default lazyWithPreload(() => import('./PostScreen')); diff --git a/example/src/Post/PostsScreenLazy.native.tsx b/example/src/Post/PostsScreenLazy.native.tsx deleted file mode 100644 index fd138e6..0000000 --- a/example/src/Post/PostsScreenLazy.native.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import PostsScreen from './PostsScreen'; -export default PostsScreen; diff --git a/example/src/Post/PostsScreenLazy.tsx b/example/src/Post/PostsScreenLazy.tsx deleted file mode 100644 index c643459..0000000 --- a/example/src/Post/PostsScreenLazy.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import { lazyWithPreload } from 'react-native-ridge-navigation'; -export default lazyWithPreload(() => import('./PostsScreen')); diff --git a/example/src/Post/PostScreen.tsx b/example/src/PostScreen.tsx similarity index 92% rename from example/src/Post/PostScreen.tsx rename to example/src/PostScreen.tsx index cb8c0e7..883b139 100644 --- a/example/src/Post/PostScreen.tsx +++ b/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 b/example/src/PostsScreen.tsx similarity index 92% rename from example/src/Post/PostsScreen.tsx rename to example/src/PostsScreen.tsx index cc623b4..2a07f31 100644 --- a/example/src/Post/PostsScreen.tsx +++ b/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 b/example/src/useAuthState.tsx similarity index 95% rename from example/src/Auth/useAuthState.tsx rename to example/src/useAuthState.tsx index 1f612ae..30a4426 100644 --- a/example/src/Auth/useAuthState.tsx +++ b/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 index b978d0f..d75ff3f 100644 --- 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 index cf1b9c4..d540cad 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -17,8 +17,10 @@ export default function Link({ ...rest }: LinkProps) { const isPushing = React.useRef(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({ ); 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 index babbde9..6b6f5d9 100644 --- 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({ SuspenseContainer, }} > - - diff --git a/src/navigation/StatusBar.tsx b/src/StatusBar.tsx similarity index 100% rename from src/navigation/StatusBar.tsx rename to src/StatusBar.tsx diff --git a/src/navigation/StatusBar.web.tsx b/src/StatusBar.web.tsx similarity index 100% rename from src/navigation/StatusBar.web.tsx rename to src/StatusBar.web.tsx diff --git a/src/theme.ts b/src/theme.ts index 3a7f232..a134fb5 100644 --- 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 index b31def0..6bcd1e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6627,7 +6627,7 @@ expo-pwa@0.0.124: 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== express@4.16.4: