import React , { FC } from "react" ; import { View , ViewStyle , TextStyle , ImageStyle , SafeAreaView } from "react-native" ; import { StackScreenProps } from "@react-navigation/stack" ; import { observer } from "mobx-react-lite" ; import { Button , Header , Screen , Text , GradientBackground , AutoImage as Image , } from "../../components" ; import { color , spacing , typography } from "../../theme" ; import { NavigatorParamList } from "../../navigators" ; const bowserLogo = require ( "./bowser.png" ) ; const FULL = { flex : 1 } ; const CONTAINER = { backgroundColor : color . transparent , paddingHorizontal : spacing [ 4 ] , } ; const TEXT = { color : color . palette . white , fontFamily : typography . primary , } ; const BOLD = { fontWeight : "bold" } ; const HEADER = { paddingTop : spacing [ 3 ] , paddingBottom : spacing [ 4 ] + spacing [ 1 ] , paddingHorizontal : 0 , } ; const HEADER_TITLE = { ... TEXT , ... BOLD , fontSize : 12 , lineHeight : 15 , textAlign : "center" , letterSpacing : 1.5 , } ; const TITLE_WRAPPER = { ... TEXT , textAlign : "center" , } ; const TITLE = { ... TEXT , ... BOLD , fontSize : 28 , lineHeight : 38 , textAlign : "center" , } ; const ALMOST = { ... TEXT , ... BOLD , fontSize : 26 , fontStyle : "italic" , } ; const BOWSER = { alignSelf : "center" , marginVertical : spacing [ 5 ] , maxWidth : "100%" , width : 343 , height : 230 , } ; const CONTENT = { ... TEXT , color : "#BAB6C8" , fontSize : 15 , lineHeight : 22 , marginBottom : spacing [ 5 ] , } ; const CONTINUE = { paddingVertical : spacing [ 4 ] , paddingHorizontal : spacing [ 4 ] , backgroundColor : color . palette . deepPurple , } ; const CONTINUE_TEXT = { ... TEXT , ... BOLD , fontSize : 13 , letterSpacing : 2 , } ; const FOOTER = { backgroundColor : "#20162D" } ; const FOOTER_CONTENT = { paddingVertical : spacing [ 4 ] , paddingHorizontal : spacing [ 4 ] , } ; export const WelcomeScreen = observer ( ( { navigation } ) => { const nextScreen = ( ) => navigation . navigate ( "demo" ) ; return ( < View testID = "WelcomeScreen" style = { FULL } > < GradientBackground colors = { [ "#422443" , "#281b34" ] } /> < Screen style = { CONTAINER } preset = "scroll" backgroundColor = { color . transparent } > < Header headerTx = "welcomeScreen.poweredBy" style = { HEADER } titleStyle = { HEADER_TITLE } / > < Text style = { TITLE_WRAPPER } > < Text style = { TITLE } text = "Your new app, " / > < Text style = { ALMOST } text = "almost" / > < Text style = { TITLE } text = "!" / > < /Text> < Text style = { TITLE } preset = "header" tx = "welcomeScreen.readyForLaunch" / > < Image source = { bowserLogo } style = { BOWSER } / > < Text style = { CONTENT } > This probably isn 't what your app is going to look like. Unless your designer handed you this screen and , in that case , congrats ! You 're ready to ship. < /Text> < Text style = { CONTENT } > For everyone else , this is where you 'll see a live preview of your fully functioning app using Ignite . < /Text> < /Screen> < SafeAreaView style = { FOOTER } > < View style = { FOOTER_CONTENT } > < Button testID = "next-screen-button" style = { CONTINUE } textStyle = { CONTINUE_TEXT } tx = "welcomeScreen.continue" onPress = { nextScreen } / > < /View> < /SafeAreaView> < /View>); } ) ;