diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-23 15:24:35 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-23 15:24:35 +0200 |
commit | 356381d14cb1ff3cbd39c7e396dd14379336451b (patch) | |
tree | a03e9b2534600bde7b3b781411b5b03f8134904b /app_expo/screens/demo/demo-screen.tsx | |
parent | 7aa007f158a52b41494049a1202938fc97813ec1 (diff) | |
parent | 73308af061af5e17ac7d4a73fa027a2f303c70dd (diff) |
resolving merge conflicts
Diffstat (limited to 'app_expo/screens/demo/demo-screen.tsx')
-rw-r--r-- | app_expo/screens/demo/demo-screen.tsx | 180 |
1 files changed, 0 insertions, 180 deletions
diff --git a/app_expo/screens/demo/demo-screen.tsx b/app_expo/screens/demo/demo-screen.tsx deleted file mode 100644 index a387c01..0000000 --- a/app_expo/screens/demo/demo-screen.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import React from 'react' -import { ImageStyle, Platform, TextStyle, View, ViewStyle } from 'react-native' -import { useNavigation } from '@react-navigation/native' -import { observer } from 'mobx-react-lite' -import { - BulletItem, - Button, - Header, - Text, - Screen, - Wallpaper, - AutoImage as Image, -} from '../../components' -import { color, spacing } from '../../theme' -import { Api } from '../../services/api' -import { save } from '../../utils/storage' -export const logoIgnite = require('./logo-ignite.png') -export const heart = require('./heart.png') - -const FULL: ViewStyle = { flex: 1 } -const CONTAINER: ViewStyle = { - backgroundColor: color.transparent, - paddingHorizontal: spacing[4], -} -const DEMO: ViewStyle = { - paddingVertical: spacing[4], - paddingHorizontal: spacing[4], - backgroundColor: color.palette.deepPurple, -} -const BOLD: TextStyle = { fontWeight: 'bold' } -const DEMO_TEXT: TextStyle = { - ...BOLD, - fontSize: 13, - letterSpacing: 2, -} -const HEADER: TextStyle = { - paddingTop: spacing[3], - paddingBottom: spacing[5] - 1, - paddingHorizontal: 0, -} -const HEADER_TITLE: TextStyle = { - ...BOLD, - fontSize: 12, - lineHeight: 15, - textAlign: 'center', - letterSpacing: 1.5, -} -const TITLE: TextStyle = { - ...BOLD, - fontSize: 28, - lineHeight: 38, - textAlign: 'center', - marginBottom: spacing[5], -} -const TAGLINE: TextStyle = { - color: '#BAB6C8', - fontSize: 15, - lineHeight: 22, - marginBottom: spacing[4] + spacing[1], -} -const IGNITE: ImageStyle = { - marginVertical: spacing[6], - alignSelf: 'center', - width: 180, - height: 100, -} -const LOVE_WRAPPER: ViewStyle = { - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'center', -} -const LOVE: TextStyle = { - color: '#BAB6C8', - fontSize: 15, - lineHeight: 22, -} -const HEART: ImageStyle = { - marginHorizontal: spacing[2], - width: 10, - height: 10, - resizeMode: 'contain', -} -const HINT: TextStyle = { - color: '#BAB6C8', - fontSize: 12, - lineHeight: 15, - marginVertical: spacing[2], -} - -const platformCommand = Platform.select({ - ios: 'Cmd + D', - android: 'Cmd/Ctrl + M', -}) - -export const DemoScreen = observer(function DemoScreen() { - const navigation = useNavigation() - const goBack = () => navigation.goBack() - - const demoReactotron = React.useMemo( - () => async () => { - console.tron.log('Your Friendly tron log message') - console.tron.logImportant('I am important') - console.tron.display({ - name: 'DISPLAY', - value: { - numbers: 1, - strings: 'strings', - booleans: true, - arrays: [1, 2, 3], - objects: { - deeper: { - deeper: { - yay: '👾', - }, - }, - }, - functionNames: function hello() { - /* dummy function */ - }, - }, - preview: 'More control with display()', - important: true, - image: { - uri: 'https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4', - }, - }) - // make an API call for the demo - // Don't do API like this, use store's API - const demo = new Api() - demo.setup() - demo.getUser('1') - // Let's do some async storage stuff - await save('Cool Name', 'Boaty McBoatface') - }, - [], - ) - - return ( - <View testID="DemoScreen" style={FULL}> - <Wallpaper /> - <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}> - <Header - headerTx="demoScreen.howTo" - leftIcon="back" - onLeftPress={goBack} - style={HEADER} - titleStyle={HEADER_TITLE} - /> - <Text style={TITLE} preset="header" tx="demoScreen.title" /> - <Text style={TAGLINE} tx="demoScreen.tagLine" /> - <BulletItem text="Integrated here, Navigation with State, TypeScript, Storybook, Solidarity, and i18n." /> - <BulletItem - text={`To run Storybook, press ${platformCommand} or shake the device to show the developer menu, then select "Toggle Storybook"`} - /> - <BulletItem text="Load up Reactotron! You can inspect your app, view the events, interact, and so much more!" /> - <View> - <Button - style={DEMO} - textStyle={DEMO_TEXT} - tx="demoScreen.reactotron" - onPress={demoReactotron} - /> - <Text style={HINT} tx={`demoScreen.${Platform.OS}ReactotronHint` as const} /> - </View> - <Button - style={DEMO} - textStyle={DEMO_TEXT} - tx="demoScreen.demoList" - onPress={() => navigation.navigate('demoList')} - /> - <Image source={logoIgnite} style={IGNITE} /> - <View style={LOVE_WRAPPER}> - <Text style={LOVE} text="Made with" /> - <Image source={heart} style={HEART} /> - <Text style={LOVE} text="by Infinite Red" /> - </View> - </Screen> - </View> - ) -}) |