-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.tsx
77 lines (68 loc) · 2.19 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button, StatusBar } from 'react-native';
import { NavigationContainer, DefaultTheme, DarkTheme, useTheme } from '@react-navigation/native';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator();
import { useGlobal, setGlobal } from 'reactn';
// Components
import NewMessage from './src/components/buttons/NewMessage';
// Screens
import RecentMessagesListScreen from './src/screens/RecentMessagesListScreen';
import MessageScreen from './src/screens/MessageScreen';
// Data
import defaultContacts from './src/data/contacts.json';
export default function App() {
const scheme = useColorScheme();
const [ loaded, setLoaded ] = useState(false);
const [ contacts ] = useGlobal<any>('contacts');
useEffect(() => {
if(!contacts){
setGlobal({
contacts: defaultContacts
})
}
setLoaded(true)
}, [])
const iOSLightTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "#0071e3",
text: "#000",
text2: "#999",
border: "#EAEAEA",
background: "#f3f3f3",
card: "#fff"
}
}
const iOSDarkTheme = {
...DarkTheme,
colors: {
...DarkTheme.colors,
primary: "#0071e3",
text: "#FFF",
text2: "#999",
border: "#111",
background: "#222",
card: "#000"
}
}
if(loaded){
return (
<>
<StatusBar barStyle={scheme === "dark" ? 'light-content' : "dark-content"}/>
<AppearanceProvider>
<NavigationContainer theme={scheme === "dark" ? iOSDarkTheme : iOSLightTheme}>
<Stack.Navigator initialRouteName="RecentMessagesListScreen">
<Stack.Screen name="RecentMessagesListScreen" component={RecentMessagesListScreen} options={{
title: 'Messages'
}}/>
<Stack.Screen name="Message" component={MessageScreen}/>
</Stack.Navigator>
</NavigationContainer>
</AppearanceProvider>
</>
);
} else return null;
}