v0.8.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "galio-framework",
   "main": "src/index.js",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "files": [
     "src/"
   ],

src/Avatar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, StyleSheet, Image, ViewPropTypes } from 'react-native';
+import { View, Text, StyleSheet, Image } from 'react-native';
 import PropTypes from 'prop-types';
 import { withGalio } from 'theme';
 
@@ -87,12 +87,14 @@ Avatar.propTypes = {
   backgroundColor: PropTypes.string,
   imageProps: PropTypes.object,
   imageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.number]),
-  containerStyle: ViewPropTypes.style,
+  containerStyle: PropTypes.shape({
+    style: PropTypes.any,
+  }),
   styles: PropTypes.any,
   theme: PropTypes.any,
 };
 
-const styles = theme =>
+const styles = (theme) =>
   StyleSheet.create({
     labelContainerWithInset: {
       top: 1,

src/Block.js

@@ -93,7 +93,7 @@ Block.propTypes = {
   card: PropTypes.bool,
   left: PropTypes.bool,
   shadow: PropTypes.bool,
-  space: PropTypes.string,
+  space: PropTypes.oneOf(['between', 'around', 'evenly' ]),
   fluid: PropTypes.bool,
   height: PropTypes.number,
   width: PropTypes.number,

src/NavBar.js

@@ -30,12 +30,14 @@ function NavBar({
   theme,
   title,
   titleStyle,
+  titleNumberOfLines,
+  titleTextProps,
 }) {
   function renderTitle() {
     if (typeof title === 'string') {
       return (
         <View style={styles.title}>
-          <Text style={[styles.titleTextStyle, titleStyle]}>{title}</Text>
+          <Text numberOfLines={titleNumberOfLines || 1} style={[styles.titleTextStyle, titleStyle]} {...titleTextProps}>{title}</Text>
         </View>
       );
     }

src/Toast.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { Dimensions, StyleSheet, Animated, ViewPropTypes } from 'react-native';
+import { Dimensions, StyleSheet, Animated } from 'react-native';
 import PropTypes from 'prop-types';
-// galio components
+// Galio components
 import Text from './atomic/ions/Text';
 import GalioTheme, { withGalio } from './theme';
 
@@ -20,10 +20,15 @@ class Toast extends Component {
       PropTypes.string,
     ]),
     round: PropTypes.bool,
-    style: ViewPropTypes.style,
-    textStyle: ViewPropTypes.style,
+    style: PropTypes.shape({
+      style: PropTypes.any,
+    }),
+    textStyle: PropTypes.shape({
+      style: PropTypes.any,
+    }),
     styles: PropTypes.any,
     theme: PropTypes.any,
+    useNativeDriver: PropTypes.bool
   };
 
   static defaultProps = {
@@ -37,6 +42,7 @@ class Toast extends Component {
     textStyle: null,
     styles: {},
     theme: GalioTheme,
+    useNativeDriver: true
   };
 
   state = {
@@ -49,7 +55,7 @@ class Toast extends Component {
   visibilityTimeout;
 
   componentDidUpdate(prevProps) {
-    const { isShow, fadeInDuration, fadeOutDuration } = this.props;
+    const { isShow, fadeInDuration, fadeOutDuration, useNativeDriver } = this.props;
     const { isShow: prevIsShow } = prevProps;
     const { fadeAnim } = this.state;
 
@@ -59,13 +65,15 @@ class Toast extends Component {
       this.animation = Animated.timing(fadeAnim, {
         toValue: 1,
         duration: fadeInDuration,
+        useNativeDriver,
       }).start();
     }
 
     if (prevIsShow && !isShow) {
       this.animation = Animated.timing(fadeAnim, {
         toValue: 0,
         duration: fadeOutDuration,
+        useNativeDriver,
       }).start();
 
       this.visibilityTimeout = setTimeout(() => {
@@ -84,7 +92,7 @@ class Toast extends Component {
     }
   }
 
-  setVisibility = isShow => this.setState({ isShow });
+  setVisibility = (isShow) => this.setState({ isShow });
 
   getTopPosition = () => {
     const { positionIndicator, positionOffset } = this.props;
@@ -135,7 +143,7 @@ class Toast extends Component {
   }
 }
 
-const styles = theme =>
+const styles = (theme) =>
   StyleSheet.create({
     toast: {
       padding: theme.SIZES.BASE,

src/atomic/atoms/Button.js

@@ -19,6 +19,7 @@ function Button({
     iconColor,
     loading,
     loadingSize,
+    loadingColor,
     lowercase,
     onlyIcon,
     opacity,
@@ -90,7 +91,7 @@ function Button({
     }
 
     if (loading) {
-      content = <ActivityIndicator size={loadingSize} color={theme.COLORS.WHITE} />;
+      content = <ActivityIndicator size={loadingSize} color={loadingColor || theme.COLORS.WHITE} />;
     }
 
     return content;