Phecda / NGPlay

Go to a project
Toggle navigation Toggle navigation pinning
Phecda
fd92265e 1 parent bef64040

feat: add simple components

Inline Side-by-side
Showing 21 changed files with 669 additions and 104 deletions
@@ -9,111 +9,15 @@ @@ -9,111 +9,15 @@
9 */ 9 */
10 10
11 import React from 'react'; 11 import React from 'react';
12 -import { 12 +import { DarkModeProvider } from 'react-native-dark-mode';
13 - SafeAreaView, 13 +import AppNavigationContainer from './src/screen/AppNavigationContainer';
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 14
31 const App = () => { 15 const App = () => {
32 return ( 16 return (
33 - <> 17 + <DarkModeProvider>
34 - <StatusBar barStyle="dark-content" /> 18 + <AppNavigationContainer />
35 - <SafeAreaView> 19 + </DarkModeProvider>
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 ); 20 );
78 }; 21 };
79 22
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 App; 23 export default App;
@@ -83,7 +83,7 @@ project.ext.react = [ @@ -83,7 +83,7 @@ project.ext.react = [
83 ] 83 ]
84 84
85 apply from: "../../node_modules/react-native/react.gradle" 85 apply from: "../../node_modules/react-native/react.gradle"
86 - 86 +apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
87 /** 87 /**
88 * Set this to true to create two separate APKs instead of one: 88 * Set this to true to create two separate APKs instead of one:
89 * - An APK that only works on ARM devices 89 * - An APK that only works on ARM devices
@@ -194,7 +194,6 @@ @@ -194,7 +194,6 @@
194 698938961D6FF8AC4FCF2E29 /* Pods-NGPlay-tvOSTests.debug.xcconfig */, 194 698938961D6FF8AC4FCF2E29 /* Pods-NGPlay-tvOSTests.debug.xcconfig */,
195 B9229FB3695E83651E4D11D5 /* Pods-NGPlay-tvOSTests.release.xcconfig */, 195 B9229FB3695E83651E4D11D5 /* Pods-NGPlay-tvOSTests.release.xcconfig */,
196 ); 196 );
197 - name = Pods;  
198 path = Pods; 197 path = Pods;
199 sourceTree = "<group>"; 198 sourceTree = "<group>";
200 }; 199 };
@@ -294,6 +293,7 @@ @@ -294,6 +293,7 @@
294 TestTargetID = 13B07F861A680F5B00A75B9A; 293 TestTargetID = 13B07F861A680F5B00A75B9A;
295 }; 294 };
296 13B07F861A680F5B00A75B9A = { 295 13B07F861A680F5B00A75B9A = {
  296 + DevelopmentTeam = ZCZ85Z8LUT;
297 LastSwiftMigration = 1120; 297 LastSwiftMigration = 1120;
298 }; 298 };
299 2D02E47A1E0B4A5D006451C7 = { 299 2D02E47A1E0B4A5D006451C7 = {
@@ -543,7 +543,7 @@ @@ -543,7 +543,7 @@
543 ); 543 );
544 runOnlyForDeploymentPostprocessing = 0; 544 runOnlyForDeploymentPostprocessing = 0;
545 shellPath = /bin/sh; 545 shellPath = /bin/sh;
546 - shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 546 + shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 0\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
547 showEnvVarsInLog = 0; 547 showEnvVarsInLog = 0;
548 }; 548 };
549 FD10A7F122414F3F0027D42C /* Start Packager */ = { 549 FD10A7F122414F3F0027D42C /* Start Packager */ = {
@@ -728,6 +728,7 @@ @@ -728,6 +728,7 @@
728 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 728 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
729 CLANG_ENABLE_MODULES = YES; 729 CLANG_ENABLE_MODULES = YES;
730 CURRENT_PROJECT_VERSION = 1; 730 CURRENT_PROJECT_VERSION = 1;
  731 + DEVELOPMENT_TEAM = ZCZ85Z8LUT;
731 ENABLE_BITCODE = NO; 732 ENABLE_BITCODE = NO;
732 GCC_PREPROCESSOR_DEFINITIONS = ( 733 GCC_PREPROCESSOR_DEFINITIONS = (
733 "$(inherited)", 734 "$(inherited)",
@@ -755,6 +756,7 @@ @@ -755,6 +756,7 @@
755 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 756 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
756 CLANG_ENABLE_MODULES = YES; 757 CLANG_ENABLE_MODULES = YES;
757 CURRENT_PROJECT_VERSION = 1; 758 CURRENT_PROJECT_VERSION = 1;
  759 + DEVELOPMENT_TEAM = ZCZ85Z8LUT;
758 INFOPLIST_FILE = NGPlay/Info.plist; 760 INFOPLIST_FILE = NGPlay/Info.plist;
759 LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 761 LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
760 OTHER_LDFLAGS = ( 762 OTHER_LDFLAGS = (
@@ -39,6 +39,25 @@ @@ -39,6 +39,25 @@
39 </dict> 39 </dict>
40 <key>NSLocationWhenInUseUsageDescription</key> 40 <key>NSLocationWhenInUseUsageDescription</key>
41 <string></string> 41 <string></string>
  42 + <key>UIAppFonts</key>
  43 + <array>
  44 + <string>AntDesign.ttf</string>
  45 + <string>Entypo.ttf</string>
  46 + <string>EvilIcons.ttf</string>
  47 + <string>Feather.ttf</string>
  48 + <string>FontAwesome.ttf</string>
  49 + <string>FontAwesome5_Brands.ttf</string>
  50 + <string>FontAwesome5_Regular.ttf</string>
  51 + <string>FontAwesome5_Solid.ttf</string>
  52 + <string>Fontisto.ttf</string>
  53 + <string>Foundation.ttf</string>
  54 + <string>Ionicons.ttf</string>
  55 + <string>MaterialIcons.ttf</string>
  56 + <string>MaterialCommunityIcons.ttf</string>
  57 + <string>SimpleLineIcons.ttf</string>
  58 + <string>Octicons.ttf</string>
  59 + <string>Zocial.ttf</string>
  60 + </array>
42 <key>UILaunchStoryboardName</key> 61 <key>UILaunchStoryboardName</key>
43 <string>LaunchScreen</string> 62 <string>LaunchScreen</string>
44 <key>UIRequiredDeviceCapabilities</key> 63 <key>UIRequiredDeviceCapabilities</key>
@@ -294,6 +294,8 @@ PODS: @@ -294,6 +294,8 @@ PODS:
294 - React-cxxreact (= 0.62.1) 294 - React-cxxreact (= 0.62.1)
295 - React-jsi (= 0.62.1) 295 - React-jsi (= 0.62.1)
296 - ReactCommon/callinvoker (= 0.62.1) 296 - ReactCommon/callinvoker (= 0.62.1)
  297 + - ReactNativeDarkMode (0.2.2):
  298 + - React
297 - RNCMaskedView (0.1.7): 299 - RNCMaskedView (0.1.7):
298 - React 300 - React
299 - RNGestureHandler (1.6.1): 301 - RNGestureHandler (1.6.1):
@@ -342,6 +344,7 @@ DEPENDENCIES: @@ -342,6 +344,7 @@ DEPENDENCIES:
342 - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 344 - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
343 - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`) 345 - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
344 - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 346 - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
  347 + - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
345 - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" 348 - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
346 - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) 349 - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
347 - RNReanimated (from `../node_modules/react-native-reanimated`) 350 - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -415,6 +418,8 @@ EXTERNAL SOURCES: @@ -415,6 +418,8 @@ EXTERNAL SOURCES:
415 :path: "../node_modules/react-native/Libraries/Vibration" 418 :path: "../node_modules/react-native/Libraries/Vibration"
416 ReactCommon: 419 ReactCommon:
417 :path: "../node_modules/react-native/ReactCommon" 420 :path: "../node_modules/react-native/ReactCommon"
  421 + ReactNativeDarkMode:
  422 + :path: "../node_modules/react-native-dark-mode"
418 RNCMaskedView: 423 RNCMaskedView:
419 :path: "../node_modules/@react-native-community/masked-view" 424 :path: "../node_modules/@react-native-community/masked-view"
420 RNGestureHandler: 425 RNGestureHandler:
@@ -465,6 +470,7 @@ SPEC CHECKSUMS: @@ -465,6 +470,7 @@ SPEC CHECKSUMS:
465 React-RCTText: 239e040f401505001327a109f9188a4e6dad1bd2 470 React-RCTText: 239e040f401505001327a109f9188a4e6dad1bd2
466 React-RCTVibration: 072c3b427dd29e730c2ee5bfc509cf5054741a50 471 React-RCTVibration: 072c3b427dd29e730c2ee5bfc509cf5054741a50
467 ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d 472 ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d
  473 + ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
468 RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814 474 RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
469 RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 475 RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
470 RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48 476 RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 "@react-navigation/stack": "^5.2.9", 19 "@react-navigation/stack": "^5.2.9",
20 "react": "16.11.0", 20 "react": "16.11.0",
21 "react-native": "0.62.1", 21 "react-native": "0.62.1",
  22 + "react-native-dark-mode": "^0.2.2",
22 "react-native-elements": "^1.2.7", 23 "react-native-elements": "^1.2.7",
23 "react-native-gesture-handler": "^1.6.1", 24 "react-native-gesture-handler": "^1.6.1",
24 "react-native-reanimated": "^1.7.1", 25 "react-native-reanimated": "^1.7.1",
  1 +import React, { PropsWithChildren } from 'react';
  2 +import {
  3 + ViewProps,
  4 + View,
  5 + SafeAreaView,
  6 + FlatListProps,
  7 + FlatList,
  8 + SectionList,
  9 + SectionListProps,
  10 + ScrollViewProps,
  11 + ScrollView,
  12 +} from 'react-native';
  13 +import { colorPreset } from '../../design';
  14 +import {
  15 + DynamicStyleSheet,
  16 + useDynamicStyleSheet,
  17 +} from 'react-native-dark-mode';
  18 +
  19 +const dynamicStyles = new DynamicStyleSheet({
  20 + background: {
  21 + backgroundColor: colorPreset.groupedBackgroundColor.primary,
  22 + flex: 1,
  23 + },
  24 + whiteBackground: {
  25 + backgroundColor: colorPreset.backgroundColor.primary,
  26 + flex: 1,
  27 + },
  28 +});
  29 +
  30 +type BackgroundProps<Props> = PropsWithChildren<Props> & {
  31 + white?: boolean;
  32 +};
  33 +
  34 +export const BGView = ({
  35 + style,
  36 + white,
  37 + ...props
  38 +}: BackgroundProps<ViewProps>) => {
  39 + const styles = useDynamicStyleSheet(dynamicStyles);
  40 + return (
  41 + <View
  42 + style={[white ? styles.whiteBackground : styles.background, style]}
  43 + {...props}
  44 + />
  45 + );
  46 +};
  47 +
  48 +export const BGSafe = ({
  49 + style,
  50 + white,
  51 + ...props
  52 +}: BackgroundProps<ViewProps>) => {
  53 + const styles = useDynamicStyleSheet(dynamicStyles);
  54 + return (
  55 + <SafeAreaView
  56 + style={[white ? styles.whiteBackground : styles.background, style]}
  57 + {...props}
  58 + />
  59 + );
  60 +};
  61 +
  62 +export const BGScroll = ({
  63 + style,
  64 + white,
  65 + ...props
  66 +}: BackgroundProps<ScrollViewProps>) => {
  67 + const styles = useDynamicStyleSheet(dynamicStyles);
  68 + return (
  69 + <ScrollView
  70 + style={[white ? styles.whiteBackground : styles.background, style]}
  71 + contentInsetAdjustmentBehavior="automatic"
  72 + {...props}
  73 + />
  74 + );
  75 +};
  76 +
  77 +export const BGList = <T extends any>({
  78 + style,
  79 + white,
  80 + ...props
  81 +}: BackgroundProps<FlatListProps<T>>) => {
  82 + const styles = useDynamicStyleSheet(dynamicStyles);
  83 + return (
  84 + <FlatList
  85 + style={[white ? styles.whiteBackground : styles.background, style]}
  86 + contentInsetAdjustmentBehavior="automatic"
  87 + keyExtractor={(_, i) => i.toString()}
  88 + {...props}
  89 + />
  90 + );
  91 +};
  92 +
  93 +export const BGSection = <T extends any>({
  94 + style,
  95 + white,
  96 + ...props
  97 +}: BackgroundProps<SectionListProps<T>>) => {
  98 + const styles = useDynamicStyleSheet(dynamicStyles);
  99 + return (
  100 + <SectionList
  101 + style={[white ? styles.whiteBackground : styles.background, style]}
  102 + contentInsetAdjustmentBehavior="automatic"
  103 + keyExtractor={(_, i) => i.toString()}
  104 + {...props}
  105 + />
  106 + );
  107 +};
  1 +import React, { PropsWithChildren } from 'react';
  2 +import {
  3 + DynamicStyleSheet,
  4 + useDynamicStyleSheet,
  5 + useDarkMode,
  6 +} from 'react-native-dark-mode';
  7 +import { ViewProps, View, TouchableOpacity, ViewStyle } from 'react-native';
  8 +import { colorPreset } from '../../design';
  9 +
  10 +const dynamicStyles = new DynamicStyleSheet({
  11 + containerStyle: {
  12 + backgroundColor: colorPreset.groupedBackgroundColor.secondary,
  13 + margin: 16,
  14 + marginBottom: 8,
  15 + },
  16 + wrapperStyle: { minHeight: 44 },
  17 + shadowContainer: {
  18 + elevation: 5,
  19 + shadowColor: 'rgba(51,51,51,0.1)',
  20 + shadowOpacity: 1,
  21 + shadowOffset: {
  22 + width: 0,
  23 + height: 4,
  24 + },
  25 + shadowRadius: 16,
  26 + },
  27 + roundContainer: {
  28 + borderRadius: 8,
  29 + },
  30 + roundWrapper: {
  31 + borderRadius: 8,
  32 + overflow: 'hidden',
  33 + },
  34 +});
  35 +
  36 +export type CardProps = ViewProps & {
  37 + onPress?: () => void;
  38 + disabled?: boolean;
  39 + shadow?: boolean;
  40 + round?: boolean;
  41 + containerStyle?: ViewStyle;
  42 + wrapperStyle?: ViewStyle;
  43 +};
  44 +
  45 +export const Card = ({
  46 + style,
  47 + children,
  48 + onPress,
  49 + disabled,
  50 + shadow,
  51 + round,
  52 + containerStyle,
  53 + wrapperStyle,
  54 + ...props
  55 +}: PropsWithChildren<CardProps>) => {
  56 + const styles = useDynamicStyleSheet(dynamicStyles);
  57 + const inDarkMode = useDarkMode();
  58 + const InnerComponent: React.ComponentClass<any> = onPress
  59 + ? TouchableOpacity
  60 + : View;
  61 + return (
  62 + <View
  63 + style={[
  64 + styles.containerStyle,
  65 + shadow && !inDarkMode && styles.shadowContainer,
  66 + (round || shadow) && styles.roundContainer,
  67 + containerStyle,
  68 + ]}
  69 + {...props}
  70 + >
  71 + <InnerComponent
  72 + style={[
  73 + (round || shadow) && styles.roundWrapper,
  74 + styles.wrapperStyle,
  75 + wrapperStyle,
  76 + ]}
  77 + onPress={onPress}
  78 + disabled={disabled}
  79 + >
  80 + {children}
  81 + </InnerComponent>
  82 + </View>
  83 + );
  84 +};
  1 +export * from './list';
  2 +export * from './background';
  3 +export * from './card';
  1 +import React from 'react';
  2 +import { ListItem as RNEListItem, ListItemProps } from 'react-native-elements';
  3 +import {
  4 + DynamicStyleSheet,
  5 + useDynamicStyleSheet,
  6 +} from 'react-native-dark-mode';
  7 +import { colorPreset } from '../../design';
  8 +
  9 +const dynamicStyles = new DynamicStyleSheet({
  10 + containerStyle: {
  11 + backgroundColor: colorPreset.groupedBackgroundColor.secondary,
  12 + },
  13 + titleStyle: {
  14 + color: colorPreset.labelColor.primary,
  15 + },
  16 + subtitleStyle: {
  17 + color: colorPreset.labelColor.primary,
  18 + },
  19 + rightTitleStyle: {
  20 + color: colorPreset.labelColor.primary,
  21 + },
  22 + rightSubtitleStyle: {
  23 + color: colorPreset.labelColor.primary,
  24 + },
  25 +});
  26 +
  27 +export const ListItem = ({
  28 + containerStyle,
  29 + titleStyle,
  30 + subtitleStyle,
  31 + rightTitleStyle,
  32 + rightSubtitleStyle,
  33 + ...props
  34 +}: ListItemProps) => {
  35 + const styles = useDynamicStyleSheet(dynamicStyles);
  36 + return (
  37 + <RNEListItem
  38 + containerStyle={[styles.containerStyle, containerStyle]}
  39 + titleStyle={[styles.titleStyle, titleStyle]}
  40 + subtitleStyle={[styles.subtitleStyle, subtitleStyle]}
  41 + rightTitleStyle={[styles.rightTitleStyle, rightTitleStyle]}
  42 + rightSubtitleStyle={[styles.rightSubtitleStyle, rightSubtitleStyle]}
  43 + {...props}
  44 + />
  45 + );
  46 +};
  1 +import React, { ComponentType, ReactNode } from 'react';
  2 +
  3 +const renderNode = (
  4 + Component: ComponentType,
  5 + content: ReactNode,
  6 + defaultProps: any
  7 +) => {
  8 + if (content == null || content === false) {
  9 + return null;
  10 + }
  11 + if (React.isValidElement(content)) {
  12 + return content;
  13 + }
  14 + if (typeof content === 'function') {
  15 + return content();
  16 + }
  17 + // Just in case
  18 + if (content === true) {
  19 + return <Component {...defaultProps} />;
  20 + }
  21 + if (typeof content === 'string' || typeof content === 'number') {
  22 + return <Component {...defaultProps}>{content}</Component>;
  23 + }
  24 + return <Component {...defaultProps} {...content} />;
  25 +};
  26 +
  27 +export default renderNode;
  1 +import { DynamicValue } from 'react-native-dark-mode';
  2 +
  3 +export const labelColor = {
  4 + primary: new DynamicValue('#000000', '#FFFFFF'),
  5 + secondary: new DynamicValue('#3C3C4399', '#EBEBF599'),
  6 + tertiary: new DynamicValue('#3C3C434D', '#EBEBF54D'),
  7 + quaternary: new DynamicValue('#3C3C432E', '#EBEBF52E'),
  8 +};
  9 +
  10 +export const placeholderColor = new DynamicValue('#3C3C434D', '#EBEBF54D');
  11 +
  12 +export const linkColor = new DynamicValue('#007AFF', '#0984FF');
  13 +
  14 +export const separator = {
  15 + opaque: new DynamicValue('#C6C6C8', '#38383A'),
  16 + translucent: new DynamicValue('#3C3C434A', '#54545899'),
  17 +};
  18 +
  19 +export const fillColor = {
  20 + primary: new DynamicValue('#78788033', '#7878805C'),
  21 + secondary: new DynamicValue('#78788029', '#78788052'),
  22 + tertiary: new DynamicValue('#7676801F', '#7676803D'),
  23 + quaternary: new DynamicValue('#74748014', '#7676802E'),
  24 +};
  25 +
  26 +export const backgroundColor = {
  27 + primary: new DynamicValue('#FFFFFF', '#000000'),
  28 + secondary: new DynamicValue('#F2F2F7', '#1C1C1E'),
  29 + tertiary: new DynamicValue('#FFFFFF', '#2C2C2E'),
  30 +};
  31 +
  32 +export const groupedBackgroundColor = {
  33 + primary: new DynamicValue('#F2F2F7', '#000000'),
  34 + secondary: new DynamicValue('#FFFFFF', '#1C1C1E'),
  35 + tertiary: new DynamicValue('#F2F2F7', '#2C2C2E'),
  36 +};
  1 +import * as colorPreset from './color';
  2 +
  3 +export { colorPreset };
File mode changed
  1 +import React from 'react';
  2 +import { NavigationContainer } from '@react-navigation/native';
  3 +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  4 +import Fontisto from 'react-native-vector-icons/Fontisto';
  5 +import Ionicons from 'react-native-vector-icons/Ionicons';
  6 +import { MainTabParamList } from '../type/Navigation';
  7 +import WelcomePage from './WelcomePage';
  8 +import SystemInfo from './SystemInfo';
  9 +import DesignList from './DesignList';
  10 +import { useDynamicValue } from 'react-native-dark-mode';
  11 +import { colorPreset } from '../design';
  12 +
  13 +const MainTab = createBottomTabNavigator<MainTabParamList>();
  14 +
  15 +export default () => {
  16 + const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
  17 + const tintColor = useDynamicValue(colorPreset.linkColor);
  18 + const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
  19 + return (
  20 + <NavigationContainer>
  21 + <MainTab.Navigator
  22 + screenOptions={({ route }) => {
  23 + const routeName = route.name;
  24 + return {
  25 + tabBarIcon: ({ focused, size, color }) => {
  26 + switch (routeName) {
  27 + case 'WelcomePage':
  28 + return <Fontisto size={size} color={color} name={'react'} />;
  29 + case 'SystemInfo':
  30 + return (
  31 + <Ionicons
  32 + size={size}
  33 + color={color}
  34 + name={
  35 + focused
  36 + ? 'ios-information-circle'
  37 + : 'ios-information-circle-outline'
  38 + }
  39 + />
  40 + );
  41 + case 'DesignList':
  42 + return (
  43 + <Ionicons
  44 + size={size}
  45 + color={color}
  46 + name={'ios-color-palette'}
  47 + />
  48 + );
  49 + default:
  50 + break;
  51 + }
  52 + },
  53 + };
  54 + }}
  55 + tabBarOptions={{
  56 + activeTintColor: tintColor,
  57 + style: {
  58 + backgroundColor: backgroundColor,
  59 + borderTopColor: opaqueSeparator,
  60 + },
  61 + }}
  62 + >
  63 + <MainTab.Screen name="WelcomePage" component={WelcomePage} />
  64 + <MainTab.Screen name="SystemInfo" component={SystemInfo} />
  65 + <MainTab.Screen name="DesignList" component={DesignList} />
  66 + </MainTab.Navigator>
  67 + </NavigationContainer>
  68 + );
  69 +};
  1 +import React from 'react';
  2 +import { Text, View, StyleSheet } from 'react-native';
  3 +import { BGScroll } from '../component/View/background';
  4 +import { colorPreset } from '../design';
  5 +import {
  6 + useDynamicStyleSheet,
  7 + useDynamicValue,
  8 + DynamicStyleSheet,
  9 + useDarkMode,
  10 +} from 'react-native-dark-mode';
  11 +
  12 +const dynamicStyles = new DynamicStyleSheet({
  13 + primaryLabel: { color: colorPreset.labelColor.primary },
  14 + secondaryLabel: { color: colorPreset.labelColor.secondary },
  15 + tertiaryLabel: { color: colorPreset.labelColor.tertiary },
  16 + quaternaryLabel: { color: colorPreset.labelColor.quaternary },
  17 + central: { justifyContent: 'center', alignItems: 'center' },
  18 + primaryBG: {
  19 + backgroundColor: colorPreset.backgroundColor.primary,
  20 + borderWidth: StyleSheet.hairlineWidth,
  21 + borderColor: colorPreset.separator.opaque,
  22 + width: 240,
  23 + height: 100,
  24 + },
  25 + secondaryBG: {
  26 + backgroundColor: colorPreset.backgroundColor.secondary,
  27 + width: 200,
  28 + height: 80,
  29 + },
  30 + tertiaryBG: {
  31 + backgroundColor: colorPreset.backgroundColor.tertiary,
  32 + width: 160,
  33 + height: 60,
  34 + },
  35 + primaryGroupedBG: {
  36 + backgroundColor: colorPreset.groupedBackgroundColor.primary,
  37 + borderWidth: StyleSheet.hairlineWidth,
  38 + borderColor: colorPreset.separator.opaque,
  39 + width: 240,
  40 + height: 100,
  41 + },
  42 + secondaryGroupedBG: {
  43 + backgroundColor: colorPreset.groupedBackgroundColor.secondary,
  44 + width: 200,
  45 + height: 80,
  46 + },
  47 + tertiaryGroupedBG: {
  48 + backgroundColor: colorPreset.groupedBackgroundColor.tertiary,
  49 + width: 160,
  50 + height: 60,
  51 + },
  52 +});
  53 +
  54 +export default () => {
  55 + const styles = useDynamicStyleSheet(dynamicStyles);
  56 + const inDarkMode = useDarkMode();
  57 + return (
  58 + <BGScroll>
  59 + <Text style={styles.primaryLabel}>Primary Label</Text>
  60 + <Text style={styles.secondaryLabel}>Secondary Label</Text>
  61 + <Text style={styles.tertiaryLabel}>Tertiary Label</Text>
  62 + <Text style={styles.quaternaryLabel}>Quaternary Label</Text>
  63 + <View style={[styles.primaryBG, styles.central]}>
  64 + <View style={[styles.secondaryBG, styles.central]}>
  65 + <View style={[styles.tertiaryBG, styles.central]}>
  66 + <Text style={styles.primaryLabel}>Background</Text>
  67 + </View>
  68 + </View>
  69 + </View>
  70 + <View style={[styles.primaryGroupedBG, styles.central]}>
  71 + <View style={[styles.secondaryGroupedBG, styles.central]}>
  72 + <View style={[styles.tertiaryGroupedBG, styles.central]}>
  73 + <Text style={styles.primaryLabel}>
  74 + {'Grouped Background' +
  75 + (inDarkMode ? ', same as background in dark mode' : '')}
  76 + </Text>
  77 + </View>
  78 + </View>
  79 + </View>
  80 + </BGScroll>
  81 + );
  82 +};
  1 +import React from 'react';
  2 +import { useWindowDimensions } from 'react-native';
  3 +import { ListItem, BGScroll, Card } from '../component/View';
  4 +
  5 +export default () => {
  6 + const { width, height, fontScale, scale } = useWindowDimensions();
  7 + return (
  8 + <BGScroll white>
  9 + <Card shadow>
  10 + <ListItem
  11 + title={'width'}
  12 + rightTitle={`${width}pt`}
  13 + rightSubtitle={`${width * scale}px`}
  14 + />
  15 + <ListItem
  16 + title={'height'}
  17 + rightTitle={`${height}pt`}
  18 + rightSubtitle={`${height * scale}px`}
  19 + />
  20 + <ListItem title={'fontScale'} rightTitle={fontScale.toString()} />
  21 + <ListItem title={'scale'} rightTitle={scale.toString()} />
  22 + </Card>
  23 + </BGScroll>
  24 + );
  25 +};
  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 +export type MainTabParamList = {
  2 + WelcomePage: undefined;
  3 + SystemInfo: undefined;
  4 + DesignList: undefined;
  5 +};
  1 +declare type NVPair<V = string> = { name: string; value: V };
@@ -1239,6 +1239,11 @@ @@ -1239,6 +1239,11 @@
1239 resolved "https://registry.npm.taobao.org/@types/eslint-visitor-keys/download/@types/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" 1239 resolved "https://registry.npm.taobao.org/@types/eslint-visitor-keys/download/@types/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
1240 integrity sha1-HuMNeVRMqE1o1LPNsK9PIFZj3S0= 1240 integrity sha1-HuMNeVRMqE1o1LPNsK9PIFZj3S0=
1241 1241
  1242 +"@types/events@*":
  1243 + version "3.0.0"
  1244 + resolved "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
  1245 + integrity sha1-KGLz9Yqaf3w+eNefEw3U1xwlwqc=
  1246 +
1242 "@types/hammerjs@^2.0.36": 1247 "@types/hammerjs@^2.0.36":
1243 version "2.0.36" 1248 version "2.0.36"
1244 resolved "https://registry.npm.taobao.org/@types/hammerjs/download/@types/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c" 1249 resolved "https://registry.npm.taobao.org/@types/hammerjs/download/@types/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
@@ -3223,6 +3228,11 @@ eventemitter3@^3.0.0: @@ -3223,6 +3228,11 @@ eventemitter3@^3.0.0:
3223 resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" 3228 resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
3224 integrity sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc= 3229 integrity sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=
3225 3230
  3231 +events@^3.0.0:
  3232 + version "3.1.0"
  3233 + resolved "https://registry.npm.taobao.org/events/download/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
  3234 + integrity sha1-hCea8bNMt1qoi/X/KR9tC9mzGlk=
  3235 +
3226 exec-sh@^0.3.2: 3236 exec-sh@^0.3.2:
3227 version "0.3.4" 3237 version "0.3.4"
3228 resolved "https://registry.npm.taobao.org/exec-sh/download/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5" 3238 resolved "https://registry.npm.taobao.org/exec-sh/download/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
@@ -6575,6 +6585,17 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react- @@ -6575,6 +6585,17 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-
6575 resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" 6585 resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
6576 integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ= 6586 integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
6577 6587
  6588 +react-native-dark-mode@^0.2.2:
  6589 + version "0.2.2"
  6590 + resolved "https://registry.npm.taobao.org/react-native-dark-mode/download/react-native-dark-mode-0.2.2.tgz#4faa335e36330bfca832ba8b3d2bd84c7b880381"
  6591 + integrity sha1-T6ozXjYzC/yoMrqLPSvYTHuIA4E=
  6592 + dependencies:
  6593 + "@types/events" "*"
  6594 + "@types/react" "*"
  6595 + "@types/react-native" "*"
  6596 + events "^3.0.0"
  6597 + toolkit.ts "^0.0.2"
  6598 +
6578 react-native-elements@^1.2.7: 6599 react-native-elements@^1.2.7:
6579 version "1.2.7" 6600 version "1.2.7"
6580 resolved "https://registry.npm.taobao.org/react-native-elements/download/react-native-elements-1.2.7.tgz#1eca2db715c41722aeb67aea62bd2a4621adb134" 6601 resolved "https://registry.npm.taobao.org/react-native-elements/download/react-native-elements-1.2.7.tgz#1eca2db715c41722aeb67aea62bd2a4621adb134"
@@ -7915,6 +7936,11 @@ toidentifier@1.0.0: @@ -7915,6 +7936,11 @@ toidentifier@1.0.0:
7915 resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" 7936 resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
7916 integrity sha1-fhvjRw8ed5SLxD2Uo8j013UrpVM= 7937 integrity sha1-fhvjRw8ed5SLxD2Uo8j013UrpVM=
7917 7938
  7939 +toolkit.ts@^0.0.2:
  7940 + version "0.0.2"
  7941 + resolved "https://registry.npm.taobao.org/toolkit.ts/download/toolkit.ts-0.0.2.tgz#91bde730e5e6ad1a22146cdaf83f4a52721cf3b2"
  7942 + integrity sha1-kb3nMOXmrRoiFGza+D9KUnIc87I=
  7943 +
7918 tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0: 7944 tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
7919 version "2.5.0" 7945 version "2.5.0"
7920 resolved "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1584646121003&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" 7946 resolved "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1584646121003&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"