update release with master - v4.2.0

Author: ethanshar

android/settings.gradle

@@ -6,4 +6,4 @@ include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
 
 include ':react-native-ui-lib'
-project(':react-native-ui-lib').projectDir = new File(rootProject.projectDir, '../lib/android')
+project(':react-native-ui-lib').projectDir = new File(rootProject.projectDir, '../lib/android')

demo/src/screens/MainScreen.js

@@ -14,7 +14,7 @@ import {
   Button,
   Carousel,
   TextField,
-  Image,
+  Image
 } from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
@@ -23,7 +23,7 @@ export default class MainScreen extends Component {
     containerStyle: ViewPropTypes.style,
     renderItem: PropTypes.func,
     renderSectionTitle: PropTypes.func,
-    pageStyle: ViewPropTypes.style,
+    pageStyle: ViewPropTypes.style
   };
 
   constructor(props) {
@@ -34,7 +34,7 @@ export default class MainScreen extends Component {
 
     this.state = {
       currentPage: 0,
-      filteredNavigationData: data,
+      filteredNavigationData: data
     };
 
     this.filterExplorerScreens = _.throttle(this.filterExplorerScreens, 300);
@@ -46,7 +46,7 @@ export default class MainScreen extends Component {
       id: 'uilib.settingsButton',
       testID: 'uilib.settingsButton',
       enabled: true,
-      icon: Assets.icons.settings,
+      icon: Assets.icons.settings
     });
     Navigation.mergeOptions(props.componentId, navigationStyle);
   }
@@ -76,10 +76,10 @@ export default class MainScreen extends Component {
             id: 'uilib.searchButton',
             testID: 'uilib.searchButton',
             enabled: true,
-            icon: Assets.icons.search,
-          },
-        ],
-      },
+            icon: Assets.icons.search
+          }
+        ]
+      }
     };
   }
 
@@ -91,7 +91,7 @@ export default class MainScreen extends Component {
       case 'uilib.settingsButton':
         this.pushScreen({
           name: 'unicorn.Settings',
-          passProps: {navigationData: data, playground: this.props.playground},
+          passProps: {navigationData: data, playground: this.props.playground}
         });
         break;
       case 'uilib.searchButton':
@@ -111,11 +111,11 @@ export default class MainScreen extends Component {
         options: {
           topBar: {
             title: {
-              text: options.title,
-            },
-          },
-        },
-      },
+              text: options.title
+            }
+          }
+        }
+      }
     });
   }
 
@@ -130,14 +130,14 @@ export default class MainScreen extends Component {
               options: {
                 topBar: {
                   title: {
-                    text: options.title,
-                  },
-                },
-              },
-            },
-          },
-        ],
-      },
+                    text: options.title
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
     });
   }
 
@@ -146,8 +146,8 @@ export default class MainScreen extends Component {
     Navigation.mergeOptions(this.props.componentId, {
       topBar: {
         visible: shouldShow,
-        animate: true,
-      },
+        animate: true
+      }
     });
   };
 
@@ -190,7 +190,7 @@ export default class MainScreen extends Component {
 
     this.setState({
       filterText,
-      filteredNavigationData,
+      filteredNavigationData
     });
   }
 
@@ -208,9 +208,10 @@ export default class MainScreen extends Component {
             marginTop: Constants.isIOS ? Constants.statusBarHeight + 10 : 14,
             marginLeft: 16,
             color: ThemeManager.primaryColor,
-            width: Constants.screenWidth - 80,
+            width: Constants.screenWidth - 80
           }}
           hideUnderline
+          floatingPlaceholder={false}
         />
         <Button
           testID={'SearchButton'}
@@ -233,7 +234,7 @@ export default class MainScreen extends Component {
 
     return (
       <View centerV row paddingL-20 marginB-10>
-        <Image source={Assets.icons.chevronRight} style={{tintColor: Colors.dark10}} supportRTL />
+        <Image source={Assets.icons.chevronRight} style={{tintColor: Colors.dark10}} supportRTL/>
         <Text
           style={[item.deprecate && styles.entryTextDeprecated]}
           dark10
@@ -298,7 +299,7 @@ export default class MainScreen extends Component {
   }
 
   renderCarousel(data) {
-    const {renderItem, pageStyle} = this.props;
+    const {pageStyle} = this.props;
     const dividerTransforms = [-10, -55, -20];
     const dividerWidths = ['60%', '75%', '90%'];
     const keys = _.keys(data);
@@ -318,7 +319,7 @@ export default class MainScreen extends Component {
                 style={[
                   styles.pageTitleExtraDivider,
                   {width: dividerWidths[_.indexOf(keys, key) % dividerWidths.length]},
-                  {transform: [{translateX: dividerTransforms[_.indexOf(keys, key) % dividerTransforms.length]}]},
+                  {transform: [{translateX: dividerTransforms[_.indexOf(keys, key) % dividerTransforms.length]}]}
                 ]}
               />
               <View flex>
@@ -384,22 +385,22 @@ const styles = StyleSheet.create({
     padding: 12,
     flexWrap: 'wrap',
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   page: {
     flex: 1,
-    paddingLeft: 24,
+    paddingLeft: 24
   },
   pageTitleContainer: {
     borderBottomWidth: 1,
     paddingBottom: 4,
-    borderColor: Colors.dark60,
+    borderColor: Colors.dark60
   },
   pageTitleExtraDivider: {
-    marginTop: 5,
     // marginBottom: 22,
+    marginTop: 5
   },
   entryTextDeprecated: {
-    textDecorationLine: 'line-through',
-  },
+    textDecorationLine: 'line-through'
+  }
 });

demo/src/screens/MenuStructure.js

@@ -41,6 +41,7 @@ export const navigationData = {
       {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
       {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
+      {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'},
     ],
   },
   Form: {
@@ -51,6 +52,7 @@ export const navigationData = {
       {title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
       {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.InputsScreen'},
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
+      {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},

demo/src/screens/componentScreens/CarouselScreen.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ScrollView} from 'react-native';
 import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
 import _ from 'lodash';
 
@@ -28,7 +28,7 @@ class CarouselScreen extends Component {
 
   render() {
     return (
-      <View flex>
+      <ScrollView>
         <Text text30 margin-20>
           Carousel
         </Text>
@@ -89,7 +89,7 @@ class CarouselScreen extends Component {
             })}
           </Carousel>
         </View>
-      </View>
+      </ScrollView>
     );
   }
 }

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+
+
+export default class DateTimePickerScreen extends Component {
+  
+  render() {
+    return (
+      <View flex padding-20>
+        <Text text40 marginB-40>Date Time Picker</Text>
+        
+        <DateTimePicker 
+          title={'Date'} 
+          placeholder={'Select a date'} 
+          // value={new Date('October 13, 2014')} 
+        />
+        <DateTimePicker 
+          mode={'time'} 
+          title={'Time'} 
+          placeholder={'Select time'}
+          // value={new Date('2015-03-25T12:00:00-06:30')}
+        />
+      </View>
+    );
+  }
+}

demo/src/screens/componentScreens/FloatingButtonScreen.js

@@ -66,15 +66,34 @@ export default class FloatingButtonScreen extends Component {
             and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
             Contrary to popular belief, Lorem Ipsum is not simply random text. 
             It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+            Lorem Ipsum has been the industry standard dummy text ever since the 1500s, 
+            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
+            It has survived not only five centuries, but also the leap into electronic typesetting, 
+            remaining essentially unchanged. 
+            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
+            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            Contrary to popular belief, Lorem Ipsum is not simply random text. 
+            It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
             </Text>
           </View>
         </ScrollView>
 
         <FloatingButton
           visible={this.state.showButton}
-          button={{label: 'Approve', onPress: this.close}}
-          secondaryButton={{label: 'Not now', onPress: this.notNow}}
+          button={{
+            label: 'Approve', 
+            onPress: this.close, 
+            labelStyle: {fontWeight: '400'}
+          }}
+          secondaryButton={{
+            label: 'Not now', 
+            onPress: this.notNow, 
+            color: Colors.red30, 
+            labelStyle: {fontWeight: '400'}
+          }}
           // bottomMargin={80}
+          // hideBackgroundOverlay
         />
       </View>
     );

demo/src/screens/componentScreens/InputsScreen.js

@@ -287,7 +287,7 @@ export default class InputsScreen extends Component {
               borderWidth: 1,
               marginBottom: INPUT_SPACING,
               padding: 10,
-              borderColor: Colors.dark60,
+              borderColor: Colors.dark60
             }}
           >
             <TextArea placeholder="Write something.."/>
@@ -320,7 +320,7 @@ export default class InputsScreen extends Component {
             placeholder="Centered"
             centered
             containerStyle={{marginBottom: INPUT_SPACING}}
-            hideUnderline
+            // hideUnderline
           />
         </ScrollView>
         <KeyboardAwareInsetsView/>