summaryrefslogtreecommitdiff
path: root/app_expo/screens/demo
diff options
context:
space:
mode:
Diffstat (limited to 'app_expo/screens/demo')
-rw-r--r--app_expo/screens/demo/demo-list-screen.tsx86
-rw-r--r--app_expo/screens/demo/demo-screen.tsx180
-rw-r--r--app_expo/screens/demo/heart.pngbin0 -> 204 bytes
-rw-r--r--app_expo/screens/demo/[email protected]bin0 -> 377 bytes
-rw-r--r--app_expo/screens/demo/logo-ignite.pngbin0 -> 9427 bytes
-rw-r--r--app_expo/screens/demo/[email protected]bin0 -> 20283 bytes
6 files changed, 266 insertions, 0 deletions
diff --git a/app_expo/screens/demo/demo-list-screen.tsx b/app_expo/screens/demo/demo-list-screen.tsx
new file mode 100644
index 0000000..9164ccb
--- /dev/null
+++ b/app_expo/screens/demo/demo-list-screen.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react'
+import { FlatList, TextStyle, View, ViewStyle, ImageStyle } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { observer } from 'mobx-react-lite'
+import { Header, Screen, Text, Wallpaper, AutoImage as Image } from '../../components'
+import { color, spacing } from '../../theme'
+import { useStores } from '../../models'
+
+const FULL: ViewStyle = {
+ flex: 1,
+}
+const CONTAINER: ViewStyle = {
+ backgroundColor: color.transparent,
+}
+const HEADER: TextStyle = {
+ paddingBottom: spacing[5] - 1,
+ paddingHorizontal: spacing[4],
+ paddingTop: spacing[3],
+}
+const HEADER_TITLE: TextStyle = {
+ fontSize: 12,
+ fontWeight: 'bold',
+ letterSpacing: 1.5,
+ lineHeight: 15,
+ textAlign: 'center',
+}
+const LIST_CONTAINER: ViewStyle = {
+ alignItems: 'center',
+ flexDirection: 'row',
+ padding: 10,
+}
+const IMAGE: ImageStyle = {
+ borderRadius: 35,
+ height: 65,
+ width: 65,
+}
+const LIST_TEXT: TextStyle = {
+ marginLeft: 10,
+}
+const FLAT_LIST: ViewStyle = {
+ paddingHorizontal: spacing[4],
+}
+
+export const DemoListScreen = observer(function DemoListScreen() {
+ const navigation = useNavigation()
+ const goBack = () => navigation.goBack()
+
+ const { characterStore } = useStores()
+ const { characters } = characterStore
+
+ useEffect(() => {
+ async function fetchData() {
+ await characterStore.getCharacters()
+ }
+
+ fetchData()
+ }, [])
+
+ return (
+ <View testID="DemoListScreen" style={FULL}>
+ <Wallpaper />
+ <Screen style={CONTAINER} preset="fixed" backgroundColor={color.transparent}>
+ <Header
+ headerTx="demoListScreen.title"
+ leftIcon="back"
+ onLeftPress={goBack}
+ style={HEADER}
+ titleStyle={HEADER_TITLE}
+ />
+ <FlatList
+ contentContainerStyle={FLAT_LIST}
+ data={[...characters]}
+ keyExtractor={(item) => String(item.id)}
+ renderItem={({ item }) => (
+ <View style={LIST_CONTAINER}>
+ <Image source={{ uri: item.image }} style={IMAGE} />
+ <Text style={LIST_TEXT}>
+ {item.name} ({item.status})
+ </Text>
+ </View>
+ )}
+ />
+ </Screen>
+ </View>
+ )
+})
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>
+ )
+})
diff --git a/app_expo/screens/demo/heart.png b/app_expo/screens/demo/heart.png
new file mode 100644
index 0000000..9890998
--- /dev/null
+++ b/app_expo/screens/demo/heart.png
Binary files differ
diff --git a/app_expo/screens/demo/[email protected] b/app_expo/screens/demo/[email protected]
new file mode 100644
index 0000000..e8b70d9
--- /dev/null
+++ b/app_expo/screens/demo/[email protected]
Binary files differ
diff --git a/app_expo/screens/demo/logo-ignite.png b/app_expo/screens/demo/logo-ignite.png
new file mode 100644
index 0000000..36af16d
--- /dev/null
+++ b/app_expo/screens/demo/logo-ignite.png
Binary files differ
diff --git a/app_expo/screens/demo/[email protected] b/app_expo/screens/demo/[email protected]
new file mode 100644
index 0000000..fdbfad8
--- /dev/null
+++ b/app_expo/screens/demo/[email protected]
Binary files differ