summaryrefslogtreecommitdiff
path: root/app_expo/screens/demo/demo-screen.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-07-23 15:24:35 +0200
committerThomas F. K. Jorna <[email protected]>2021-07-23 15:24:35 +0200
commit356381d14cb1ff3cbd39c7e396dd14379336451b (patch)
treea03e9b2534600bde7b3b781411b5b03f8134904b /app_expo/screens/demo/demo-screen.tsx
parent7aa007f158a52b41494049a1202938fc97813ec1 (diff)
parent73308af061af5e17ac7d4a73fa027a2f303c70dd (diff)
resolving merge conflicts
Diffstat (limited to 'app_expo/screens/demo/demo-screen.tsx')
-rw-r--r--app_expo/screens/demo/demo-screen.tsx180
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>
- )
-})