summaryrefslogtreecommitdiff
path: root/app/screens/demo
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-07-14 15:10:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-07-14 15:10:31 +0200
commite5021187e96b78b53203bd95d08d6818aea47d17 (patch)
tree37ec45d00eb963db53cd4bb4f04a770414b351cc /app/screens/demo
New Ignite 7.0.6 app
Diffstat (limited to 'app/screens/demo')
-rw-r--r--app/screens/demo/demo-list-screen.tsx86
-rw-r--r--app/screens/demo/demo-screen.tsx181
-rw-r--r--app/screens/demo/heart.pngbin0 -> 204 bytes
-rw-r--r--app/screens/demo/[email protected]bin0 -> 377 bytes
-rw-r--r--app/screens/demo/logo-ignite.pngbin0 -> 9427 bytes
-rw-r--r--app/screens/demo/[email protected]bin0 -> 20283 bytes
6 files changed, 267 insertions, 0 deletions
diff --git a/app/screens/demo/demo-list-screen.tsx b/app/screens/demo/demo-list-screen.tsx
new file mode 100644
index 0000000..ae66307
--- /dev/null
+++ b/app/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/screens/demo/demo-screen.tsx b/app/screens/demo/demo-screen.tsx
new file mode 100644
index 0000000..40e3830
--- /dev/null
+++ b/app/screens/demo/demo-screen.tsx
@@ -0,0 +1,181 @@
+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/screens/demo/heart.png b/app/screens/demo/heart.png
new file mode 100644
index 0000000..9890998
--- /dev/null
+++ b/app/screens/demo/heart.png
Binary files differ
diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected]
new file mode 100644
index 0000000..e8b70d9
--- /dev/null
+++ b/app/screens/demo/[email protected]
Binary files differ
diff --git a/app/screens/demo/logo-ignite.png b/app/screens/demo/logo-ignite.png
new file mode 100644
index 0000000..36af16d
--- /dev/null
+++ b/app/screens/demo/logo-ignite.png
Binary files differ
diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected]
new file mode 100644
index 0000000..fdbfad8
--- /dev/null
+++ b/app/screens/demo/[email protected]
Binary files differ