-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[IOAPPFD0-132] Example app · Enable iOS/Android native navigation (#42)
## Short description This PR enables the native navigation in the example app. If you want to discover more about the change and its implications, read the description of the [PR #4857](pagopa/io-app#4857) ([io-app](https://github.com/pagopa/io-app)) for reference. ## List of changes proposed in this pull request - **[Example app]** Update `react-navigation` and related packages to `6.x` version - **[Main package]** Update `reanimated` and `react-native-safe-area-context` to the last version - Replace `StackNavigator` with the `NativeStackNavigator` - Add native fullscreen modal (it seems different from the one available in the `5.x`) - Add native iOS search screen with custom color palette - Add dark mode support to the example app - Fix `AnimatedTick` rendering error after upgrade of `react-native-svg` ## How to test Go to the `example` directory and run the app
- Loading branch information
Showing
17 changed files
with
231 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,56 @@ | ||
| import { IOStyles } from "@pagopa/io-app-design-system"; | ||
| import { NavigationContainer } from "@react-navigation/native"; | ||
| import { | ||
| DarkTheme, | ||
| DefaultTheme, | ||
| NavigationContainer | ||
| } from "@react-navigation/native"; | ||
| import * as React from "react"; | ||
| import { | ||
| IOStyles, | ||
| IOThemeContext, | ||
| IOThemeDark, | ||
| IOThemeLight, | ||
| IOThemes | ||
| } from "@pagopa/io-app-design-system"; | ||
| import { useColorScheme } from "react-native"; | ||
| import { GestureHandlerRootView } from "react-native-gesture-handler"; | ||
| import AppNavigator from "./navigation/navigator"; | ||
|
|
||
| const IONavigationDarkTheme = { | ||
| ...DarkTheme, | ||
| colors: { | ||
| ...DarkTheme.colors, | ||
| background: IOThemeDark["appBackground-primary"], | ||
| card: IOThemeDark["appBackground-primary"] | ||
| } | ||
| }; | ||
|
|
||
| const IONavigationLightTheme = { | ||
| ...DefaultTheme, | ||
| colors: { | ||
| ...DefaultTheme.colors, | ||
| background: IOThemeLight["appBackground-primary"], | ||
| card: IOThemeLight["appBackground-primary"] | ||
| } | ||
| }; | ||
|
|
||
| export default function App() { | ||
| const colorScheme = useColorScheme(); | ||
|
|
||
| return ( | ||
| <GestureHandlerRootView style={IOStyles.flex}> | ||
| <NavigationContainer> | ||
| <AppNavigator /> | ||
| <IOThemeContext.Provider | ||
| value={colorScheme === "dark" ? IOThemes.dark : IOThemes.light} | ||
| > | ||
| <NavigationContainer | ||
| theme={ | ||
| colorScheme === "dark" | ||
| ? IONavigationDarkTheme | ||
| : IONavigationLightTheme | ||
| } | ||
| > | ||
| <GestureHandlerRootView style={IOStyles.flex}> | ||
| <AppNavigator /> | ||
| </GestureHandlerRootView> | ||
| </NavigationContainer> | ||
| </GestureHandlerRootView> | ||
| </IOThemeContext.Provider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,19 @@ | ||
| import { ContentWrapper, IOThemeContext } from "@pagopa/io-app-design-system"; | ||
| import React, { useContext } from "react"; | ||
| import { ContentWrapper } from "@pagopa/io-app-design-system"; | ||
| import React from "react"; | ||
| import { ScrollView, View } from "react-native"; | ||
|
|
||
| type Props = { | ||
| children: React.ReactNode; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const Screen = ({ | ||
| children, | ||
| }: Props) => { | ||
| const theme = useContext(IOThemeContext); | ||
| export const Screen = ({ children }: Props) => ( | ||
| <ScrollView> | ||
| <ContentWrapper>{children}</ContentWrapper> | ||
| </ScrollView> | ||
| ); | ||
|
|
||
| return ( | ||
| <ScrollView | ||
| style={{ | ||
| backgroundColor: theme["appBackground-primary"] | ||
| }} | ||
| > | ||
| <ContentWrapper>{children}</ContentWrapper> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| export const NoMarginScreen = ({ | ||
| children, | ||
| }: Props) => { | ||
| const theme = useContext(IOThemeContext); | ||
|
|
||
| return ( | ||
| <ScrollView | ||
| style={{ | ||
| backgroundColor: theme["appBackground-primary"] | ||
| }} | ||
| > | ||
| <View>{children}</View> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
| export const NoMarginScreen = ({ children }: Props) => ( | ||
| <ScrollView> | ||
| <View>{children}</View> | ||
| </ScrollView> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.