release v3.2.2

Author: michaeldaineka

assets/images/drawer/blog.png

@@ -1,5 +1,16 @@
 # Changelog
 
+## [3.2.2]
+
+### Features
+- Add blog link to the drawer.
+- Add Blog/Login images to Pages.
+
+### Fixed
+- Fixed indents of Components page.
+- Fixed bottom nav bar on IOS devices.
+- Fixed touchable spacing of top nav Arrow/Burger button.
+
 ## [3.2.1]
 
 Update some libs

assets/images/pages/blog.png

@@ -40,8 +40,6 @@ export function loadItems(day) {
       newItems[key] = items[key];
     });
 
-    console.log(newItems);
-
     dispatch(itemsLoaded(newItems));
   };
 }

assets/images/pages/login.png

@@ -1,12 +1,14 @@
 import React from 'react';
 import { StyleSheet, View, Text, ScrollView } from 'react-native';
+import { useRoute } from '@react-navigation/native';
 
 import Icon from 'react-native-vector-icons/Entypo';
 import { colors, fonts } from '../../styles';
 
 import { Button, RadioGroup, Dropdown } from '../../components';
 
 export default function ComponentsScreen(props) {
+  const route = useRoute();
   return (
     <ScrollView
       style={styles.container}
@@ -48,55 +50,55 @@ export default function ComponentsScreen(props) {
 
         <View style={styles.demoButtonsContainer}>
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             primary
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             secondary
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             primary
             rounded
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             secondary
             rounded
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             primary
             bordered
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             secondary
             bordered
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             primary
             bordered
             rounded
             caption="Button"
             onPress={() => {}}
           />
           <Button
-            style={styles.demoButton}
+            style={[styles.demoButton, {flexBasis: '47%'}]}
             secondary
             bordered
             rounded
@@ -325,7 +327,7 @@ export default function ComponentsScreen(props) {
         </View>
 
         <Button
-          style={[styles.demoButton, { width: 200, alignSelf: 'center' }]}
+          style={[styles.demoButton, { flex: 1 }]}
           primary
           bordered
           caption="More Icons"
@@ -336,7 +338,7 @@ export default function ComponentsScreen(props) {
         <Text style={styles.componentSectionHeader}>Dropdown</Text>
 
         <Dropdown
-          style={{ width: 200, alignSelf: 'center' }}
+          style={{ width: '100%', alignSelf: 'center' }}
           onSelect={() => {}}
           items={['option 1', 'option 2']}
         />
@@ -354,14 +356,15 @@ const styles = StyleSheet.create({
   },
   componentsSection: {
     backgroundColor: colors.white,
-    padding: 15,
+    paddingHorizontal: 16,
+    paddingVertical: 24,
     marginBottom: 20,
     borderRadius: 5,
   },
   componentSectionHeader: {
     fontFamily: fonts.primaryRegular,
     color: '#686868',
-    fontSize: 20,
+    fontSize: 24,
     marginBottom: 20,
   },
   demoButtonsContainer: {
@@ -376,7 +379,8 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
+    paddingHorizontal: 3,
     marginBottom: 20,
   },
   demoButton: {

changelog.md

@@ -50,7 +50,7 @@ export default function HomeScreen({ isExtended, setIsExtended }) {
           <View style={styles.priceContainer}>
             <View style={{ flexDirection: 'row' }}>
               <Text white bold size={50} style={styles.price}>
-                {isExtended ? '$199.95' : '$49.95'}
+                {isExtended ? '$499' : '$99'}
               </Text>
             </View>
             <TouchableOpacity

src/modules/calendar/CalendarState.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, View, Image, StyleSheet } from 'react-native';
+import { Text, View, Image, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { colors } from '../../styles';
 
@@ -9,7 +9,7 @@ const Tab = createBottomTabNavigator();
 
 export default function BottomTabs() {
   return (
-    <Tab.Navigator>
+    <Tab.Navigator tabBarOptions={{style: {height: Platform.OS === 'ios' ? 90 : 50}}}>
       {tabNavigationData.map((item, idx) => (
         <Tab.Screen 
           key={`tab_item${idx+1}`}
@@ -25,8 +25,8 @@ export default function BottomTabs() {
               />
             </View>
           ),
-          tabBarLabel: ({ focused }) => <Text style={{ fontSize: 12, color: focused ? colors.primary : colors.gray }}>{item.name}</Text>
-        }} 
+          tabBarLabel: ({ focused }) => <Text style={{ fontSize: 12, color: focused ? colors.primary : colors.gray }}>{item.name}</Text>,
+        }}
         />        
       ))}
     </Tab.Navigator>
@@ -35,12 +35,12 @@ export default function BottomTabs() {
 
 const styles = StyleSheet.create({
   tabBarItemContainer: {
-    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     borderBottomWidth: 2,
     borderBottomColor: colors.white,
     paddingHorizontal: 10,
+    bottom: Platform.OS === 'ios' ? -5 : 0,
   },
   tabBarIcon: {
     width: 23,
@@ -49,4 +49,4 @@ const styles = StyleSheet.create({
   tabBarIconFocused: {
     tintColor: colors.primary,
   },
-});
+});

src/modules/components/ComponentsView.js

@@ -15,6 +15,7 @@ const iconGrids = require('../../../assets/images/drawer/grids.png');
 const iconPages = require('../../../assets/images/drawer/pages.png');
 const iconComponents = require('../../../assets/images/drawer/components.png');
 const iconSettings = require('../../../assets/images/drawer/settings.png');
+const iconBlog = require('../../../assets/images/drawer/blog.png')
 
 const drawerData = [
   {
@@ -63,15 +64,28 @@ function CustomDrawerContent(props) {
               style={styles.menuLabelFlex}>
               <Image
                 style={{ width: 20, height: 20}}
-                source={iconHome}
+                source={item.icon}
               />
               <Text style={styles.menuTitle}>{item.name}</Text>
             </View>
           )}
           onPress={() => props.navigation.navigate(item.name)}
-        />        
+        />
       ))}
       <View style={styles.divider} />
+      <DrawerItem
+        label={() => (
+          <View style={styles.menuLabelFlex}>
+            <Image
+              style={{ width: 20, height: 20}}
+              source={iconBlog}
+            />
+            <Text style={styles.menuTitle}>Blog</Text>
+          </View>
+        )}
+        onPress={() => props.navigation.navigate('Blog')}
+      />
+      <View style={styles.divider} />
       <DrawerItem
         label={() => (
           <View style={styles.menuLabelFlex}>
@@ -89,6 +103,7 @@ function CustomDrawerContent(props) {
 }
 
 export default function App() {
+
   return (
     <Drawer.Navigator
       drawerStyle={{

src/modules/home/HomeView.js

@@ -18,7 +18,8 @@ export default function NavigatorView(props) {
       <TouchableOpacity
         onPress={() => props.navigation.toggleDrawer()}
         style={{
-          paddingLeft: 10,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
         }}
       >
         <Image
@@ -62,4 +63,4 @@ const styles = StyleSheet.create({
     width: 100 + '%',
     height: Header.height,
   },
-});
+});