Notes component

Routinely/app/components/calendar_components/Notes.js

@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import {
+  AppRegistry,
+  View,
+  StyleSheet,
+  TouchableHighlight,
+  Image,
+  Text,
+} from 'react-native';
+import {Divider} from 'react-native-elements';
+import {withNavigation} from 'react-navigation';
+
+class Notes extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          backgroundColor: '#FFFFFF',
+          height: 50,
+          borderRadius: 10,
+          marginTop: 5,
+          marginBottom: 5,
+        }}>
+        <TouchableHighlight
+          onPress={() => this.props.navigation.navigate('Notes')}
+          title={'Notes'}>
+          <View>
+            <Text
+              style={{
+                fontSize: 16,
+                fontWeight: 'bold',
+                paddingTop: 15,
+                paddingLeft: 15,
+              }}>
+              Notes
+            </Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          onPress={() => this.props.navigation.navigate('Notes')}
+          title={'Notes'}
+          style={{paddingLeft: 320, paddingTop: 20}}>
+          <View>
+            <Image
+              style={styles.icon}
+              source={require('Routinely/app/components/img/next.png')}
+            />
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}
+AppRegistry.registerComponent('Notes', () => Notes);
+
+const styles = StyleSheet.create({});
+export default withNavigation(Notes);

Routinely/app/screens/calendar.js

@@ -23,6 +23,7 @@ import firestore from '@react-native-firebase/firestore';
 import '@react-native-firebase/auth';
 import {Divider} from 'react-native-elements';
 import Swipeout from 'react-native-swipeout';
+import Notes from 'Routinely/app/components/calendar_components/Notes.js';
 
 const today = new Date().toISOString().split('T')[0];
 const fastDate = getPastDate(3);
@@ -274,7 +275,7 @@ class CalendarScreen extends Component {
         buttonWidth={50}>
         <View style={styles.item}>
           <Text style={styles.itemTitleText}>{item.title}</Text>
-          <Text>{item.note}</Text>
+          <Text style={{}}>{item.note}</Text>
         </View>
       </Swipeout>
     );
@@ -475,15 +476,7 @@ class CalendarScreen extends Component {
         />
         <View style={styles.greyBackground}>
           <View style={styles.container}>
-            <TouchableHighlight
-              onPress={() => this.props.navigation.navigate('Notes')}
-              underlayColor={'#ededed'}>
-              <Image
-                style={styles.icon}
-                source={require('../components/img/NotesHome.png')}
-              />
-            </TouchableHighlight>
-            <Divider />
+            <Notes/>
             <FlatList
               data={this.state.eventList}
               keyExtractor={item => item.id}
@@ -544,7 +537,9 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
   },
   item: {
-    padding: 20,
+    paddingTop: 20,
+    paddingBottom: 20,
+    paddingLeft: 5,
     backgroundColor: 'white',
     borderBottomWidth: 1,
     borderBottomColor: '#e8ecf0',
@@ -561,7 +556,6 @@ const styles = StyleSheet.create({
   },
   itemTitleText: {
     color: 'black',
-    marginLeft: 16,
     fontWeight: 'bold',
     fontSize: 16,
   },

Routinely/package.json

@@ -27,6 +27,7 @@
     "react-native-elements": "^1.2.5",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-google-signin": "^2.1.0",
+    "react-native-navigation": "^3.5.1",
     "react-native-really-awesome-button": "^1.4.2",
     "react-native-swipeout": "^2.3.6",
     "react-native-textinput-effects": "^0.5.1",