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> ) })