Phecda / NGPlay

Go to a project
Toggle navigation Toggle navigation pinning
Phecda
fb41b454 1 parent 2649e9e3

refactor: remove WelcomePage

Inline Side-by-side
Showing 5 changed files with 86 additions and 139 deletions
1 import React from 'react'; 1 import React from 'react';
2 -import { NavigationContainer } from '@react-navigation/native'; 2 +import {
  3 + NavigationContainer,
  4 + RouteProp,
  5 + TabNavigationState,
  6 +} from '@react-navigation/native';
3 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 7 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
4 -import { createStackNavigator } from '@react-navigation/stack'; 8 +import {
5 -import Fontisto from 'react-native-vector-icons/Fontisto'; 9 + createStackNavigator,
  10 + HeaderStyleInterpolators,
  11 +} from '@react-navigation/stack';
6 import Ionicons from 'react-native-vector-icons/Ionicons'; 12 import Ionicons from 'react-native-vector-icons/Ionicons';
7 import { MainTabParamList, MainStackParamList } from '../type/Navigation'; 13 import { MainTabParamList, MainStackParamList } from '../type/Navigation';
8 -import WelcomePage from './WelcomePage';  
9 import SystemInfo from './SystemInfo'; 14 import SystemInfo from './SystemInfo';
10 import DesignList from './DesignList'; 15 import DesignList from './DesignList';
11 import { useDynamicValue } from 'react-native-dark-mode'; 16 import { useDynamicValue } from 'react-native-dark-mode';
12 import { colorPreset } from '../design'; 17 import { colorPreset } from '../design';
13 import RNDeviceInfoList from './RNDeviceInfo'; 18 import RNDeviceInfoList from './RNDeviceInfo';
  19 +import { StyleSheet } from 'react-native';
14 20
15 const MainTab = createBottomTabNavigator<MainTabParamList>(); 21 const MainTab = createBottomTabNavigator<MainTabParamList>();
16 22
  23 +function getTabHeader(
  24 + route: RouteProp<MainStackParamList, 'MainTab'> & {
  25 + state?: TabNavigationState;
  26 + }
  27 +) {
  28 + const { state } = route;
  29 + if (!state) return 'SystemInfo';
  30 + const { routeNames, index } = state;
  31 + const routeName = routeNames[index] as keyof MainTabParamList;
  32 + return routeName;
  33 +}
  34 +
17 const Home = () => { 35 const Home = () => {
18 const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary); 36 const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
19 const tintColor = useDynamicValue(colorPreset.linkColor); 37 const tintColor = useDynamicValue(colorPreset.linkColor);
@@ -25,8 +43,6 @@ const Home = () => { @@ -25,8 +43,6 @@ const Home = () => {
25 return { 43 return {
26 tabBarIcon: ({ focused, size, color }) => { 44 tabBarIcon: ({ focused, size, color }) => {
27 switch (routeName) { 45 switch (routeName) {
28 - case 'WelcomePage':  
29 - return <Fontisto size={size} color={color} name={'react'} />;  
30 case 'SystemInfo': 46 case 'SystemInfo':
31 return ( 47 return (
32 <Ionicons 48 <Ionicons
@@ -61,7 +77,6 @@ const Home = () => { @@ -61,7 +77,6 @@ const Home = () => {
61 }, 77 },
62 }} 78 }}
63 > 79 >
64 - <MainTab.Screen name="WelcomePage" component={WelcomePage} />  
65 <MainTab.Screen name="SystemInfo" component={SystemInfo} /> 80 <MainTab.Screen name="SystemInfo" component={SystemInfo} />
66 <MainTab.Screen name="DesignList" component={DesignList} /> 81 <MainTab.Screen name="DesignList" component={DesignList} />
67 </MainTab.Navigator> 82 </MainTab.Navigator>
@@ -71,10 +86,30 @@ const Home = () => { @@ -71,10 +86,30 @@ const Home = () => {
71 const MainStack = createStackNavigator<MainStackParamList>(); 86 const MainStack = createStackNavigator<MainStackParamList>();
72 87
73 export default () => { 88 export default () => {
  89 + const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
  90 + const primaryLabelColor = useDynamicValue(colorPreset.labelColor.primary);
  91 + const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
74 return ( 92 return (
75 <NavigationContainer> 93 <NavigationContainer>
76 - <MainStack.Navigator> 94 + <MainStack.Navigator
77 - <MainStack.Screen name="MainTab" component={Home} /> 95 + screenOptions={{
  96 + headerStyle: {
  97 + backgroundColor,
  98 + shadowOffset: { width: 0, height: 0 },
  99 + borderBottomColor: opaqueSeparator,
  100 + borderBottomWidth: StyleSheet.hairlineWidth,
  101 + },
  102 + headerTintColor: primaryLabelColor,
  103 + headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
  104 + }}
  105 + >
  106 + <MainStack.Screen
  107 + name="MainTab"
  108 + component={Home}
  109 + options={({ route }) => {
  110 + return { headerTitle: getTabHeader(route) };
  111 + }}
  112 + />
78 <MainStack.Screen 113 <MainStack.Screen
79 name="RNDeviceInfoList" 114 name="RNDeviceInfoList"
80 component={RNDeviceInfoList} 115 component={RNDeviceInfoList}
1 import React, { useState, useCallback, useEffect } from 'react'; 1 import React, { useState, useCallback, useEffect } from 'react';
2 -import { StackNavigationProp } from '@react-navigation/stack';  
3 import DeviceInfo from 'react-native-device-info'; 2 import DeviceInfo from 'react-native-device-info';
4 -import { ListItem, BGScroll, Card, Divider, BGList } from '../component/View'; 3 +import { ListItem, Divider, BGList } from '../component/View';
5 -import { MainStackParamList } from '../type/Navigation';  
6 -  
7 -type NavigationProp = StackNavigationProp<  
8 - MainStackParamList,  
9 - 'RNDeviceInfoList'  
10 ->;  
11 4
12 type DeviceInfoMethod = keyof typeof DeviceInfo; 5 type DeviceInfoMethod = keyof typeof DeviceInfo;
13 6
@@ -34,10 +27,11 @@ const DeviceInfoItem = ({ k }: { k: DeviceInfoMethod }) => { @@ -34,10 +27,11 @@ const DeviceInfoItem = ({ k }: { k: DeviceInfoMethod }) => {
34 return <ListItem title={k} subtitle={v} onPress={onEval} />; 27 return <ListItem title={k} subtitle={v} onPress={onEval} />;
35 }; 28 };
36 29
37 -const RNDeviceInfoList = ({ navigation }: { navigation: NavigationProp }) => { 30 +const RNDeviceInfoList = () => {
38 return ( 31 return (
39 <BGList 32 <BGList
40 data={keys} 33 data={keys}
  34 + ItemSeparatorComponent={Divider}
41 renderItem={({ item }) => { 35 renderItem={({ item }) => {
42 return <DeviceInfoItem k={item} />; 36 return <DeviceInfoItem k={item} />;
43 }} 37 }}
1 import React from 'react'; 1 import React from 'react';
2 import { useWindowDimensions } from 'react-native'; 2 import { useWindowDimensions } from 'react-native';
  3 +import { screensEnabled } from 'react-native-screens';
3 import { ListItem, BGScroll, Card, Divider } from '../component/View'; 4 import { ListItem, BGScroll, Card, Divider } from '../component/View';
  5 +import { MainTabScreenProps } from '../type/Navigation';
4 6
5 -export default () => { 7 +declare var global: { HermesInternal: null | {} };
  8 +
  9 +export default ({ navigation, route }: MainTabScreenProps<'SystemInfo'>) => {
6 const { width, height, fontScale, scale } = useWindowDimensions(); 10 const { width, height, fontScale, scale } = useWindowDimensions();
7 return ( 11 return (
8 <BGScroll white> 12 <BGScroll white>
9 <Card shadow> 13 <Card shadow>
10 <ListItem 14 <ListItem
  15 + title={'Hermes'}
  16 + rightTitle={global.HermesInternal ? 'enabled' : 'disabled'}
  17 + />
  18 + <Divider />
  19 + <ListItem
11 title={'width'} 20 title={'width'}
12 rightTitle={`${Number.isInteger(width) ? width : width.toFixed(2)}pt`} 21 rightTitle={`${Number.isInteger(width) ? width : width.toFixed(2)}pt`}
13 rightSubtitle={`${width * scale}px`} 22 rightSubtitle={`${width * scale}px`}
@@ -24,6 +33,18 @@ export default () => { @@ -24,6 +33,18 @@ export default () => {
24 <ListItem title={'fontScale'} rightTitle={fontScale.toString()} /> 33 <ListItem title={'fontScale'} rightTitle={fontScale.toString()} />
25 <Divider /> 34 <Divider />
26 <ListItem title={'scale'} rightTitle={scale.toString()} /> 35 <ListItem title={'scale'} rightTitle={scale.toString()} />
  36 + <Divider />
  37 + <ListItem
  38 + title={'screen enabled'}
  39 + rightTitle={screensEnabled().toString()}
  40 + />
  41 + </Card>
  42 + <Card shadow>
  43 + <ListItem
  44 + title="RNDeviceInfo"
  45 + onPress={() => navigation.navigate('RNDeviceInfoList')}
  46 + chevron
  47 + />
27 </Card> 48 </Card>
28 </BGScroll> 49 </BGScroll>
29 ); 50 );
1 -/**  
2 - * Sample React Native App  
3 - * https://github.com/facebook/react-native  
4 - *  
5 - * Generated with the TypeScript template  
6 - * https://github.com/react-native-community/react-native-template-typescript  
7 - *  
8 - * @format  
9 - */  
10 -  
11 -import React from 'react';  
12 -import {  
13 - SafeAreaView,  
14 - StyleSheet,  
15 - ScrollView,  
16 - View,  
17 - Text,  
18 - StatusBar,  
19 -} from 'react-native';  
20 -  
21 -import {  
22 - Header,  
23 - LearnMoreLinks,  
24 - Colors,  
25 - DebugInstructions,  
26 - ReloadInstructions,  
27 -} from 'react-native/Libraries/NewAppScreen';  
28 -  
29 -declare var global: { HermesInternal: null | {} };  
30 -  
31 -const WelcomePage = () => {  
32 - return (  
33 - <>  
34 - <StatusBar barStyle="dark-content" />  
35 - <SafeAreaView>  
36 - <ScrollView  
37 - contentInsetAdjustmentBehavior="automatic"  
38 - style={styles.scrollView}  
39 - >  
40 - <Header />  
41 - {global.HermesInternal == null ? null : (  
42 - <View style={styles.engine}>  
43 - <Text style={styles.footer}>Engine: Hermes</Text>  
44 - </View>  
45 - )}  
46 - <View style={styles.body}>  
47 - <View style={styles.sectionContainer}>  
48 - <Text style={styles.sectionTitle}>Step One</Text>  
49 - <Text style={styles.sectionDescription}>  
50 - Edit <Text style={styles.highlight}>App.tsx</Text> to change  
51 - this screen and then come back to see your edits.  
52 - </Text>  
53 - </View>  
54 - <View style={styles.sectionContainer}>  
55 - <Text style={styles.sectionTitle}>See Your Changes</Text>  
56 - <Text style={styles.sectionDescription}>  
57 - <ReloadInstructions />  
58 - </Text>  
59 - </View>  
60 - <View style={styles.sectionContainer}>  
61 - <Text style={styles.sectionTitle}>Debug</Text>  
62 - <Text style={styles.sectionDescription}>  
63 - <DebugInstructions />  
64 - </Text>  
65 - </View>  
66 - <View style={styles.sectionContainer}>  
67 - <Text style={styles.sectionTitle}>Learn More</Text>  
68 - <Text style={styles.sectionDescription}>  
69 - Read the docs to discover what to do next:  
70 - </Text>  
71 - </View>  
72 - <LearnMoreLinks />  
73 - </View>  
74 - </ScrollView>  
75 - </SafeAreaView>  
76 - </>  
77 - );  
78 -};  
79 -  
80 -const styles = StyleSheet.create({  
81 - scrollView: {  
82 - backgroundColor: Colors.lighter,  
83 - },  
84 - engine: {  
85 - position: 'absolute',  
86 - right: 0,  
87 - },  
88 - body: {  
89 - backgroundColor: Colors.white,  
90 - },  
91 - sectionContainer: {  
92 - marginTop: 32,  
93 - paddingHorizontal: 24,  
94 - },  
95 - sectionTitle: {  
96 - fontSize: 24,  
97 - fontWeight: '600',  
98 - color: Colors.black,  
99 - },  
100 - sectionDescription: {  
101 - marginTop: 8,  
102 - fontSize: 18,  
103 - fontWeight: '400',  
104 - color: Colors.dark,  
105 - },  
106 - highlight: {  
107 - fontWeight: '700',  
108 - },  
109 - footer: {  
110 - color: Colors.dark,  
111 - fontSize: 12,  
112 - fontWeight: '600',  
113 - padding: 4,  
114 - paddingRight: 12,  
115 - textAlign: 'right',  
116 - },  
117 -});  
118 -  
119 -export default WelcomePage;  
  1 +import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
  2 +import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
  3 +import { StackNavigationProp } from '@react-navigation/stack';
  4 +
1 export type MainTabParamList = { 5 export type MainTabParamList = {
2 - WelcomePage: undefined;  
3 SystemInfo: undefined; 6 SystemInfo: undefined;
4 DesignList: undefined; 7 DesignList: undefined;
5 }; 8 };
@@ -8,3 +11,16 @@ export type MainStackParamList = { @@ -8,3 +11,16 @@ export type MainStackParamList = {
8 MainTab: undefined; 11 MainTab: undefined;
9 RNDeviceInfoList: undefined; 12 RNDeviceInfoList: undefined;
10 }; 13 };
  14 +
  15 +export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
  16 + navigation: CompositeNavigationProp<
  17 + BottomTabNavigationProp<MainTabParamList, RouteName>,
  18 + StackNavigationProp<MainStackParamList>
  19 + >;
  20 + route: RouteProp<MainTabParamList, RouteName>;
  21 +};
  22 +
  23 +export type MainStackScreenProps<RouteName extends keyof MainStackParamList> = {
  24 + navigation: StackNavigationProp<MainStackParamList, RouteName>;
  25 + route: RouteProp<MainStackParamList, RouteName>;
  26 +};