diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /app/screens |
New Ignite 7.0.6 app
Diffstat (limited to 'app/screens')
-rw-r--r-- | app/screens/demo/demo-list-screen.tsx | 86 | ||||
-rw-r--r-- | app/screens/demo/demo-screen.tsx | 181 | ||||
-rw-r--r-- | app/screens/demo/heart.png | bin | 0 -> 204 bytes | |||
-rw-r--r-- | app/screens/demo/[email protected] | bin | 0 -> 377 bytes | |||
-rw-r--r-- | app/screens/demo/logo-ignite.png | bin | 0 -> 9427 bytes | |||
-rw-r--r-- | app/screens/demo/[email protected] | bin | 0 -> 20283 bytes | |||
-rw-r--r-- | app/screens/index.ts | 4 | ||||
-rw-r--r-- | app/screens/welcome/bowser.png | bin | 0 -> 33502 bytes | |||
-rw-r--r-- | app/screens/welcome/[email protected] | bin | 0 -> 79259 bytes | |||
-rw-r--r-- | app/screens/welcome/welcome-screen.tsx | 118 |
10 files changed, 389 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 Binary files differnew file mode 100644 index 0000000..9890998 --- /dev/null +++ b/app/screens/demo/heart.png diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected] Binary files differnew file mode 100644 index 0000000..e8b70d9 --- /dev/null +++ b/app/screens/demo/[email protected] diff --git a/app/screens/demo/logo-ignite.png b/app/screens/demo/logo-ignite.png Binary files differnew file mode 100644 index 0000000..36af16d --- /dev/null +++ b/app/screens/demo/logo-ignite.png diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected] Binary files differnew file mode 100644 index 0000000..fdbfad8 --- /dev/null +++ b/app/screens/demo/[email protected] diff --git a/app/screens/index.ts b/app/screens/index.ts new file mode 100644 index 0000000..17c8ade --- /dev/null +++ b/app/screens/index.ts @@ -0,0 +1,4 @@ +export * from "./welcome/welcome-screen" +export * from "./demo/demo-screen" +export * from "./demo/demo-list-screen" +// export other screens here diff --git a/app/screens/welcome/bowser.png b/app/screens/welcome/bowser.png Binary files differnew file mode 100644 index 0000000..2b0bdbc --- /dev/null +++ b/app/screens/welcome/bowser.png diff --git a/app/screens/welcome/[email protected] b/app/screens/welcome/[email protected] Binary files differnew file mode 100644 index 0000000..85cc693 --- /dev/null +++ b/app/screens/welcome/[email protected] diff --git a/app/screens/welcome/welcome-screen.tsx b/app/screens/welcome/welcome-screen.tsx new file mode 100644 index 0000000..47ed2ce --- /dev/null +++ b/app/screens/welcome/welcome-screen.tsx @@ -0,0 +1,118 @@ +import React from "react" +import { View, ViewStyle, TextStyle, ImageStyle, SafeAreaView } from "react-native" +import { useNavigation } from "@react-navigation/native" +import { observer } from "mobx-react-lite" +import { Button, Header, Screen, Text, Wallpaper, AutoImage as Image } from "../../components" +import { color, spacing, typography } from "../../theme" +const bowserLogo = require("./bowser.png") + +const FULL: ViewStyle = { flex: 1 } +const CONTAINER: ViewStyle = { + backgroundColor: color.transparent, + paddingHorizontal: spacing[4], +} +const TEXT: TextStyle = { + color: color.palette.white, + fontFamily: typography.primary, +} +const BOLD: TextStyle = { fontWeight: "bold" } +const HEADER: TextStyle = { + paddingTop: spacing[3], + paddingBottom: spacing[4] + spacing[1], + paddingHorizontal: 0, +} +const HEADER_TITLE: TextStyle = { + ...TEXT, + ...BOLD, + fontSize: 12, + lineHeight: 15, + textAlign: "center", + letterSpacing: 1.5, +} +const TITLE_WRAPPER: TextStyle = { + ...TEXT, + textAlign: "center", +} +const TITLE: TextStyle = { + ...TEXT, + ...BOLD, + fontSize: 28, + lineHeight: 38, + textAlign: "center", +} +const ALMOST: TextStyle = { + ...TEXT, + ...BOLD, + fontSize: 26, + fontStyle: "italic", +} +const BOWSER: ImageStyle = { + alignSelf: "center", + marginVertical: spacing[5], + maxWidth: "100%", + width: 343, + height: 230, +} +const CONTENT: TextStyle = { + ...TEXT, + color: "#BAB6C8", + fontSize: 15, + lineHeight: 22, + marginBottom: spacing[5], +} +const CONTINUE: ViewStyle = { + paddingVertical: spacing[4], + paddingHorizontal: spacing[4], + backgroundColor: color.palette.deepPurple, +} +const CONTINUE_TEXT: TextStyle = { + ...TEXT, + ...BOLD, + fontSize: 13, + letterSpacing: 2, +} +const FOOTER: ViewStyle = { backgroundColor: "#20162D" } +const FOOTER_CONTENT: ViewStyle = { + paddingVertical: spacing[4], + paddingHorizontal: spacing[4], +} + +export const WelcomeScreen = observer(function WelcomeScreen() { + const navigation = useNavigation() + const nextScreen = () => navigation.navigate("demo") + + return ( + <View testID="WelcomeScreen" style={FULL}> + <Wallpaper /> + <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> + ) +}) |