added action button

apps/mobile/App.js

@@ -2,20 +2,83 @@ import React, {useState, useEffect} from 'react';
 import NavigationService, {
   AppContainer,
 } from './src/services/NavigationService';
-import {StatusBar} from 'react-native';
+import {StatusBar, View, SafeAreaView, TouchableOpacity} from 'react-native';
+import {COLOR_SCHEME, SIZE, opacity, WEIGHT} from './src/common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import ActionButton from 'react-native-action-button';
 
 const App = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
   useEffect(() => {
     StatusBar.setBackgroundColor('transparent');
     StatusBar.setTranslucent(true);
     StatusBar.setBarStyle('dark-content');
   });
   return (
-    <AppContainer
+    <>
-      ref={navigatorRef => {
+      <AppContainer
-        NavigationService.setTopLevelNavigator(navigatorRef);
+        ref={navigatorRef => {
-      }}
+          NavigationService.setTopLevelNavigator(navigatorRef);
-    />
+        }}
+      />
+
+      <ActionButton elevation={5} buttonColor={colors.accent}>
+        <ActionButton.Item
+          buttonColor="#9b59b6"
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          title=""
+          hideShadow={true}
+          onPress={() => console.log('notes tapped!')}>
+          <Icon
+            name="md-create"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+        <ActionButton.Item
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          hideShadow={true}
+          buttonColor="#3498db"
+          title=""
+          onPress={() => {}}>
+          <Icon
+            name="ios-list"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+        <ActionButton.Item
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          hideShadow={true}
+          buttonColor="#1abc9c"
+          title=""
+          onPress={() => {}}>
+          <Icon
+            name="ios-clock"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+      </ActionButton>
+    </>
   );
 };
 

apps/mobile/src/components/ListItem/index.js

@@ -0,0 +1,96 @@
+import React, {useState} from 'react';
+import {View, Text, TouchableOpacity, Platform, Dimensions} from 'react-native';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {getElevation} from '../../utils/utils';
+import {FlatList} from 'react-native-gesture-handler';
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+export const ListItem = props => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <View
+      style={{
+        ...getElevation(10),
+        width: '90%',
+        marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
+        alignSelf: 'center',
+        borderRadius: br,
+        backgroundColor: '#f0f0f0',
+
+        marginBottom: 20,
+        padding: 5,
+      }}>
+      <View>
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: ph,
+          }}>
+          <Text
+            numberOfLines={1}
+            style={{
+              color: colors.pri,
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.bold,
+              maxWidth: '100%',
+            }}>
+            Shopping List
+          </Text>
+
+          <View
+            style={{
+              width: '20%',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            <Icon name="md-share-alt" size={SIZE.lg} color={colors.icon} />
+            <Icon name="md-star" size={SIZE.lg} color={colors.icon} />
+            <Icon name="md-more" size={SIZE.lg} color={colors.icon} />
+          </View>
+        </View>
+
+        <View>
+          <FlatList
+            data={['1 kg wheat flour', '1/2 kg bread']}
+            renderItem={({item, index}) => (
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                }}>
+                <Text
+                  style={{
+                    color: 'white',
+                    ...getElevation(5),
+                    paddingVertical: pv - 5,
+                    paddingHorizontal: ph - 5,
+                    backgroundColor: colors.accent,
+                    marginVertical: 5,
+                    borderRadius: br,
+                    marginHorizontal: 10,
+                    fontFamily: WEIGHT.regular,
+                  }}>
+                  {item}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

apps/mobile/src/components/NoteItem/index.js

@@ -37,24 +37,46 @@ const NoteItem = props => {
         backgroundColor: '#f0f0f0',
         marginVertical: h * 0.015,
         borderRadius: br,
-        flexDirection: 'row',
+
         justifyContent: 'center',
         alignItems: 'center',
         padding: pv,
       }}>
       <View
         style={{
-          width: '92%',
+          width: '100%',
-          justifyContent: 'center',
+          flexDirection: 'row',
-          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          alignItems: 'center',
         }}>
         <Text
+          numberOfLines={1}
           style={{
+            color: colors.pri,
             fontSize: SIZE.md,
             fontFamily: WEIGHT.bold,
+            maxWidth: '100%',
           }}>
           {item.title}
         </Text>
+
+        <View
+          style={{
+            width: '20%',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          <Icon name="md-share-alt" size={SIZE.lg} color={colors.icon} />
+          <Icon name="md-star" size={SIZE.lg} color={colors.icon} />
+          <Icon name="md-more" size={SIZE.lg} color={colors.icon} />
+        </View>
+      </View>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+        }}>
         <Text
           style={{
             fontSize: SIZE.xs + 1,
@@ -74,15 +96,6 @@ const NoteItem = props => {
           {item.timestamp + '  '}
         </Text>
       </View>
-      <TouchableOpacity
-        style={{
-          width: '8%',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 60,
-        }}>
-        <Icon name="md-more" size={SIZE.xl} color={colors.accent} />
-      </TouchableOpacity>
     </View>
   );
 };

apps/mobile/src/components/Recents/index.js

@@ -23,6 +23,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../Reminder';
 import {getElevation} from '../../utils/utils';
 import NoteItem from '../NoteItem';
+import NavigationService from '../../services/NavigationService';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -72,12 +73,16 @@ export const RecentList = () => {
     {
       name: 'Reminders',
       icon: 'ios-clock',
-      func: () => {},
+      func: () => {
+        NavigationService.navigate('Reminders');
+      },
     },
     {
       name: 'Lists',
       icon: 'ios-list',
-      func: () => {},
+      func: () => {
+        NavigationService.navigate('Lists');
+      },
     },
   ];
 

apps/mobile/src/components/Reminder/index.js

@@ -14,63 +14,89 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {getElevation} from '../../utils/utils';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
-export const Reminder = () => {
+export const Reminder = props => {
   const [colors, setColors] = useState(COLOR_SCHEME);
 
   return (
-    <TouchableOpacity
+    <View
-      activeOpacity={opacity}
       style={{
         ...getElevation(10),
         width: '90%',
         marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
         alignSelf: 'center',
         borderRadius: br,
-        backgroundColor: colors.accent,
+        backgroundColor: props.invert ? '#f0f0f0' : colors.accent,
         paddingHorizontal: ph,
         marginBottom: 20,
         padding: 5,
       }}>
       <View>
-        <Text
+        <View
-          numberOfLines={1}
           style={{
             width: '100%',
-            maxWidth: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           }}>
           <Text
             numberOfLines={1}
             style={{
-              color: 'white',
+              color: props.invert ? colors.pri : 'white',
-              fontSize: SIZE.lg,
+              fontSize: SIZE.md,
               fontFamily: WEIGHT.bold,
               maxWidth: '100%',
             }}>
             Pay Utility Bills
           </Text>
-        </Text>
+
+          <View
+            style={{
+              width: '20%',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            <Icon
+              name="md-share-alt"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+            <Icon
+              name="md-star"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+            <Icon
+              name="md-more"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+          </View>
+        </View>
 
         <View
           style={{
             width: '100%',
             justifyContent: 'space-between',
             flexDirection: 'row',
-            alignItems: 'flex-end',
+            alignItems: 'center',
           }}>
           <Text
+            numberOfLines={5}
             style={{
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.xs,
-              color: 'white',
+              color: props.invert ? colors.icon : 'white',
               marginBottom: 3,
+              maxWidth: '60%',
             }}>
             {'\n'}
-            Amount 5000 RS
+            Pay all the bills
           </Text>
 
           <Text
             style={{
-              color: 'white',
+              color: props.invert ? colors.accent : 'white',
               fontSize: SIZE.xxl,
               fontFamily: WEIGHT.light,
             }}>
@@ -90,6 +116,6 @@ export const Reminder = () => {
           </Text>
         </View>
       </View>
-    </TouchableOpacity>
+    </View>
   );
 };

apps/mobile/src/services/NavigationService.js

@@ -2,6 +2,8 @@ import {createAppContainer, NavigationActions} from 'react-navigation';
 import {createStackNavigator} from 'react-navigation-stack';
 import Home from '../views/Home/index';
 import Editor from '../views/Editor';
+import Reminders from '../views/Reminders';
+import Lists from '../views/Lists';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -11,6 +13,12 @@ const TopLevelNavigator = createStackNavigator(
     Editor: {
       screen: Editor,
     },
+    Reminders: {
+      screen: Reminders,
+    },
+    Lists: {
+      screen: Lists,
+    },
   },
   {
     initialRouteName: 'Home',

apps/mobile/src/views/Home/index.js

@@ -8,6 +8,7 @@ import {
   Image,
   SafeAreaView,
   Platform,
+  FlatList,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -28,7 +29,6 @@ import {Search} from '../../components/SearchInput';
 import {Reminder} from '../../components/Reminder';
 import {RecentList} from '../../components/Recents';
 import {getElevation} from '../../utils/utils';
-import {FlatList} from 'react-native-gesture-handler';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 

apps/mobile/src/views/Lists/index.js

@@ -0,0 +1,64 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Lists = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Lists
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <ListItem />
+    </SafeAreaView>
+  );
+};
+
+Lists.navigationOptions = {
+  header: null,
+};
+
+export default Lists;

apps/mobile/src/views/Reminders/index.js

@@ -0,0 +1,63 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Reminders = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Reminders
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <Reminder invert={true} />
+    </SafeAreaView>
+  );
+};
+
+Reminders.navigationOptions = {
+  header: null,
+};
+
+export default Reminders;