-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.jsx
70 lines (63 loc) · 1.71 KB
/
App.jsx
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
import "react-native-gesture-handler";
import React, { useState } from "react";
import { StyleSheet, Pressable, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import AccentPicker from "./src/components/AccentPicker";
import Chat from "./src/components/Chat";
import { HEIGHT, OVERDRAG } from "./src/misc/consts";
import {
ACCENT_COLOR,
BACKDROP_COLOR,
BACKGROUND_COLOR,
} from "./src/misc/colors";
function App() {
const [isOpen, setOpen] = useState(false);
const [accent, setAccent] = useState(ACCENT_COLOR);
const toggleSheet = () => {
setOpen(!isOpen);
};
return (
<GestureHandlerRootView style={styles.container}>
<SafeAreaProvider>
<Chat toggleSheet={toggleSheet} accent={accent} />
{isOpen && (
<>
<Pressable style={styles.backdrop} onPress={toggleSheet} />
<View style={styles.sheet}>
<AccentPicker
onPick={(color) => {
setAccent(color);
toggleSheet();
}}
/>
</View>
</>
)}
</SafeAreaProvider>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: BACKGROUND_COLOR,
},
sheet: {
backgroundColor: "white",
padding: 16,
height: HEIGHT,
width: "100%",
position: "absolute",
bottom: -OVERDRAG * 1.1,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
zIndex: 1,
},
backdrop: {
...StyleSheet.absoluteFillObject,
backgroundColor: BACKDROP_COLOR,
zIndex: 1,
},
});
export default App;