import React , { FC } from "react" ; import { ImageStyle , Platform , TextStyle , View , ViewStyle } from "react-native" ; import { StackScreenProps } from "@react-navigation/stack" ; import { observer } from "mobx-react-lite" ; import { BulletItem , Button , Header , Text , Screen , AutoImage as Image , GradientBackground , } from "../../components" ; import { NavigatorParamList } from "../../navigators" ; 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 = { flex : 1 } ; const CONTAINER = { backgroundColor : color . transparent , paddingHorizontal : spacing [ 4 ] , } ; const DEMO = { paddingVertical : spacing [ 4 ] , paddingHorizontal : spacing [ 4 ] , backgroundColor : color . palette . deepPurple , } ; const BOLD = { fontWeight : "bold" } ; const DEMO_TEXT = { ... BOLD , fontSize : 13 , letterSpacing : 2 , } ; const HEADER = { paddingTop : spacing [ 3 ] , paddingBottom : spacing [ 5 ] - 1 , paddingHorizontal : 0 , } ; const HEADER_TITLE = { ... BOLD , fontSize : 12 , lineHeight : 15 , textAlign : "center" , letterSpacing : 1.5 , } ; const TITLE = { ... BOLD , fontSize : 28 , lineHeight : 38 , textAlign : "center" , marginBottom : spacing [ 5 ] , } ; const TAGLINE = { color : "#BAB6C8" , fontSize : 15 , lineHeight : 22 , marginBottom : spacing [ 4 ] + spacing [ 1 ] , } ; const IGNITE = { marginVertical : spacing [ 6 ] , alignSelf : "center" , width : 180 , height : 100 , } ; const LOVE_WRAPPER = { flexDirection : "row" , alignItems : "center" , alignSelf : "center" , } ; const LOVE = { color : "#BAB6C8" , fontSize : 15 , lineHeight : 22 , } ; const HEART = { marginHorizontal : spacing [ 2 ] , width : 10 , height : 10 , resizeMode : "contain" , } ; const HINT = { color : "#BAB6C8" , fontSize : 12 , lineHeight : 15 , marginVertical : spacing [ 2 ] , } ; const platformCommand = Platform . select ( { ios : "Cmd + D" , android : "Cmd/Ctrl + M" , } ) ; export const DemoScreen = observer ( ( { navigation } ) => { 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 ( ) { } , } , preview : "More control with display()" , important : true , image : { uri : "https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4" , } , } ) ; const demo = new Api ( ) ; demo . setup ( ) ; demo . getUser ( "1" ) ; await save ( "Cool Name" , "Boaty McBoatface" ) ; } , [ ] ) ; return ( < View testID = "DemoScreen" style = { FULL } > < GradientBackground colors = { [ "#422443" , "#281b34" ] } /> < 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>); } ) ;