diff --git a/package.json b/package.json
index a86e4fe..b61b77c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "galio-framework",
   "main": "src/index.js",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "files": [
     "src/"
   ],
diff --git a/src/Avatar.js b/src/Avatar.js
index d331fbd..1e6fe0b 100644
--- a/src/Avatar.js
+++ b/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,
diff --git a/src/Block.js b/src/Block.js
index 19eaaf6..da038d4 100644
--- a/src/Block.js
+++ b/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,
diff --git a/src/NavBar.js b/src/NavBar.js
index 154ea6a..1df37e0 100644
--- a/src/NavBar.js
+++ b/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>
       );
     }
diff --git a/src/Toast.js b/src/Toast.js
index fc3b557..3a7c2f4 100644
--- a/src/Toast.js
+++ b/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,6 +65,7 @@ class Toast extends Component {
       this.animation = Animated.timing(fadeAnim, {
         toValue: 1,
         duration: fadeInDuration,
+        useNativeDriver,
       }).start();
     }
 
@@ -66,6 +73,7 @@ class Toast extends Component {
       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,
diff --git a/src/atomic/atoms/Button.js b/src/atomic/atoms/Button.js
index 4121ff0..9b11c9b 100644
--- a/src/atomic/atoms/Button.js
+++ b/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;
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..747700e
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,334 @@
+import React, { ReactNode, ComponentType } from 'react';
+import {
+  TouchableOpacityProps,
+  ImageStyle,
+  ViewStyle,
+  TextStyle,
+  SwitchProps as RNSwitchProps,
+  TextInputProps,
+} from 'react-native';
+
+declare module 'galio-framework' {
+  type IconFamilyType =
+    | 'Galio'
+    | 'AntDesign'
+    | 'Entypo'
+    | 'EvilIcons'
+    | 'Feather'
+    | 'FontAwesome'
+    | 'FontAwesome5'
+    | 'Fontisto'
+    | 'Foundation'
+    | 'Ionicons'
+    | 'MaterialIcons'
+    | 'MaterialCommunityIcons'
+    | 'Octicons'
+    | 'Zocial'
+    | 'SimpleLineIcons';
+
+  type BaseColorType = string;
+
+  type ButtonColorType = string;
+
+  interface BaseProps {
+    [key: string]: any;
+  }
+
+  export interface BlockProps extends BaseProps {
+    bottom?: boolean;
+    card?: boolean;
+    center?: boolean;
+    flex?: boolean | number;
+    fluid?: boolean;
+    height?: number;
+    left?: boolean;
+    middle?: boolean;
+    right?: boolean;
+    row?: boolean;
+    safe?: boolean;
+    shadow?: boolean;
+    shadowColor?: boolean;
+    space?: 'between' | 'around' | 'evenly';
+    top?: boolean;
+    width?: number;
+  }
+  export class Block extends React.Component<BlockProps> {}
+
+  export interface ButtonProps extends TouchableOpacityProps, BaseProps {
+    capitalize?: boolean;
+    color?: ButtonColorType;
+    disabled?: boolean;
+    icon?: string;
+    iconColor?: boolean | string;
+    iconFamily?: boolean | string;
+    iconSize?: number;
+    loading?: boolean;
+    loadingSize?: 'small' | 'large';
+    loadingColor?: string;
+    lowercase?: boolean;
+    onlyIcon?: boolean;
+    opacity?: number;
+    round?: boolean;
+    shadowColor?: boolean | string;
+    shadowless?: boolean;
+    size?: 'small' | 'large' | number;
+    uppercase?: boolean;
+  }
+  export class Button extends React.Component<ButtonProps> {}
+
+  export interface CardProps extends BaseProps {
+    card?: boolean;
+    shadow?: boolean;
+    borderless?: boolean;
+    image?: string;
+    imageBlockStyle?: string;
+    imageStyle?: ImageStyle;
+    avatar?: string;
+    location?: string;
+    locationColor?: boolean | string;
+    title?: string;
+    titleColor?: string;
+    caption?: string;
+    captionColor?: string;
+    footerStyle?: ViewStyle;
+  }
+  export class Card extends React.Component<CardProps> {}
+
+  export interface CheckBoxProps extends BaseProps {
+    checkboxStyle?: ViewStyle;
+    disabled?: boolean;
+    flexDirection?: ViewStyle['flexDirection'];
+    iconName?: string;
+    iconSize?: number;
+    iconFamily?: IconFamilyType;
+    image?: string;
+    imageStyle?: ImageStyle;
+    initialValue?: boolean;
+    label?: string;
+    labelStyle?: TextStyle;
+    onChange?: () => void;
+  }
+  export class CheckBox extends React.Component<CheckBoxProps> {}
+
+  export interface DeckSwiperProps extends BaseProps {
+    style?: ViewStyle;
+    components?: ReactNode[];
+    onSwipeRight?: () => void;
+    onSwipeLeft?: () => void;
+    focusedElementStyle?: ViewStyle;
+    nextElementStyle?: ViewStyle;
+  }
+  export class DeckSwiper extends React.Component<DeckSwiperProps> {}
+
+  export interface IconProps extends BaseProps {
+    name?: string;
+    family?: IconFamilyType;
+    size?: number;
+    color?: string;
+  }
+  export class Icon extends React.Component<IconProps> {}
+
+  export interface InputProps
+    extends Omit<
+        TextInputProps,
+        | 'style'
+        | 'keyboardType'
+        | 'secureTextEntry'
+        | 'placeholderTextColor'
+        | 'underlineColorAndroid'
+      >,
+      BaseProps {
+    type?: TextInputProps['keyboardType'];
+    password?: boolean;
+    label?: string;
+    bgColor?: string;
+    rounded?: boolean;
+    borderless?: boolean;
+    viewPass?: boolean;
+    icon?: string;
+    iconColor?: string;
+    family?: IconFamilyType;
+    color?: string;
+    help?: string;
+    left?: boolean;
+    right?: boolean;
+    topHelp?: boolean;
+    bottomHelp?: boolean;
+    iconSize?: number;
+  }
+  export class Input extends React.Component<InputProps> {}
+
+  export interface NavBarProps extends BaseProps {
+    back?: boolean;
+    hideLeft?: boolean;
+    hideRight?: boolean;
+    left?: ReactNode;
+    leftIconColor?: string;
+    leftIconFamily?: string;
+    leftIconName?: string;
+    leftIconSize?: number;
+    leftStyle?: ViewStyle;
+    onLeftPress?: () => void;
+    right?: ReactNode;
+    rightStyle?: ViewStyle;
+    title?: ReactNode;
+    titleNumberOfLines?: number;
+    titleStyle?: ViewStyle;
+    transparent?: boolean;
+  }
+  export class NavBar extends React.Component<NavBarProps> {}
+
+  export interface RadioProps extends BaseProps {
+    color?: string;
+    containerStyle?: ViewStyle;
+    radioOuterStyle?: ViewStyle;
+    radioInnerStyle?: ViewStyle;
+    flexDirection?: ViewStyle['flexDirection'];
+    initialValue?: boolean;
+    label?: string;
+    labelStyle?: TextStyle;
+    onChange?: () => void;
+  }
+  export class Radio extends React.Component<RadioProps> {}
+
+  export interface TextProps extends BaseProps {
+    h1?: boolean;
+    h2?: boolean;
+    h3?: boolean;
+    h4?: boolean;
+    h5?: boolean;
+    p?: boolean;
+    size?: number;
+    color?: string;
+    muted?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+  }
+  export class Text extends React.Component<TextProps> {}
+
+  export interface ToastProps extends BaseProps {
+    style?: ViewStyle;
+    children?: ReactNode;
+    isShow?: boolean;
+    positionIndicator?: 'top' | 'center' | 'bottom';
+    positionOffset?: number;
+    fadeInDuration?: number;
+    fadeOutDuration?: number;
+    color?: BaseColorType;
+    round?: boolean;
+    textStyle?: TextStyle;
+    useNativeDriver?: boolean;
+  }
+  export class Toast extends React.Component<ToastProps> {}
+
+  export interface SliderProps extends BaseProps {
+    activeColor?: string;
+    value?: number;
+    disabled?: boolean;
+    minimumValue?: number;
+    maximumValue?: number;
+    trackStyle?: ViewStyle;
+    thumbStyle?: ViewStyle;
+    step?: number;
+    onSlidingComplete?: () => void;
+    onSlidingStart?: () => void;
+    onValueChange?: () => void;
+  }
+  export class Slider extends React.Component<SliderProps> {}
+
+  export interface SwitchProps extends RNSwitchProps, BaseProps {
+    color?: BaseColorType;
+    disabled?: boolean;
+    initialValue?: boolean;
+    trackColor?: {
+      false: string;
+      true: string;
+    };
+    ios_backgroundColor?: string;
+    onChange?: () => void;
+  }
+  export class Switch extends React.Component<SwitchProps> {}
+
+  interface ThemeType {
+    SIZES?: {
+      BASE?: number;
+      FONT?: number;
+      ICON?: number;
+      OPACITY?: number;
+      BORDER_RADIUS?: number;
+      BORDER_WIDTH?: number;
+      BUTTON_WIDTH?: number;
+      BUTTON_HEIGHT?: number;
+      BUTTON_SHADOW_RADIUS?: number;
+      BLOCK_SHADOW_OPACITY?: number;
+      BLOCK_SHADOW_RADIUS?: number;
+      ANDROID_ELEVATION?: number;
+      CARD_BORDER_RADIUS?: number;
+      CARD_BORDER_WIDTH?: number;
+      CARD_WIDTH?: number;
+      CARD_MARGIN_VERTICAL?: number;
+      CARD_FOOTER_HORIZONTAL?: number;
+      CARD_FOOTER_VERTICAL?: number;
+      CARD_AVATAR_WIDTH?: number;
+      CARD_AVATAR_HEIGHT?: number;
+      CARD_AVATAR_RADIUS?: number;
+      CARD_IMAGE_HEIGHT?: number;
+      CARD_ROUND?: number;
+      CARD_ROUNDED?: number;
+      INPUT_BORDER_RADIUS?: number;
+      INPUT_BORDER_WIDTH?: number;
+      INPUT_HEIGHT?: number;
+      INPUT_HORIZONTAL?: number;
+      INPUT_TEXT?: number;
+      INPUT_LABEL_TEXT?: number;
+      INPUT_LABEL_BOTTOM?: number;
+      INPUT_HELP_TEXT?: number;
+      INPUT_ROUNDED?: number;
+      NAVBAR_HEIGHT?: number;
+      NAVBAR_VERTICAL?: number;
+      NAVBAR_TITLE_FLEX?: number;
+      NAVBAR_TITLE_HEIGHT?: number;
+      NAVBAR_TITLE_TEXT?: number;
+      NAVBAR_LEFT_FLEX?: number;
+      NAVBAR_LEFT_HEIGHT?: number;
+      NAVBAR_LEFT_MARGIN?: number;
+      NAVBAR_RIGHT_FLEX?: number;
+      NAVBAR_RIGHT_HEIGHT?: number;
+      NAVBAR_RIGHT_MARGIN?: number;
+      [key: string]: number;
+    };
+    COLORS?: {
+      FACEBOOK?: string;
+      TWITTER?: string;
+      DRIBBBLE?: string;
+      THEME?: string;
+      PRIMARY?: string;
+      INFO?: string;
+      ERROR?: string;
+      WARNING?: string;
+      INPUT?: string;
+      PLACEHOLDER?: string;
+      NAVBAR?: string;
+      BLOCK?: string;
+      ICON?: string;
+      WHITE?: string;
+      BLACK?: string;
+      GREY?: string;
+      MUTED?: string;
+      TRANSPARENT?: string;
+      NEUTRAL?: string;
+      [key: string]: string;
+    };
+  }
+  export const theme: ThemeType = {};
+  export interface GalioProviderProps extends BaseProps {
+    theme: ThemeType;
+  }
+  export class GalioProvider extends React.Component<GalioProviderProps> {}
+
+  type NamedStyles = ViewStyle | TextStyle | ImageStyle;
+  export function withGalio<T extends ComponentType<any>>(
+    Component: T,
+    styles: NamedStyles
+  ): ComponentType<any>;
+}