summaryrefslogtreecommitdiff
path: root/app/screens/demo
diff options
context:
space:
mode:
Diffstat (limited to 'app/screens/demo')
-rw-r--r--app/screens/demo/demo-list-screen.tsx34
-rw-r--r--app/screens/demo/demo-screen.tsx77
2 files changed, 64 insertions, 47 deletions
diff --git a/app/screens/demo/demo-list-screen.tsx b/app/screens/demo/demo-list-screen.tsx
index ae66307..282bf4a 100644
--- a/app/screens/demo/demo-list-screen.tsx
+++ b/app/screens/demo/demo-list-screen.tsx
@@ -1,10 +1,16 @@
-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"
+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,
@@ -19,14 +25,14 @@ const HEADER: TextStyle = {
}
const HEADER_TITLE: TextStyle = {
fontSize: 12,
- fontWeight: "bold",
+ fontWeight: 'bold',
letterSpacing: 1.5,
lineHeight: 15,
- textAlign: "center",
+ textAlign: 'center',
}
const LIST_CONTAINER: ViewStyle = {
- alignItems: "center",
- flexDirection: "row",
+ alignItems: 'center',
+ flexDirection: 'row',
padding: 10,
}
const IMAGE: ImageStyle = {
@@ -59,7 +65,11 @@ export const DemoListScreen = observer(function DemoListScreen() {
return (
<View testID="DemoListScreen" style={FULL}>
<Wallpaper />
- <Screen style={CONTAINER} preset="fixed" backgroundColor={color.transparent}>
+ <Screen
+ style={CONTAINER}
+ preset="fixed"
+ backgroundColor={color.transparent}
+ >
<Header
headerTx="demoListScreen.title"
leftIcon="back"
diff --git a/app/screens/demo/demo-screen.tsx b/app/screens/demo/demo-screen.tsx
index 40e3830..7ec8ff6 100644
--- a/app/screens/demo/demo-screen.tsx
+++ b/app/screens/demo/demo-screen.tsx
@@ -1,7 +1,7 @@
-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 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,
@@ -10,12 +10,12 @@ import {
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")
+} 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 = {
@@ -27,7 +27,7 @@ const DEMO: ViewStyle = {
paddingHorizontal: spacing[4],
backgroundColor: color.palette.deepPurple,
}
-const BOLD: TextStyle = { fontWeight: "bold" }
+const BOLD: TextStyle = { fontWeight: 'bold' }
const DEMO_TEXT: TextStyle = {
...BOLD,
fontSize: 13,
@@ -42,35 +42,35 @@ const HEADER_TITLE: TextStyle = {
...BOLD,
fontSize: 12,
lineHeight: 15,
- textAlign: "center",
+ textAlign: 'center',
letterSpacing: 1.5,
}
const TITLE: TextStyle = {
...BOLD,
fontSize: 28,
lineHeight: 38,
- textAlign: "center",
+ textAlign: 'center',
marginBottom: spacing[5],
}
const TAGLINE: TextStyle = {
- color: "#BAB6C8",
+ color: '#BAB6C8',
fontSize: 15,
lineHeight: 22,
marginBottom: spacing[4] + spacing[1],
}
const IGNITE: ImageStyle = {
marginVertical: spacing[6],
- alignSelf: "center",
+ alignSelf: 'center',
width: 180,
height: 100,
}
const LOVE_WRAPPER: ViewStyle = {
- flexDirection: "row",
- alignItems: "center",
- alignSelf: "center",
+ flexDirection: 'row',
+ alignItems: 'center',
+ alignSelf: 'center',
}
const LOVE: TextStyle = {
- color: "#BAB6C8",
+ color: '#BAB6C8',
fontSize: 15,
lineHeight: 22,
}
@@ -78,18 +78,18 @@ const HEART: ImageStyle = {
marginHorizontal: spacing[2],
width: 10,
height: 10,
- resizeMode: "contain",
+ resizeMode: 'contain',
}
const HINT: TextStyle = {
- color: "#BAB6C8",
+ color: '#BAB6C8',
fontSize: 12,
lineHeight: 15,
marginVertical: spacing[2],
}
const platformCommand = Platform.select({
- ios: "Cmd + D",
- android: "Cmd/Ctrl + M",
+ ios: 'Cmd + D',
+ android: 'Cmd/Ctrl + M',
})
export const DemoScreen = observer(function DemoScreen() {
@@ -98,19 +98,19 @@ export const DemoScreen = observer(function DemoScreen() {
const demoReactotron = React.useMemo(
() => async () => {
- console.tron.log("Your Friendly tron log message")
- console.tron.logImportant("I am important")
+ console.tron.log('Your Friendly tron log message')
+ console.tron.logImportant('I am important')
console.tron.display({
- name: "DISPLAY",
+ name: 'DISPLAY',
value: {
numbers: 1,
- strings: "strings",
+ strings: 'strings',
booleans: true,
arrays: [1, 2, 3],
objects: {
deeper: {
deeper: {
- yay: "👾",
+ yay: '👾',
},
},
},
@@ -118,20 +118,20 @@ export const DemoScreen = observer(function DemoScreen() {
/* dummy function */
},
},
- preview: "More control with display()",
+ preview: 'More control with display()',
important: true,
image: {
uri:
- "https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4",
+ '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")
+ demo.getUser('1')
// Let's do some async storage stuff
- await save("Cool Name", "Boaty McBoatface")
+ await save('Cool Name', 'Boaty McBoatface')
},
[],
)
@@ -139,7 +139,11 @@ export const DemoScreen = observer(function DemoScreen() {
return (
<View testID="DemoScreen" style={FULL}>
<Wallpaper />
- <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
+ <Screen
+ style={CONTAINER}
+ preset="scroll"
+ backgroundColor={color.transparent}
+ >
<Header
headerTx="demoScreen.howTo"
leftIcon="back"
@@ -161,13 +165,16 @@ export const DemoScreen = observer(function DemoScreen() {
tx="demoScreen.reactotron"
onPress={demoReactotron}
/>
- <Text style={HINT} tx={`demoScreen.${Platform.OS}ReactotronHint` as const} />
+ <Text
+ style={HINT}
+ tx={`demoScreen.${Platform.OS}ReactotronHint` as const}
+ />
</View>
<Button
style={DEMO}
textStyle={DEMO_TEXT}
tx="demoScreen.demoList"
- onPress={() => navigation.navigate("demoList")}
+ onPress={() => navigation.navigate('demoList')}
/>
<Image source={logoIgnite} style={IGNITE} />
<View style={LOVE_WRAPPER}>
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-24 02:43:14 +0000