summaryrefslogtreecommitdiff
path: root/app_expo/screens/demo/demo-screen.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'app_expo/screens/demo/demo-screen.tsx')
-rw-r--r--app_expo/screens/demo/demo-screen.tsx180
1 files changed, 180 insertions, 0 deletions
diff --git a/app_expo/screens/demo/demo-screen.tsx b/app_expo/screens/demo/demo-screen.tsx
new file mode 100644
index 0000000..a387c01
--- /dev/null
+++ b/app_expo/screens/demo/demo-screen.tsx
@@ -0,0 +1,180 @@
+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>
+ )
+})