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 @@
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
declare var global: { HermesInternal: null | {} };
import { DarkModeProvider } from 'react-native-dark-mode';
import AppNavigationContainer from './src/screen/AppNavigationContainer';
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}
>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.tsx</Text> to change
this screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
<DarkModeProvider>
<AppNavigationContainer />
</DarkModeProvider>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
... ...
... ... @@ -83,7 +83,7 @@ project.ext.react = [
]
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
... ...
... ... @@ -194,7 +194,6 @@
698938961D6FF8AC4FCF2E29 /* Pods-NGPlay-tvOSTests.debug.xcconfig */,
B9229FB3695E83651E4D11D5 /* Pods-NGPlay-tvOSTests.release.xcconfig */,
);
name = Pods;
path = Pods;
sourceTree = "<group>";
};
... ... @@ -294,6 +293,7 @@
TestTargetID = 13B07F861A680F5B00A75B9A;
};
13B07F861A680F5B00A75B9A = {
DevelopmentTeam = ZCZ85Z8LUT;
LastSwiftMigration = 1120;
};
2D02E47A1E0B4A5D006451C7 = {
... ... @@ -543,7 +543,7 @@
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
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";
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";
showEnvVarsInLog = 0;
};
FD10A7F122414F3F0027D42C /* Start Packager */ = {
... ... @@ -728,6 +728,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = ZCZ85Z8LUT;
ENABLE_BITCODE = NO;
GCC_PREPROCESSOR_DEFINITIONS = (
"$(inherited)",
... ... @@ -755,6 +756,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = ZCZ85Z8LUT;
INFOPLIST_FILE = NGPlay/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = (
... ...
... ... @@ -39,6 +39,25 @@
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Fontisto.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
... ...
... ... @@ -294,6 +294,8 @@ PODS:
- React-cxxreact (= 0.62.1)
- React-jsi (= 0.62.1)
- ReactCommon/callinvoker (= 0.62.1)
- ReactNativeDarkMode (0.2.2):
- React
- RNCMaskedView (0.1.7):
- React
- RNGestureHandler (1.6.1):
... ... @@ -342,6 +344,7 @@ DEPENDENCIES:
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
- ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
... ... @@ -415,6 +418,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/Libraries/Vibration"
ReactCommon:
:path: "../node_modules/react-native/ReactCommon"
ReactNativeDarkMode:
:path: "../node_modules/react-native-dark-mode"
RNCMaskedView:
:path: "../node_modules/@react-native-community/masked-view"
RNGestureHandler:
... ... @@ -465,6 +470,7 @@ SPEC CHECKSUMS:
React-RCTText: 239e040f401505001327a109f9188a4e6dad1bd2
React-RCTVibration: 072c3b427dd29e730c2ee5bfc509cf5054741a50
ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d
ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
... ...
... ... @@ -19,6 +19,7 @@
"@react-navigation/stack": "^5.2.9",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-dark-mode": "^0.2.2",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.7.1",
... ...
import React, { PropsWithChildren } from 'react';
import {
ViewProps,
View,
SafeAreaView,
FlatListProps,
FlatList,
SectionList,
SectionListProps,
ScrollViewProps,
ScrollView,
} from 'react-native';
import { colorPreset } from '../../design';
import {
DynamicStyleSheet,
useDynamicStyleSheet,
} from 'react-native-dark-mode';
const dynamicStyles = new DynamicStyleSheet({
background: {
backgroundColor: colorPreset.groupedBackgroundColor.primary,
flex: 1,
},
whiteBackground: {
backgroundColor: colorPreset.backgroundColor.primary,
flex: 1,
},
});
type BackgroundProps<Props> = PropsWithChildren<Props> & {
white?: boolean;
};
export const BGView = ({
style,
white,
...props
}: BackgroundProps<ViewProps>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<View
style={[white ? styles.whiteBackground : styles.background, style]}
{...props}
/>
);
};
export const BGSafe = ({
style,
white,
...props
}: BackgroundProps<ViewProps>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<SafeAreaView
style={[white ? styles.whiteBackground : styles.background, style]}
{...props}
/>
);
};
export const BGScroll = ({
style,
white,
...props
}: BackgroundProps<ScrollViewProps>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<ScrollView
style={[white ? styles.whiteBackground : styles.background, style]}
contentInsetAdjustmentBehavior="automatic"
{...props}
/>
);
};
export const BGList = <T extends any>({
style,
white,
...props
}: BackgroundProps<FlatListProps<T>>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<FlatList
style={[white ? styles.whiteBackground : styles.background, style]}
contentInsetAdjustmentBehavior="automatic"
keyExtractor={(_, i) => i.toString()}
{...props}
/>
);
};
export const BGSection = <T extends any>({
style,
white,
...props
}: BackgroundProps<SectionListProps<T>>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<SectionList
style={[white ? styles.whiteBackground : styles.background, style]}
contentInsetAdjustmentBehavior="automatic"
keyExtractor={(_, i) => i.toString()}
{...props}
/>
);
};
... ...
import React, { PropsWithChildren } from 'react';
import {
DynamicStyleSheet,
useDynamicStyleSheet,
useDarkMode,
} from 'react-native-dark-mode';
import { ViewProps, View, TouchableOpacity, ViewStyle } from 'react-native';
import { colorPreset } from '../../design';
const dynamicStyles = new DynamicStyleSheet({
containerStyle: {
backgroundColor: colorPreset.groupedBackgroundColor.secondary,
margin: 16,
marginBottom: 8,
},
wrapperStyle: { minHeight: 44 },
shadowContainer: {
elevation: 5,
shadowColor: 'rgba(51,51,51,0.1)',
shadowOpacity: 1,
shadowOffset: {
width: 0,
height: 4,
},
shadowRadius: 16,
},
roundContainer: {
borderRadius: 8,
},
roundWrapper: {
borderRadius: 8,
overflow: 'hidden',
},
});
export type CardProps = ViewProps & {
onPress?: () => void;
disabled?: boolean;
shadow?: boolean;
round?: boolean;
containerStyle?: ViewStyle;
wrapperStyle?: ViewStyle;
};
export const Card = ({
style,
children,
onPress,
disabled,
shadow,
round,
containerStyle,
wrapperStyle,
...props
}: PropsWithChildren<CardProps>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
const inDarkMode = useDarkMode();
const InnerComponent: React.ComponentClass<any> = onPress
? TouchableOpacity
: View;
return (
<View
style={[
styles.containerStyle,
shadow && !inDarkMode && styles.shadowContainer,
(round || shadow) && styles.roundContainer,
containerStyle,
]}
{...props}
>
<InnerComponent
style={[
(round || shadow) && styles.roundWrapper,
styles.wrapperStyle,
wrapperStyle,
]}
onPress={onPress}
disabled={disabled}
>
{children}
</InnerComponent>
</View>
);
};
... ...
export * from './list';
export * from './background';
export * from './card';
... ...
import React from 'react';
import { ListItem as RNEListItem, ListItemProps } from 'react-native-elements';
import {
DynamicStyleSheet,
useDynamicStyleSheet,
} from 'react-native-dark-mode';
import { colorPreset } from '../../design';
const dynamicStyles = new DynamicStyleSheet({
containerStyle: {
backgroundColor: colorPreset.groupedBackgroundColor.secondary,
},
titleStyle: {
color: colorPreset.labelColor.primary,
},
subtitleStyle: {
color: colorPreset.labelColor.primary,
},
rightTitleStyle: {
color: colorPreset.labelColor.primary,
},
rightSubtitleStyle: {
color: colorPreset.labelColor.primary,
},
});
export const ListItem = ({
containerStyle,
titleStyle,
subtitleStyle,
rightTitleStyle,
rightSubtitleStyle,
...props
}: ListItemProps) => {
const styles = useDynamicStyleSheet(dynamicStyles);
return (
<RNEListItem
containerStyle={[styles.containerStyle, containerStyle]}
titleStyle={[styles.titleStyle, titleStyle]}
subtitleStyle={[styles.subtitleStyle, subtitleStyle]}
rightTitleStyle={[styles.rightTitleStyle, rightTitleStyle]}
rightSubtitleStyle={[styles.rightSubtitleStyle, rightSubtitleStyle]}
{...props}
/>
);
};
... ...
import React, { ComponentType, ReactNode } from 'react';
const renderNode = (
Component: ComponentType,
content: ReactNode,
defaultProps: any
) => {
if (content == null || content === false) {
return null;
}
if (React.isValidElement(content)) {
return content;
}
if (typeof content === 'function') {
return content();
}
// Just in case
if (content === true) {
return <Component {...defaultProps} />;
}
if (typeof content === 'string' || typeof content === 'number') {
return <Component {...defaultProps}>{content}</Component>;
}
return <Component {...defaultProps} {...content} />;
};
export default renderNode;
... ...
import { DynamicValue } from 'react-native-dark-mode';
export const labelColor = {
primary: new DynamicValue('#000000', '#FFFFFF'),
secondary: new DynamicValue('#3C3C4399', '#EBEBF599'),
tertiary: new DynamicValue('#3C3C434D', '#EBEBF54D'),
quaternary: new DynamicValue('#3C3C432E', '#EBEBF52E'),
};
export const placeholderColor = new DynamicValue('#3C3C434D', '#EBEBF54D');
export const linkColor = new DynamicValue('#007AFF', '#0984FF');
export const separator = {
opaque: new DynamicValue('#C6C6C8', '#38383A'),
translucent: new DynamicValue('#3C3C434A', '#54545899'),
};
export const fillColor = {
primary: new DynamicValue('#78788033', '#7878805C'),
secondary: new DynamicValue('#78788029', '#78788052'),
tertiary: new DynamicValue('#7676801F', '#7676803D'),
quaternary: new DynamicValue('#74748014', '#7676802E'),
};
export const backgroundColor = {
primary: new DynamicValue('#FFFFFF', '#000000'),
secondary: new DynamicValue('#F2F2F7', '#1C1C1E'),
tertiary: new DynamicValue('#FFFFFF', '#2C2C2E'),
};
export const groupedBackgroundColor = {
primary: new DynamicValue('#F2F2F7', '#000000'),
secondary: new DynamicValue('#FFFFFF', '#1C1C1E'),
tertiary: new DynamicValue('#F2F2F7', '#2C2C2E'),
};
... ...
import * as colorPreset from './color';
export { colorPreset };
... ...
File mode changed
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Fontisto from 'react-native-vector-icons/Fontisto';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { MainTabParamList } from '../type/Navigation';
import WelcomePage from './WelcomePage';
import SystemInfo from './SystemInfo';
import DesignList from './DesignList';
import { useDynamicValue } from 'react-native-dark-mode';
import { colorPreset } from '../design';
const MainTab = createBottomTabNavigator<MainTabParamList>();
export default () => {
const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
const tintColor = useDynamicValue(colorPreset.linkColor);
const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
return (
<NavigationContainer>
<MainTab.Navigator
screenOptions={({ route }) => {
const routeName = route.name;
return {
tabBarIcon: ({ focused, size, color }) => {
switch (routeName) {
case 'WelcomePage':
return <Fontisto size={size} color={color} name={'react'} />;
case 'SystemInfo':
return (
<Ionicons
size={size}
color={color}
name={
focused
? 'ios-information-circle'
: 'ios-information-circle-outline'
}
/>
);
case 'DesignList':
return (
<Ionicons
size={size}
color={color}
name={'ios-color-palette'}
/>
);
default:
break;
}
},
};
}}
tabBarOptions={{
activeTintColor: tintColor,
style: {
backgroundColor: backgroundColor,
borderTopColor: opaqueSeparator,
},
}}
>
<MainTab.Screen name="WelcomePage" component={WelcomePage} />
<MainTab.Screen name="SystemInfo" component={SystemInfo} />
<MainTab.Screen name="DesignList" component={DesignList} />
</MainTab.Navigator>
</NavigationContainer>
);
};
... ...
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { BGScroll } from '../component/View/background';
import { colorPreset } from '../design';
import {
useDynamicStyleSheet,
useDynamicValue,
DynamicStyleSheet,
useDarkMode,
} from 'react-native-dark-mode';
const dynamicStyles = new DynamicStyleSheet({
primaryLabel: { color: colorPreset.labelColor.primary },
secondaryLabel: { color: colorPreset.labelColor.secondary },
tertiaryLabel: { color: colorPreset.labelColor.tertiary },
quaternaryLabel: { color: colorPreset.labelColor.quaternary },
central: { justifyContent: 'center', alignItems: 'center' },
primaryBG: {
backgroundColor: colorPreset.backgroundColor.primary,
borderWidth: StyleSheet.hairlineWidth,
borderColor: colorPreset.separator.opaque,
width: 240,
height: 100,
},
secondaryBG: {
backgroundColor: colorPreset.backgroundColor.secondary,
width: 200,
height: 80,
},
tertiaryBG: {
backgroundColor: colorPreset.backgroundColor.tertiary,
width: 160,
height: 60,
},
primaryGroupedBG: {
backgroundColor: colorPreset.groupedBackgroundColor.primary,
borderWidth: StyleSheet.hairlineWidth,
borderColor: colorPreset.separator.opaque,
width: 240,
height: 100,
},
secondaryGroupedBG: {
backgroundColor: colorPreset.groupedBackgroundColor.secondary,
width: 200,
height: 80,
},
tertiaryGroupedBG: {
backgroundColor: colorPreset.groupedBackgroundColor.tertiary,
width: 160,
height: 60,
},
});
export default () => {
const styles = useDynamicStyleSheet(dynamicStyles);
const inDarkMode = useDarkMode();
return (
<BGScroll>
<Text style={styles.primaryLabel}>Primary Label</Text>
<Text style={styles.secondaryLabel}>Secondary Label</Text>
<Text style={styles.tertiaryLabel}>Tertiary Label</Text>
<Text style={styles.quaternaryLabel}>Quaternary Label</Text>
<View style={[styles.primaryBG, styles.central]}>
<View style={[styles.secondaryBG, styles.central]}>
<View style={[styles.tertiaryBG, styles.central]}>
<Text style={styles.primaryLabel}>Background</Text>
</View>
</View>
</View>
<View style={[styles.primaryGroupedBG, styles.central]}>
<View style={[styles.secondaryGroupedBG, styles.central]}>
<View style={[styles.tertiaryGroupedBG, styles.central]}>
<Text style={styles.primaryLabel}>
{'Grouped Background' +
(inDarkMode ? ', same as background in dark mode' : '')}
</Text>
</View>
</View>
</View>
</BGScroll>
);
};
... ...
import React from 'react';
import { useWindowDimensions } from 'react-native';
import { ListItem, BGScroll, Card } from '../component/View';
export default () => {
const { width, height, fontScale, scale } = useWindowDimensions();
return (
<BGScroll white>
<Card shadow>
<ListItem
title={'width'}
rightTitle={`${width}pt`}
rightSubtitle={`${width * scale}px`}
/>
<ListItem
title={'height'}
rightTitle={`${height}pt`}
rightSubtitle={`${height * scale}px`}
/>
<ListItem title={'fontScale'} rightTitle={fontScale.toString()} />
<ListItem title={'scale'} rightTitle={scale.toString()} />
</Card>
</BGScroll>
);
};
... ...
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
declare var global: { HermesInternal: null | {} };
const WelcomePage = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}
>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.tsx</Text> to change
this screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default WelcomePage;
... ...
export type MainTabParamList = {
WelcomePage: undefined;
SystemInfo: undefined;
DesignList: undefined;
};
... ...
declare type NVPair<V = string> = { name: string; value: V };
... ...
... ... @@ -1239,6 +1239,11 @@
resolved "https://registry.npm.taobao.org/@types/eslint-visitor-keys/download/@types/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
integrity sha1-HuMNeVRMqE1o1LPNsK9PIFZj3S0=
"@types/events@*":
version "3.0.0"
resolved "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
integrity sha1-KGLz9Yqaf3w+eNefEw3U1xwlwqc=
"@types/hammerjs@^2.0.36":
version "2.0.36"
resolved "https://registry.npm.taobao.org/@types/hammerjs/download/@types/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
... ... @@ -3223,6 +3228,11 @@ eventemitter3@^3.0.0:
resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
integrity sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=
events@^3.0.0:
version "3.1.0"
resolved "https://registry.npm.taobao.org/events/download/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
integrity sha1-hCea8bNMt1qoi/X/KR9tC9mzGlk=
exec-sh@^0.3.2:
version "0.3.4"
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-
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
react-native-dark-mode@^0.2.2:
version "0.2.2"
resolved "https://registry.npm.taobao.org/react-native-dark-mode/download/react-native-dark-mode-0.2.2.tgz#4faa335e36330bfca832ba8b3d2bd84c7b880381"
integrity sha1-T6ozXjYzC/yoMrqLPSvYTHuIA4E=
dependencies:
"@types/events" "*"
"@types/react" "*"
"@types/react-native" "*"
events "^3.0.0"
toolkit.ts "^0.0.2"
react-native-elements@^1.2.7:
version "1.2.7"
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:
resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
integrity sha1-fhvjRw8ed5SLxD2Uo8j013UrpVM=
toolkit.ts@^0.0.2:
version "0.0.2"
resolved "https://registry.npm.taobao.org/toolkit.ts/download/toolkit.ts-0.0.2.tgz#91bde730e5e6ad1a22146cdaf83f4a52721cf3b2"
integrity sha1-kb3nMOXmrRoiFGza+D9KUnIc87I=
tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
version "2.5.0"
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"
... ...