summaryrefslogtreecommitdiff
path: root/app/screens
diff options
context:
space:
mode:
Diffstat (limited to 'app/screens')
-rw-r--r--app/screens/demo/demo-list-screen.tsx34
-rw-r--r--app/screens/demo/demo-screen.tsx77
-rw-r--r--app/screens/graph/graph-screen.tsx200
-rw-r--r--app/screens/index.ts8
-rw-r--r--app/screens/welcome/welcome-screen.tsx68
5 files changed, 230 insertions, 157 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}>
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index a97fe68..8c35590 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -1,31 +1,30 @@
-import React, { useEffect, useState } from "react"
-import { observer } from "mobx-react-lite"
-import { TouchableOpacity, View, ViewStyle } from "react-native"
-import { Screen, Text } from "../../components"
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Screen, Text } from '../../components'
// import { useNavigation } from "@react-navigation/native"
// import { useStores } from "../../models"
-import { color } from "../../theme"
+import { color } from '../../theme'
-import { Graph } from "../../components"
-import { Tweaks } from "../../components"
+import { Graph } from '../../components'
+import { Tweaks } from '../../components'
-import genRandomTree from "../../data/randomdata"
+import genRandomTree from '../../data/randomdata'
-import AsyncStorage from "@react-native-async-storage/async-storage"
+import AsyncStorage from '@react-native-async-storage/async-storage'
-import axios from "axios"
-
-import rando from "../../data/rando.json"
+import axios from 'axios'
+import rando from '../../data/rando.json'
const ROOT: ViewStyle = {
backgroundColor: color.palette.black,
flex: 1,
}
-import { LocalButton } from "../../components/"
-import { GraphUi } from "../../components/graph-ui/graph-ui"
-import { Switch } from "react-native-elements"
+import { LocalButton } from '../../components/'
+import { GraphUi } from '../../components/graph-ui/graph-ui'
+import { Switch } from 'react-native-elements'
export const GraphScreen = observer(function GraphScreen() {
// Pull in one of our MST stores
// const { someStore, anotherStore } = useStores()
@@ -62,11 +61,11 @@ export const GraphScreen = observer(function GraphScreen() {
const getData = async () => {
try {
- const value: string = await AsyncStorage.getItem("@physics")
+ const value: string = await AsyncStorage.getItem('@physics')
if (value !== null) {
const valueJson = JSON.parse(value)
if (Object.keys(valueJson).length === Object.keys(physicsInit).length) {
- valueJson.local=false;
+ valueJson.local = false
return valueJson
} else {
return physicsInit
@@ -81,8 +80,8 @@ export const GraphScreen = observer(function GraphScreen() {
const storeData = async (value) => {
try {
let jsonVal = JSON.stringify(value)
- console.log(jsonVal + " " + value)
- await AsyncStorage.setItem("@physics", jsonVal)
+ console.log(jsonVal + ' ' + value)
+ await AsyncStorage.setItem('@physics', jsonVal)
} catch (e) {
console.log(e)
}
@@ -114,7 +113,7 @@ export const GraphScreen = observer(function GraphScreen() {
!a.links && (a.links = [])
// the first time around,
// index the node as not a part of the local graph
- !j && (a.local=false);
+ !j && (a.local = false)
if (link.target === data.nodes[i].id) {
a.links.push(link)
target = [a, i]
@@ -130,51 +129,53 @@ export const GraphScreen = observer(function GraphScreen() {
link.sourceIndex = source[1]
link.targetIndex = target[1]
link.index = [j]
- link.local = false;
+ link.local = false
}
})
- data.links = cleanLinks;
- return data;
+ data.links = cleanLinks
+ return data
}
-
-const [theme, setTheme] = useState({
-base1: "#1c1f24",
-base2: "#21272d",
-base3: "#23272e",
-base4: "#484854",
-base5: "#62686E",
-base6: "#757B80",
-base7: "#9ca0a4",
-base8: "#DFDFDF",
-bg: "#242730",
-"bg-alt": "#2a2e38",
-blue: "#51afef",
-cyan: "#5cEfFF",
-"dark-blue": "#1f5582",
-"dark-cyan": "#6A8FBF",
-fg: "#bbc2cf",
-"fg-alt": "#5D656B",
-green: "#7bc275",
-grey: "#484854",
-magenta: "#C57BDB",
-orange: "#e69055",
-red: "#ff665c",
-teal: "#4db5bd",
-violet: "#a991f1",
-yellow: "#FCCE7B",
- });
+ const [theme, setTheme] = useState({
+ base1: '#1c1f24',
+ base2: '#21272d',
+ base3: '#23272e',
+ base4: '#484854',
+ base5: '#62686E',
+ base6: '#757B80',
+ base7: '#9ca0a4',
+ base8: '#DFDFDF',
+ bg: '#242730',
+ 'bg-alt': '#2a2e38',
+ blue: '#51afef',
+ cyan: '#5cEfFF',
+ 'dark-blue': '#1f5582',
+ 'dark-cyan': '#6A8FBF',
+ fg: '#bbc2cf',
+ 'fg-alt': '#5D656B',
+ green: '#7bc275',
+ grey: '#484854',
+ magenta: '#C57BDB',
+ orange: '#e69055',
+ red: '#ff665c',
+ teal: '#4db5bd',
+ violet: '#a991f1',
+ yellow: '#FCCE7B',
+ })
useEffect(() => {
getData().then((data) => setPhysics(data))
- axios.get("http://localhost:35901/theme")
- .then((theme)=>{setTheme(theme.data);
- console.log(theme.data)})
+ axios
+ .get('http://localhost:35901/theme')
+ .then((theme) => {
+ setTheme(theme.data)
+ console.log(theme.data)
+ })
.catch((e) => {
- console.log("No theme found")
+ console.log('No theme found')
})
axios
- .get("http://localhost:35901/graph")
+ .get('http://localhost:35901/graph')
.then((dataa) => {
let cleanData = sanitizeGraph(dataa.data)
console.log(cleanData)
@@ -185,45 +186,78 @@ yellow: "#FCCE7B",
console.log("Couldn't get data.")
//setGraphData(rando);
})
- }, []);
+ }, [])
- const [threeDim, setThreeDim] = useState(false);
- const [local, setLocal] = useState(false);
+ const [threeDim, setThreeDim] = useState(false)
+ const [local, setLocal] = useState(false)
if (!graphData) {
return null
} else {
return (
<Screen style={ROOT} preset="fixed">
- <View style={{display: "flex", flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}>
- <Tweaks physics={physics} setPhysics={setPhysics} />
- <View style={{marginLeft: "auto", marginRight:"2%", marginTop: "2%", zIndex: 5, position: "relative", height: "15%" }}>
- <LocalButton local={local} setLocal={setLocal} />
- <View style={{display: "flex", flexDirection: "row", alignItems: "center",justifyContent: "center", paddingTop: "2%"}}>
- <Text preset="header" text="3D" style={{marginLeft: 10}} />
- <Switch
- color="#a991f1"
- trackColor={{
- false: "#62686E",
- true: "#a991f1"
- }}
+ <View
+ style={{
+ display: 'flex',
+ flexDirection: 'row',
+ height: '100%',
+ width: '100%',
+ position: 'absolute',
+ zIndex: 150,
+ }}
+ >
+ <Tweaks physics={physics} setPhysics={setPhysics} />
+ <View
style={{
- height: 25,
- marginVertical: 10,
- marginLeft: 20}}
- value={threeDim}
- onValueChange={() => {
- setThreeDim(!threeDim)
+ marginLeft: 'auto',
+ marginRight: '2%',
+ marginTop: '2%',
+ zIndex: 5,
+ position: 'relative',
+ height: '15%',
}}
+ >
+ <LocalButton local={local} setLocal={setLocal} />
+ <View
+ style={{
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingTop: '2%',
+ }}
+ >
+ <Text preset="header" text="3D" style={{ marginLeft: 10 }} />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: '#62686E',
+ true: '#a991f1',
+ }}
+ style={{
+ height: 25,
+ marginVertical: 10,
+ marginLeft: 20,
+ }}
+ value={threeDim}
+ onValueChange={() => {
+ setThreeDim(!threeDim)
+ }}
+ />
+ </View>
+ </View>
+ <Graph
+ style={{ position: 'absolute' }}
+ setPhysics={setPhysics}
+ physics={physics}
+ gData={graphData}
+ nodeIds={nodeIds}
+ threeDim={threeDim}
+ setThreeDim={setThreeDim}
+ local={local}
+ setLocal={setLocal}
/>
</View>
- </View>
- <Graph
- style={{position: "absolute"}}
- setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds}
- threeDim={threeDim} setThreeDim={setThreeDim}
- local={local} setLocal={setLocal}/>
- </View>
</Screen>
)
}
diff --git a/app/screens/index.ts b/app/screens/index.ts
index 96fcc0b..1ba716f 100644
--- a/app/screens/index.ts
+++ b/app/screens/index.ts
@@ -1,5 +1,5 @@
-export * from "./welcome/welcome-screen"
-export * from "./demo/demo-screen"
-export * from "./demo/demo-list-screen"
+export * from './welcome/welcome-screen'
+export * from './demo/demo-screen'
+export * from './demo/demo-list-screen'
// export other screens here
-export * from "./graph/graph-screen"
+export * from './graph/graph-screen'
diff --git a/app/screens/welcome/welcome-screen.tsx b/app/screens/welcome/welcome-screen.tsx
index 47ed2ce..7ba3a59 100644
--- a/app/screens/welcome/welcome-screen.tsx
+++ b/app/screens/welcome/welcome-screen.tsx
@@ -1,10 +1,23 @@
-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")
+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 = {
@@ -15,7 +28,7 @@ const TEXT: TextStyle = {
color: color.palette.white,
fontFamily: typography.primary,
}
-const BOLD: TextStyle = { fontWeight: "bold" }
+const BOLD: TextStyle = { fontWeight: 'bold' }
const HEADER: TextStyle = {
paddingTop: spacing[3],
paddingBottom: spacing[4] + spacing[1],
@@ -26,36 +39,36 @@ const HEADER_TITLE: TextStyle = {
...BOLD,
fontSize: 12,
lineHeight: 15,
- textAlign: "center",
+ textAlign: 'center',
letterSpacing: 1.5,
}
const TITLE_WRAPPER: TextStyle = {
...TEXT,
- textAlign: "center",
+ textAlign: 'center',
}
const TITLE: TextStyle = {
...TEXT,
...BOLD,
fontSize: 28,
lineHeight: 38,
- textAlign: "center",
+ textAlign: 'center',
}
const ALMOST: TextStyle = {
...TEXT,
...BOLD,
fontSize: 26,
- fontStyle: "italic",
+ fontStyle: 'italic',
}
const BOWSER: ImageStyle = {
- alignSelf: "center",
+ alignSelf: 'center',
marginVertical: spacing[5],
- maxWidth: "100%",
+ maxWidth: '100%',
width: 343,
height: 230,
}
const CONTENT: TextStyle = {
...TEXT,
- color: "#BAB6C8",
+ color: '#BAB6C8',
fontSize: 15,
lineHeight: 22,
marginBottom: spacing[5],
@@ -71,7 +84,7 @@ const CONTINUE_TEXT: TextStyle = {
fontSize: 13,
letterSpacing: 2,
}
-const FOOTER: ViewStyle = { backgroundColor: "#20162D" }
+const FOOTER: ViewStyle = { backgroundColor: '#20162D' }
const FOOTER_CONTENT: ViewStyle = {
paddingVertical: spacing[4],
paddingHorizontal: spacing[4],
@@ -79,13 +92,21 @@ const FOOTER_CONTENT: ViewStyle = {
export const WelcomeScreen = observer(function WelcomeScreen() {
const navigation = useNavigation()
- const nextScreen = () => navigation.navigate("demo")
+ 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} />
+ <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" />
@@ -94,12 +115,13 @@ export const WelcomeScreen = observer(function WelcomeScreen() {
<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.
+ 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.
+ For everyone else, this is where you'll see a live preview of your
+ fully functioning app using Ignite.
</Text>
</Screen>
<SafeAreaView style={FOOTER}>
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-24 02:42:17 +0000