notesapp-react-native/ex.jsx at master · adeadavid/notesapp-react-native · GitHub

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component } from "react";
import * as day from "dayjs";
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableHighlight,
  KeyboardAvoidingView,
  StatusBar,
} from "react-native";
import Constants from "expo-constants";

class Notes extends Component {
  render() {
    return (
      <SafeAreaView style={StyleSheet.container}>
        <StatusBar backgroundColor="#000" barStyle="dark-content" />
        <View style={styles.header}>
          <Text style={styles.headerText}>-NOTER-</Text>
        </View>
        <View style={styles.list}>
          <Text>A</Text>
        </View>
        <KeyboardAvoidingView behavior="padding" style={styles.textView}>
          <TextInput
            placeholder="> note"
            placeholderTextColor="#fff"
            style={styles.text}
          />
        </KeyboardAvoidingView>
        <TouchableHighlight style={styles.button}>
          <Text>AAAA</Text>
        </TouchableHighlight>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
  },
  header: {
    height: 50,
    width: "100%",
    backgroundColor: "red",
    alignItems: "center",
    borderBottomWidth: 10,
    borderBottomColor: "#0D0D0D",
  },
  headerText: {
    fontWeight: "bold",
    marginTop: 10,
    color: "#fff",
  },
  list: {
    flex: 1,
    flexGrow: 1,
  },
  textView: {
    width: "100%",
    height: 70,
    backgroundColor: "#0d40d4",
    justifyContent: "center",
  },
  text: {
    padding: 5,
    color: "#fff",

    flex: 1,
  },
  button: {
    width: 80,
    height: 80,
    borderRadius: 40,
    zIndex: 1,
    position: "absolute",
    bottom: 50,
    right: 10,
    shadowColor: "#000",
    shadowOpacity: 4,
    backgroundColor: "orange",
    overflow: "hidden",
    justifyContent: "center",
    alignItems: "center",
  },
});
export default Notes;