diff --git a/ant-design-analysis b/ant-design-analysis
index d608093c02..ed52d639ba 160000
--- a/ant-design-analysis
+++ b/ant-design-analysis
@@ -1 +1 @@
-Subproject commit d608093c02342a41700fa676636923ba1a938603
+Subproject commit ed52d639ba504abcac143124b437cc37fa1e0e5a
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
index 0ad4de3f54..28921be52d 100644
--- a/components/accordion/index.tsx
+++ b/components/accordion/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import RNAccordion from 'react-native-collapsible/Accordion';
 import AccordionProps from './PropsType';
-import AccordionStyle from './style/index';
+import AccordionStyle, { TAccordionStyle } from './style/index';
 import Icon from '../icon';
 
 export interface AccordionPanelProps {
@@ -11,13 +11,17 @@ export interface AccordionPanelProps {
   header: any;
 }
 
+export interface AccordionNativeProps extends AccordionProps {
+  styles?: TAccordionStyle;
+}
+
 class AccordionPanel extends React.Component<AccordionPanelProps, any> {
   render() {
     return null;
   }
 }
 
-class Accordion extends React.Component<AccordionProps, any> {
+class Accordion extends React.Component<AccordionNativeProps, any> {
   static defaultProps = {
     styles: AccordionStyle,
   };
@@ -25,7 +29,7 @@ class Accordion extends React.Component<AccordionProps, any> {
   static Panel: any;
 
   _renderHeader = (section, _, isActive) => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={[styles.header, section.style]}>
         {
@@ -43,7 +47,7 @@ class Accordion extends React.Component<AccordionProps, any> {
   }
 
   _renderContent = (section) => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return React.isValidElement(section.content) ? section.content : (
       <View style={styles.content}>
         <Text style={styles.contentText}>{section.content}</Text>
@@ -65,7 +69,9 @@ class Accordion extends React.Component<AccordionProps, any> {
   }
 
   render() {
-    const { children, style, styles, defaultActiveKey, activeKey } = this.props;
+    const { children, style, defaultActiveKey, activeKey } = this.props;
+    const styles = this.props.styles!;
+
     let defaultActiveSection;
     let activeSection;
     const headers = React.Children.map(children, (child: any, index) => {
diff --git a/components/accordion/style/index.tsx b/components/accordion/style/index.tsx
index f80da6378e..fd6434ce26 100644
--- a/components/accordion/style/index.tsx
+++ b/components/accordion/style/index.tsx
@@ -1,7 +1,17 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface TAccordionStyle {
+  container: ViewStyle;
+  header: ViewStyle;
+  arrow: ViewStyle;
+  headerWrap: ViewStyle;
+  headerText: TextStyle;
+  content: ViewStyle;
+  contentText: TextStyle;
+}
+
+export default StyleSheet.create<TAccordionStyle>({
   container: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: variables.border_color_base,
diff --git a/components/action-sheet/AndroidContainer.tsx b/components/action-sheet/AndroidContainer.tsx
index f3116596a9..544cd6d8b3 100644
--- a/components/action-sheet/AndroidContainer.tsx
+++ b/components/action-sheet/AndroidContainer.tsx
@@ -46,13 +46,13 @@ class ActionSheetAndroid extends React.Component<Props, any> {
       excludedActivityTypes.map((item, index) => <View key={index}>{item}</View>)
     ) : (
       options as Array<string>).map((item, index) => (
-        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : null]}>
+        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : undefined]}>
           <TouchableHighlight
             style={[ styles.btn ]}
             underlayColor={variables.fill_tap}
             onPress={() => this.confirm(index)}
           >
-            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : null ]}>
+            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : undefined ]}>
               {item}
             </Text>
           </TouchableHighlight>
diff --git a/components/activity-indicator/index.tsx b/components/activity-indicator/index.tsx
index c86ccef087..ef0ee806b5 100644
--- a/components/activity-indicator/index.tsx
+++ b/components/activity-indicator/index.tsx
@@ -4,10 +4,14 @@ import {
   Text,
   ActivityIndicator,
 } from 'react-native';
-import style from './style';
+import style, { TActivityIndicatorStyle } from './style';
 import PropTypes from './PropsType';
 
-export default class RNActivityIndicator extends React.Component<PropTypes, any> {
+export interface ActivityIndicatorNativeProps extends PropTypes {
+  styles?: TActivityIndicatorStyle;
+}
+
+export default class RNActivityIndicator extends React.Component<ActivityIndicatorNativeProps, any> {
   static defaultProps = {
     animating: true,
     color: 'gray',
@@ -17,7 +21,7 @@ export default class RNActivityIndicator extends React.Component<PropTypes, any>
   };
 
   _renderToast() {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={[styles.container]}>
         <View style={[styles.innerContainer, { height: 89 }]}>
@@ -34,13 +38,15 @@ export default class RNActivityIndicator extends React.Component<PropTypes, any>
   }
 
   _renderSpinner() {
+    const { styles, color, size, text } = this.props;
+    const { spinner, tip } = styles!;
     return (
-      <View style={this.props.styles.spinner} >
+      <View style={spinner} >
         <ActivityIndicator
-          color={this.props.color}
-          size={this.props.size}
+          color={color}
+          size={size}
         />
-        {this.props.text && (<Text style={[this.props.styles.tip]}>{this.props.text}</Text>)}
+        {text && (<Text style={[tip]}>{text}</Text>)}
       </View>
     );
   }
diff --git a/components/activity-indicator/style/index.tsx b/components/activity-indicator/style/index.tsx
index 91089568aa..8e0a27bb5e 100644
--- a/components/activity-indicator/style/index.tsx
+++ b/components/activity-indicator/style/index.tsx
@@ -1,7 +1,15 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface TActivityIndicatorStyle {
+  container: ViewStyle;
+  innerContainer: ViewStyle;
+  wrapper: ViewStyle;
+  tip: TextStyle;
+  toast: TextStyle;
+  spinner: ViewStyle;
+}
+export default StyleSheet.create<TActivityIndicatorStyle>({
   container: {
     position: 'absolute',
     top: 0,
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 6e3741133b..185415462f 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import BadgeStyle from './style/index';
+import BadgeStyle, { TBadgeStyle } from './style/index';
 import BadgeProps from './PropsType';
 
-export default class Badge extends React.Component<BadgeProps, any> {
+export interface BadgeNativeProps extends BadgeProps {
+  styles?: TBadgeStyle;
+}
+export default class Badge extends React.Component<BadgeNativeProps, any> {
   static defaultProps = {
     size: 'small',
     overflowCount: 99,
@@ -17,7 +20,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
       styles, style,
       children, text, size, overflowCount, dot, corner, ...restProps, // todo: hot
     } = this.props;
-
+    styles = styles!;
     text = typeof text === 'number' && text > (overflowCount as number) ? `${overflowCount}+` : text;
 
     // dot mode don't need text
diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
index d86ed88abc..d7a044c620 100644
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@@ -1,8 +1,18 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
 const grid = 4;
-export default StyleSheet.create({
+export interface TBadgeStyle {
+  wrap: ViewStyle;
+  textCornerWrap: ViewStyle;
+  dot: ViewStyle;
+  dotSizelarge: ViewStyle;
+  textDom: ViewStyle;
+  textCorner: ViewStyle;
+  textCornerlarge: ViewStyle;
+  text: TextStyle;
+}
+export default StyleSheet.create<TBadgeStyle>({
   wrap: {
     flexDirection: 'row',
   },
diff --git a/components/card/index.tsx b/components/card/index.tsx
index 2d060f667f..6e0db31fbb 100644
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@@ -3,10 +3,13 @@ import { View } from 'react-native';
 import CardBody from './CardBody';
 import CardHeader from './CardHeader';
 import CardFooter from './CardFooter';
-import CardStyle from './style/index';
+import CardStyle, { ICardStyle } from './style/index';
 import { CardProps } from './PropsType';
 
-export default class Card extends React.Component<CardProps, any> {
+export interface ICardNativeProps extends CardProps {
+  styles?: ICardStyle;
+}
+export default class Card extends React.Component<ICardNativeProps, any> {
   static defaultProps = {
     style: {},
     full: false,
@@ -19,13 +22,13 @@ export default class Card extends React.Component<CardProps, any> {
 
   render() {
     const { style , styles, full, children, ...restProps } = this.props;
-    const cardStyle = full ? styles.full : {};
+    const cardStyle = full ? styles!.full : {};
     const childDom = React.Children.map(children, (child) => React.cloneElement(
         child as React.ReactElement<any>, { styles },
       ),
     );
     return (
-      <View style={[styles.card, cardStyle, style]} {...restProps}>
+      <View style={[styles!.card, cardStyle, style]} {...restProps}>
         {childDom}
       </View>
     );
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
index ff2a353e33..f08de2b99a 100644
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@@ -1,7 +1,20 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface ICardStyle {
+  card: ViewStyle;
+  full: ViewStyle;
+  headerWrap: ViewStyle;
+  headerTitle: ViewStyle;
+  headerImage: ImageStyle;
+  headerContent: TextStyle;
+  headerExtra: TextStyle;
+  body: ViewStyle;
+  footerWrap: ViewStyle;
+  footerContent: TextStyle;
+  footerExtra: TextStyle;
+}
+export default StyleSheet.create<ICardStyle>({
   card: {
     borderWidth: variables.border_width_md,
     borderColor: variables.border_color_base,
diff --git a/components/checkbox/AgreeItem.tsx b/components/checkbox/AgreeItem.tsx
index e578ff340a..36dafab121 100644
--- a/components/checkbox/AgreeItem.tsx
+++ b/components/checkbox/AgreeItem.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import { View, TouchableWithoutFeedback, Text } from 'react-native';
 import Checkbox from './Checkbox';
 import { AgreeItemPropsType } from './PropsType';
-import AgreeItemstyle from './style/index';
+import AgreeItemstyle, { ICheckboxStyle } from './style/index';
 
 const refCheckbox = 'checkbox';
-export default class AgreeItem extends React.Component<AgreeItemPropsType, any> {
+
+export interface IAgreeItemNativeProps extends AgreeItemPropsType {
+  styles?: ICheckboxStyle;
+}
+export default class AgreeItem extends React.Component<IAgreeItemNativeProps, any> {
   static defaultProps = {
     styles: AgreeItemstyle,
   };
@@ -17,6 +21,7 @@ export default class AgreeItem extends React.Component<AgreeItemPropsType, any>
 
   render(): JSX.Element {
     let { style, checkboxStyle, children, disabled, checked, defaultChecked, onChange, styles } = this.props;
+    styles = styles!;
 
     let contentDom;
     if (React.isValidElement(children)) {
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index bf3f1e00f4..972047c772 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { TouchableWithoutFeedback, Image, View, Text } from 'react-native';
 import { CheckboxProps } from './PropsType';
-import CheckboxStyle from './style/index';
+import CheckboxStyle, { ICheckboxStyle } from './style/index';
 
-export default class Checkbox extends React.Component<CheckboxProps, any> {
+export interface ICheckboxNativeProps extends CheckboxProps {
+  styles?: ICheckboxStyle;
+}
+export default class Checkbox extends React.Component<ICheckboxNativeProps, any> {
   static CheckboxItem: any;
   static AgreeItem: any;
 
@@ -62,9 +65,9 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
 
     return (
       <TouchableWithoutFeedback onPress={this.handleClick}>
-        <View style={[styles.wrapper]}>
-          <Image source={imgSrc} style={[styles.icon, style]} />
-          {typeof children === 'string' ? ( <Text style={styles.iconRight}>{this.props.children}</Text>) : children}
+        <View style={[styles!.wrapper]}>
+          <Image source={imgSrc} style={[styles!.icon, style]} />
+          {typeof children === 'string' ? ( <Text style={styles!.iconRight}>{this.props.children}</Text>) : children}
         </View>
       </TouchableWithoutFeedback>
     );
diff --git a/components/checkbox/CheckboxItem.tsx b/components/checkbox/CheckboxItem.tsx
index c913924395..28bbe5b354 100644
--- a/components/checkbox/CheckboxItem.tsx
+++ b/components/checkbox/CheckboxItem.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import Checkbox from './Checkbox';
 import List from '../list/index';
 import { CheckboxItemProps } from './PropsType';
-import CheckboxItemStyle from './style/index';
+import CheckboxItemStyle, { ICheckboxStyle } from './style/index';
 
 const ListItem = List.Item;
 const refCheckbox = 'checkbox';
 
-export default class CheckboxItem extends React.Component<CheckboxItemProps, any> {
+export interface ICheckboxItemNativeProps extends CheckboxItemProps {
+  styles?: ICheckboxStyle;
+}
+export default class CheckboxItem extends React.Component<ICheckboxItemNativeProps, any> {
   static defaultProps = {
     styles: CheckboxItemStyle,
   };
@@ -23,6 +26,8 @@ export default class CheckboxItem extends React.Component<CheckboxItemProps, any
     let {
       style, checkboxStyle, defaultChecked, checked, disabled, children, extra, onChange, styles,
     } = this.props;
+    styles = styles!;
+
     const thumbEl = (
       <Checkbox
         ref={refCheckbox}
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index d46e6d7b47..dce17fb228 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -1,7 +1,15 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface ICheckboxStyle {
+  wrapper: ViewStyle;
+  icon: ViewStyle;
+  iconRight: ViewStyle;
+  agreeItem: ViewStyle;
+  agreeItemCheckbox: ViewStyle;
+  checkboxItemCheckbox: ViewStyle;
+}
+export default StyleSheet.create<ICheckboxStyle>({
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
index 767325194c..2aafb665a1 100644
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PopupDatePicker from 'rmc-date-picker/lib/Popup';
-import PopupStyles from '../picker/styles';
+import PickerStyles, { IPickerStyle } from '../picker/style';
 import { formatFn, getProps as getDefaultProps, getDefaultDate } from './utils';
 import tsPropsType from './PropsType';
 import RCDatePicker from 'rmc-date-picker/lib/DatePicker';
 import { getComponentLocale, getLocaleCode } from '../_util/getLocale';
 import zh_CN from './locale/zh_CN';
 
-export default class DatePicker extends React.Component<tsPropsType, any> {
+export interface IDatePickerNativeProps extends tsPropsType {
+  styles?: IPickerStyle;
+}
+export default class DatePicker extends React.Component<IDatePickerNativeProps, any> {
   static defaultProps = {
     triggerType: 'onClick',
-    styles: PopupStyles,
+    styles: PickerStyles,
     minuteStep: 1,
     ...getDefaultProps(),
   };
diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
index a086765207..1be91b2881 100644
--- a/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -553,7 +553,6 @@ exports[`renders ./components/image-picker/demo/basic.tsx correctly 1`] = `
         ellipsizeMode="tail"
         style={
           Array [
-            undefined,
             Object {
               "backgroundColor": "transparent",
               "color": "#888",
@@ -629,7 +628,6 @@ exports[`renders ./components/image-picker/demo/basic.tsx correctly 1`] = `
         ellipsizeMode="tail"
         style={
           Array [
-            undefined,
             Object {
               "backgroundColor": "transparent",
               "color": "#888",
diff --git a/components/image-picker/index.tsx b/components/image-picker/index.tsx
index c57ec206f5..066f3a0e81 100644
--- a/components/image-picker/index.tsx
+++ b/components/image-picker/index.tsx
@@ -10,10 +10,14 @@ import {
   // ActionSheetIOS,
 } from 'react-native';
 import { ImagePickerPropTypes } from './PropsType';
-import imagePickerStyles from './style/';
+import imagePickerStyles, { IImagePickerStyle } from './style/';
 import ImageRoll from './ImageRoll';
 
-export default class ImagePicker extends React.Component<ImagePickerPropTypes, any> {
+export interface ImagePickerNativeProps extends ImagePickerPropTypes {
+  styles?: IImagePickerStyle;
+}
+
+export default class ImagePicker extends React.Component<ImagePickerNativeProps, any> {
   static defaultProps = {
     styles: imagePickerStyles,
     onChange() {},
@@ -31,14 +35,14 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
   }
 
   onPressIn = () => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     this.plusWrap.setNativeProps({
       style: [styles.item, styles.size, styles.plusWrapHighlight],
     });
   }
 
   onPressOut = () => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     this.plusWrap.setNativeProps({
       style: [styles.item, styles.size, styles.plusWrapNormal],
     });
@@ -118,7 +122,8 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
   }
 
   render() {
-    const { styles, files = [] } = this.props;
+    const { files = [] } = this.props;
+    const styles = this.props.styles!;
     const filesView = files.map((item: any, index) => (
       <View key={index} style={[styles.item, styles.size]}>
         <Image
@@ -151,7 +156,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
             ref={conponent => this.plusWrap = conponent}
             style={[styles.item, styles.size, styles.plusWrap, styles.plusWrapNormal]}
           >
-            <Text style={[styles.plusNormal, styles.plusText]}>+</Text>
+            <Text style={[styles.plusText]}>+</Text>
           </View>
         </TouchableWithoutFeedback>
         {this.state.visible ? imageRollEl : null}
diff --git a/components/image-picker/style/index.tsx b/components/image-picker/style/index.tsx
index 0413901637..33cd691e61 100644
--- a/components/image-picker/style/index.tsx
+++ b/components/image-picker/style/index.tsx
@@ -1,7 +1,19 @@
 import varibles from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, ImageStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IImagePickerStyle {
+  container: ViewStyle;
+  size: ViewStyle;
+  item: ViewStyle;
+  image: ImageStyle;
+  closeWrap: ViewStyle;
+  closeText: TextStyle;
+  plusWrap: ViewStyle;
+  plusWrapNormal: ViewStyle;
+  plusWrapHighlight: ViewStyle;
+  plusText: TextStyle;
+}
+export default StyleSheet.create<IImagePickerStyle>({
   container: {
     flexWrap: 'wrap',
     flexDirection: 'row',
diff --git a/components/input-item/Input.web.tsx b/components/input-item/Input.web.tsx
index ce40f5e77a..3f520f0aeb 100644
--- a/components/input-item/Input.web.tsx
+++ b/components/input-item/Input.web.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import omit from 'omit.js';
 
-export interface InputProps extends React.ChangeTargetHTMLProps<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   focused?: boolean;
 }
 
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 62ad33898d..898075e312 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ViewStyle } from 'react-native';
 import Item from './ListItem';
 import { ListProps } from './PropsType';
 import listStyles from './style/index';
@@ -34,7 +34,7 @@ export default class List extends React.Component<ListProps, any> {
       {headerDom}
       <View style={styles.Body}>
         {children}
-        <View style={[styles.BodyBottomLine]}/>
+        <View style={[styles.BodyBottomLine as ViewStyle]}/>
       </View>
       {footerDom}
     </View>);
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 3e52c4dded..4102a69985 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -6,7 +6,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
 } from 'react-native';
-import modalStyle from './style/index';
+import modalStyle, { IModalStyle } from './style/index';
 import { ModalProps } from './PropsType';
 import RCModal from 'rc-dialog/lib/Modal';
 
@@ -16,7 +16,11 @@ const maxHeight = StyleSheet.create({
   },
 }).maxHeight;
 
-class AntmModal extends React.Component<ModalProps, any> {
+export interface IModalNativeProps extends ModalProps {
+  styles?: IModalStyle;
+}
+
+class AntmModal extends React.Component<IModalNativeProps, any> {
   static defaultProps = {
     visible: false,
     closable: false,
@@ -50,9 +54,11 @@ class AntmModal extends React.Component<ModalProps, any> {
   render() {
     const {
       title, closable, footer, children, style, animateAppear, maskClosable,
-      transparent, visible, onClose, bodyStyle, onAnimationEnd, styles, operation,
+      transparent, visible, onClose, bodyStyle, onAnimationEnd, operation,
     } = this.props;
 
+    const styles = this.props.styles!;
+
     let btnGroupStyle = styles.buttonGroupV;
     let horizontalFlex = {};
     if (footer && footer.length === 2 && !operation) {
diff --git a/components/modal/PromptContainer.tsx b/components/modal/PromptContainer.tsx
index 3b4a372417..bade46f956 100644
--- a/components/modal/PromptContainer.tsx
+++ b/components/modal/PromptContainer.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, Text, TextInput } from 'react-native';
 import Modal from './Modal';
-import promptStyles from './style/prompt';
+import promptStyles, { IPromptStyle } from './style/prompt';
 
 export type ButtonType = {
   text: string;
@@ -17,7 +17,7 @@ export interface PropmptContainerProps {
   defaultValue?: string;
   actions: Array<ButtonType>;
   onAnimationEnd?: (visible: boolean) => void;
-  styles?: any;
+  styles?: IPromptStyle;
 }
 
 export default class PropmptContainer extends React.Component<PropmptContainerProps, any> {
@@ -49,7 +49,8 @@ export default class PropmptContainer extends React.Component<PropmptContainerPr
   }
 
   render() {
-    const { title, onAnimationEnd, message, type, actions, styles } = this.props;
+    const { title, onAnimationEnd, message, type, actions } = this.props;
+    const styles = this.props.styles!;
     const { text, password } = this.state;
     const getArgs = function(func) {
       if (type === 'login-password') {
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index a6bd509f19..01a40c7d9f 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -1,7 +1,27 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IModalStyle {
+  container: ViewStyle;
+  wrap: ViewStyle;
+  innerContainer: ViewStyle;
+  footer: ViewStyle;
+  header: TextStyle;
+  body: ViewStyle;
+  maskClosable: ViewStyle;
+  closeWrap: ViewStyle;
+  close: TextStyle;
+  buttonGroupH: ViewStyle;
+  buttonGroupV: ViewStyle;
+  buttonWrapH: ViewStyle;
+  buttonWrapV: ViewStyle;
+  buttonText: TextStyle;
+  operationContainer: ViewStyle;
+  operationBody: ViewStyle;
+  buttonTextOperation: TextStyle;
+}
+
+export default StyleSheet.create<IModalStyle>({
   container: {
     zIndex: variables.modal_zindex,
   },
diff --git a/components/modal/style/prompt.tsx b/components/modal/style/prompt.tsx
index cb4c80b0e4..57ce069651 100644
--- a/components/modal/style/prompt.tsx
+++ b/components/modal/style/prompt.tsx
@@ -1,7 +1,16 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IPromptStyle {
+  message: TextStyle;
+  inputGroup: ViewStyle;
+  inputWrapper: ViewStyle;
+  input: TextStyle;
+  inputFirst: ViewStyle;
+  inputLast: ViewStyle;
+}
+
+export default StyleSheet.create<IPromptStyle>({
   message: {
     marginTop: variables.v_spacing_lg,
     color: variables.color_text_caption,
diff --git a/components/notice-bar/index.tsx b/components/notice-bar/index.tsx
index d953e5e1d5..dc2416b1bb 100644
--- a/components/notice-bar/index.tsx
+++ b/components/notice-bar/index.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback, Image } from 'react-native';
-import NoticeStyle from './style';
+import NoticeStyle, { INoticeBarStyle } from './style';
 import NoticeBarProps from './PropsType';
 
-export default class NoticeBar extends React.Component<NoticeBarProps, any> {
+export interface INoticeNativeProps extends NoticeBarProps {
+  styles?: INoticeBarStyle;
+}
+export default class NoticeBar extends React.Component<INoticeNativeProps, any> {
   static defaultProps = {
     mode: '',
     onClick() {},
@@ -36,7 +39,8 @@ export default class NoticeBar extends React.Component<NoticeBarProps, any> {
   }
 
   render() {
-    const { children, mode, icon, style, styles } = this.props;
+    const { children, mode, icon, style } = this.props;
+    const styles = this.props.styles!;
 
     let operationDom: any = null;
     if (mode === 'closable') {
diff --git a/components/notice-bar/style/index.tsx b/components/notice-bar/style/index.tsx
index 7b768b4262..e52a842a7f 100644
--- a/components/notice-bar/style/index.tsx
+++ b/components/notice-bar/style/index.tsx
@@ -1,7 +1,16 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface INoticeBarStyle {
+  notice: ViewStyle;
+  content: TextStyle;
+  left6: ViewStyle;
+  left15: ViewStyle;
+  close: TextStyle;
+  link: TextStyle;
+}
+
+export default StyleSheet.create<INoticeBarStyle>({
   notice: {
     backgroundColor: variables.notice_bar_fill,
     height: variables.notice_bar_height,
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
index ae1aaf2109..94279d4be4 100644
--- a/components/pagination/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
@@ -699,7 +699,7 @@ exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
               "marginHorizontal": 2.5,
               "marginVertical": 3,
             },
-            false,
+            undefined,
           ]
         }
       />
@@ -716,7 +716,7 @@ exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
               "marginHorizontal": 2.5,
               "marginVertical": 3,
             },
-            false,
+            undefined,
           ]
         }
       />
@@ -752,7 +752,7 @@ exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
               "marginHorizontal": 2.5,
               "marginVertical": 3,
             },
-            false,
+            undefined,
           ]
         }
       />
@@ -769,7 +769,7 @@ exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
               "marginHorizontal": 2.5,
               "marginVertical": 3,
             },
-            false,
+            undefined,
           ]
         }
       />
diff --git a/components/pagination/index.tsx b/components/pagination/index.tsx
index 49cdc2e745..d68a1cd235 100644
--- a/components/pagination/index.tsx
+++ b/components/pagination/index.tsx
@@ -4,11 +4,15 @@ import { View, Text } from 'react-native';
 import Button from '../button';
 import Flex from '../flex';
 import PaginationProps from './PropsType';
-import PaginationStyle from './style/index';
+import PaginationStyle, { IPaginationStyle } from './style/index';
 import { getComponentLocale } from '../_util/getLocale';
 import zh_CN from './locale/zh_CN';
 
-export default class Pagination extends React.Component<PaginationProps, any> {
+export interface IPaginationNativeProps extends PaginationProps {
+  styles?: IPaginationStyle;
+}
+
+export default class Pagination extends React.Component<IPaginationNativeProps, any> {
   static defaultProps = {
     mode: 'button',
     current: 0,
@@ -45,7 +49,9 @@ export default class Pagination extends React.Component<PaginationProps, any> {
   }
 
   render() {
-    const { styles, style, mode, total, simple } = this.props;
+    const { style, mode, total, simple } = this.props;
+    const styles = this.props.styles!;
+
     const locale = getComponentLocale(this.props, this.context, 'Pagination', () => zh_CN);
     const { prevText, nextText } = locale;
 
@@ -92,7 +98,7 @@ export default class Pagination extends React.Component<PaginationProps, any> {
         arr.push(
           <View
             key={`dot-${i}`}
-            style={[ styles.pointStyle, styles.spaceStyle, i === current && styles.pointActiveStyle ]}
+            style={[ styles.pointStyle, styles.spaceStyle, i === current ? styles.pointActiveStyle : undefined ]}
           />,
         );
       }
diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx
index 485866fe5e..10534eafd8 100644
--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@@ -1,7 +1,18 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IPaginationStyle {
+  container: ViewStyle;
+  numberStyle: ViewStyle;
+  totalStyle: TextStyle;
+  activeTextStyle: TextStyle;
+  indicatorStyle: ViewStyle;
+  pointStyle: ViewStyle;
+  pointActiveStyle: ViewStyle;
+  spaceStyle: ViewStyle;
+}
+
+export default StyleSheet.create<IPaginationStyle>({
   container: {
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/components/picker/PropsType.tsx b/components/picker/PropsType.tsx
index c41e2e6976..696f784a14 100644
--- a/components/picker/PropsType.tsx
+++ b/components/picker/PropsType.tsx
@@ -16,6 +16,7 @@ interface Props extends IPopupPickerProps {
   popupPrefixCls?: string;
   onPickerChange?: (value: CascaderValue) => void;
   /**rn only**/
+  styles?: any;
 }
 
 export default Props;
diff --git a/components/picker/index.tsx b/components/picker/index.tsx
index af9e7d7b4e..76f187a01a 100644
--- a/components/picker/index.tsx
+++ b/components/picker/index.tsx
@@ -1,8 +1,16 @@
 import AbstractPicker, { getDefaultProps } from './AbstractPicker';
-import styles from './styles';
+import pickerStyles, { IPickerStyle } from './style';
+import tsPropsType from './PropsType';
+
+export interface IPickerNativeProps extends tsPropsType {
+  styles?: IPickerStyle;
+}
 
 export default class Picker extends AbstractPicker {
-  static defaultProps = { ...getDefaultProps(), styles };
+  static defaultProps = {
+    ...getDefaultProps(),
+    styles: pickerStyles,
+  };
 
   protected popupProps = {};
 }
diff --git a/components/picker/styles.tsx b/components/picker/style/index.tsx
similarity index 68%
rename from components/picker/styles.tsx
rename to components/picker/style/index.tsx
index c2cb87b397..24a40368fd 100644
--- a/components/picker/styles.tsx
+++ b/components/picker/style/index.tsx
@@ -1,6 +1,14 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-const styles = StyleSheet.create({
+export interface IPickerStyle {
+  modal: ViewStyle;
+  header: ViewStyle;
+  headerItem: ViewStyle;
+  actionText: TextStyle;
+  title: TextStyle;
+}
+
+const styles = StyleSheet.create<IPickerStyle>({
   modal: {
     flex: 1,
     flexDirection: 'column',
diff --git a/components/picker/styles.web.tsx b/components/picker/styles.web.tsx
deleted file mode 100644
index ff8b4c5632..0000000000
--- a/components/picker/styles.web.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/progress/demo/basic.tsx b/components/progress/demo/basic.tsx
index 9e2b4c20fd..c564430b00 100644
--- a/components/progress/demo/basic.tsx
+++ b/components/progress/demo/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ViewStyle } from 'react-native';
 import { WhiteSpace, Button, Progress } from 'antd-mobile';
 
 export default class BasicProgressExample extends React.Component<any, any> {
@@ -19,7 +19,7 @@ export default class BasicProgressExample extends React.Component<any, any> {
   }
 
   render() {
-    const viewStyle = {
+    const style = {
       marginTop: 80,
       flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
     };
@@ -27,7 +27,7 @@ export default class BasicProgressExample extends React.Component<any, any> {
       <View>
         <Progress percent={90} position="fixed" />
 
-        <View style={[viewStyle]}>
+        <View style={[style as ViewStyle]}>
           <View style={{ marginRight: 10, height: 4, flex: 1 }}><Progress percent={this.state.percent} /></View>
           <Text>{this.state.percent}%</Text>
         </View>
diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx
index d13ca5beac..0b509c35fb 100644
--- a/components/radio/Radio.tsx
+++ b/components/radio/Radio.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { TouchableWithoutFeedback, Image, Text, View } from 'react-native';
 import { RadioProps } from './PropsType';
-import RadioStyle from './style/index';
+import RadioStyle, { IRadioStyle } from './style/index';
 
-export default class Radio extends React.Component<RadioProps, any> {
+export interface IRadioNativeProps extends RadioProps {
+  styles?: IRadioStyle;
+}
+export default class Radio extends React.Component<IRadioNativeProps, any> {
   static RadioItem: any;
   static defaultProps = {
     styles: RadioStyle,
@@ -40,7 +43,9 @@ export default class Radio extends React.Component<RadioProps, any> {
   }
 
   render(): JSX.Element {
-    let { style, disabled, children, styles } = this.props;
+    const { style, disabled, children } = this.props;
+    const styles = this.props.styles!;
+
     let checked = this.state.checked;
     let imgSrc = undefined as any;
     if (checked) {
diff --git a/components/radio/RadioItem.tsx b/components/radio/RadioItem.tsx
index 11e8572630..6c7471c7bd 100644
--- a/components/radio/RadioItem.tsx
+++ b/components/radio/RadioItem.tsx
@@ -3,12 +3,16 @@ import { View, Text } from 'react-native';
 import Radio from './Radio';
 import List from '../list';
 import { RadioItemProps } from './PropsType';
-import RadioItemStyle from './style/index';
+import RadioItemStyle, { IRadioStyle } from './style/index';
 
 const ListItem = List.Item;
 const refRadio = 'radio';
 
-export default class RadioItem extends React.Component<RadioItemProps, any> {
+export interface IRadioItemNativeProps extends RadioItemProps {
+  styles?: IRadioStyle;
+}
+
+export default class RadioItem extends React.Component<IRadioItemNativeProps, any> {
   static defaultProps = {
     styles: RadioItemStyle,
   };
@@ -19,7 +23,8 @@ export default class RadioItem extends React.Component<RadioItemProps, any> {
   }
 
   render() {
-    let { style, radioStyle, defaultChecked, checked, disabled, children, onChange, styles } = this.props;
+    const { style, radioStyle, defaultChecked, checked, disabled, children, onChange } = this.props;
+    const styles = this.props.styles!;
 
     let contentDom: React.ReactElement<any> | null = null;
     if (children && React.isValidElement(children)) {
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
index 873273eeab..b8337e0291 100644
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -1,7 +1,15 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IRadioStyle {
+  wrapper: ViewStyle;
+  icon: ViewStyle;
+  radioItem: ViewStyle;
+  radioItemRadio: ViewStyle;
+  radioItemContent: TextStyle;
+  radioItemContentDisable: TextStyle;
+}
+export default StyleSheet.create<IRadioStyle>({
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/components/result/index.tsx b/components/result/index.tsx
index f2f2cf63fb..9de22c6d77 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -1,11 +1,14 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-import { View, Text, Image } from 'react-native';
-import ResultStyle from './style';
+import { View, Text, Image, ImageURISource } from 'react-native';
+import ResultStyle, { IResultStyle } from './style';
 import Button from '../button';
 import ResultProps from './PropsType';
 
-export default class Result extends React.Component<ResultProps, any> {
+export interface IResultNativeProps extends ResultProps {
+  styles?: IResultStyle;
+}
+export default class Result extends React.Component<IResultNativeProps, any> {
   static defaultProps = {
     styles: ResultStyle,
     buttonType: '',
@@ -13,13 +16,18 @@ export default class Result extends React.Component<ResultProps, any> {
   };
 
   render() {
-    const { styles, style, img, imgUrl, title, message, buttonText, buttonClick, buttonType } = this.props;
+    const { style, img, imgUrl, title, message, buttonText, buttonClick, buttonType } = this.props;
+    const styles = this.props.styles!;
 
     let imgContent: any = null;
     if (img) {
       imgContent = <View style={styles.imgWrap}>{img}</View>;
     } else if (imgUrl) {
-      imgContent = <View style={styles.imgWrap}><Image source={imgUrl} style={styles.img} /></View>;
+      imgContent = (
+        <View style={styles.imgWrap}>
+          <Image source={imgUrl as ImageURISource | ImageURISource[]} style={styles.img} />
+        </View>
+      );
     }
 
     return (
diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx
index a3a173ba2c..3f1ac94d96 100644
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@@ -1,7 +1,18 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IResultStyle {
+  result: ViewStyle;
+  imgWrap: ViewStyle;
+  img: ImageStyle;
+  title: ViewStyle;
+  titleText: TextStyle;
+  message: ViewStyle;
+  messageText: TextStyle;
+  buttonWrap: ViewStyle;
+  button: ViewStyle;
+}
+export default StyleSheet.create<IResultStyle>({
   result: {
     alignItems: 'center',
     paddingVertical: variables.v_spacing_xl,
diff --git a/components/segmented-control/segmented.android.tsx b/components/segmented-control/segmented.android.tsx
index 81d7313111..c5d623eec9 100644
--- a/components/segmented-control/segmented.android.tsx
+++ b/components/segmented-control/segmented.android.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import SegmentedControlProps from './PropsType';
-import AndroidStyle from './style/';
+import AndroidStyle, { ISegmentControlStyle } from './style/';
 
-export default class SegmentedControl extends React.Component<SegmentedControlProps, any> {
+export interface ISegmentControlNativeProps extends SegmentedControlProps {
+  styles?: ISegmentControlStyle;
+}
+export default class SegmentedControl extends React.Component<ISegmentControlNativeProps, any> {
   static defaultProps = {
     selectedIndex: 0,
     disabled: false,
@@ -48,7 +51,9 @@ export default class SegmentedControl extends React.Component<SegmentedControlPr
   }
 
   render() {
-    const { style, disabled, values = [], tintColor, styles } = this.props;
+    const { style, disabled, values = [], tintColor } = this.props;
+    const styles = this.props.styles!;
+
     const selectedIndex = this.state.selectedIndex;
     const items = values.map((value, idx) => {
       let itemRadius: any = null;
diff --git a/components/segmented-control/style/index.tsx b/components/segmented-control/style/index.tsx
index 10a09628c2..a1caf6f1cd 100644
--- a/components/segmented-control/style/index.tsx
+++ b/components/segmented-control/style/index.tsx
@@ -1,7 +1,14 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface ISegmentControlStyle {
+  segment: ViewStyle;
+  item: ViewStyle;
+  itemLeftRadius: ViewStyle;
+  itemRightRadius: ViewStyle;
+  itemText: TextStyle;
+}
+export default StyleSheet.create<ISegmentControlStyle>({
   segment: {
     flexDirection: 'row',
     overflow: 'hidden',
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 8e4e5ffb22..57c9099f4a 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import RNStepsItem from './StepsItem';
 import { View } from 'react-native';
-import StepStyle from './style';
+import StepStyle, { IStepsStyle } from './style';
 
 export interface StepsProps {
   direction?: 'vertical' | 'horizon';
@@ -13,7 +13,10 @@ export interface StepsProps {
   styles?: any;
 }
 
-export default class Steps extends React.Component<StepsProps, any> {
+export interface IStepsNativeProps extends StepsProps {
+  styles?: IStepsStyle;
+}
+export default class Steps extends React.Component<IStepsNativeProps, any> {
   static Step: any;
 
   static defaultProps = {
@@ -37,7 +40,7 @@ export default class Steps extends React.Component<StepsProps, any> {
   render() {
     const children = this.props.children as any;
     const wrapView = this.props.direction === 'vertical' ? '' : 'warp_row';
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={styles[wrapView]} onLayout={(e) => {this.onLayout(e); }}>
       {
diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx
index 75bd4eb1dd..70b5b18b1e 100644
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@@ -1,8 +1,35 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
 const grid = 4;
-export default StyleSheet.create({
+
+export interface IStepsStyle {
+  head_default_s: ViewStyle;
+  head_blue_s: ViewStyle;
+  head_gray_s: ViewStyle;
+  head_red_s: ViewStyle;
+  icon_s: ViewStyle;
+
+  head_default_l: ViewStyle;
+  head_blue_l: ViewStyle;
+  head_gray_l: ViewStyle;
+  head_red_l: ViewStyle;
+  tail_default_l: ViewStyle;
+  icon_l: ViewStyle;
+
+  tail_default_s: ViewStyle;
+  tail_gray: ViewStyle;
+  tail_blue: ViewStyle;
+  tail_error: ViewStyle;
+  tail_last: ViewStyle;
+  content_s: ViewStyle;
+  content_l: ViewStyle;
+  title_s: TextStyle;
+  description_s: TextStyle;
+  title_l: TextStyle;
+  description_l: TextStyle;
+}
+export default StyleSheet.create<IStepsStyle>({
 
   head_default_s: {
     width: 18,
diff --git a/components/tab-bar/style/index.tsx b/components/tab-bar/style/index.tsx
index fec9e1393b..73195fa8a7 100644
--- a/components/tab-bar/style/index.tsx
+++ b/components/tab-bar/style/index.tsx
@@ -1,7 +1,20 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface ITabBarStyle {
+  tabbar: ViewStyle;
+  content: ViewStyle;
+  tabs: ViewStyle;
+  barItem: ViewStyle;
+  barIcon: ViewStyle;
+  barItemSelected: ViewStyle;
+  barItemTitle: TextStyle;
+  contentItem: ViewStyle;
+  contentItemSelected: ViewStyle;
+  badge: ViewStyle;
+  badgeText: TextStyle;
+}
+export default StyleSheet.create<ITabBarStyle>({
   tabbar: {
     flex: 1,
   },
diff --git a/components/tab-bar/tabbar.android.tsx b/components/tab-bar/tabbar.android.tsx
index be397bfd2a..167de69bf8 100644
--- a/components/tab-bar/tabbar.android.tsx
+++ b/components/tab-bar/tabbar.android.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import { View } from 'react-native';
 import { TabBarProps } from './PropsType';
 import TabBarItem from './TabBarItem';
-import TabBarStyle from './style/';
+import TabBarStyle, { ITabBarStyle } from './style/';
 
-class TabBar extends React.Component <TabBarProps, any> {
+export interface ITabBarNativeProps extends TabBarProps {
+  styles?: ITabBarStyle;
+}
+class TabBar extends React.Component <ITabBarNativeProps, any> {
   static defaultProps = {
     barTintColor: 'white',
     tintColor: '#108ee9',
@@ -15,7 +18,8 @@ class TabBar extends React.Component <TabBarProps, any> {
   static Item: any;
 
   getPanes(content) {
-    const { tintColor, unselectedTintColor, children, styles } = this.props;
+    const { tintColor, unselectedTintColor, children } = this.props;
+    const styles = this.props.styles!;
     // ios 规则： selected 为多个则只选中最后一个， selected 为 0 个则选中第一个;
     let selectedIndex = 0;
     children.forEach((child, idx) => {
@@ -29,7 +33,7 @@ class TabBar extends React.Component <TabBarProps, any> {
         newChildren.push(
           <View
             key={idx}
-            style={[ styles.contentItem, idx === selectedIndex ? styles.contentItemSelected : null ]}
+            style={[ styles.contentItem, idx === selectedIndex ? styles.contentItemSelected : undefined ]}
           >
             {child.props.children}
           </View>,
@@ -48,7 +52,7 @@ class TabBar extends React.Component <TabBarProps, any> {
   }
 
   render() {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     return (
       <View style={styles.tabbar}>
         <View style={styles.content}>
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 6aea0e01b0..a14dd3a0e6 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import TagStyle from './style/index';
+import TagStyle, { ITagStyle } from './style/index';
 import TagProps from './PropsType';
 
-export default class Tag extends React.Component<TagProps, any> {
+export interface ITagNativeProps extends TagProps {
+  styles?: ITagStyle;
+}
+export default class Tag extends React.Component<ITagNativeProps, any> {
   static defaultProps = {
     disabled: false,
     small: false,
@@ -59,7 +62,7 @@ export default class Tag extends React.Component<TagProps, any> {
   }
 
   onPressIn = () => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     this.closeDom.setNativeProps({
       style: [styles.close, Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid, {
         backgroundColor: '#888',
@@ -68,14 +71,15 @@ export default class Tag extends React.Component<TagProps, any> {
   }
 
   onPressOut = () => {
-    const styles = this.props.styles;
+    const styles = this.props.styles!;
     this.closeDom.setNativeProps({
       style: [styles.close, Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid],
     });
   }
 
   render() {
-    const { children, disabled, small, closable, styles, style } = this.props;
+    const { children, disabled, small, closable, style } = this.props;
+    const styles = this.props.styles!;
     const selected = this.state.selected;
 
     let wrapStyle;
diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx
index ed11789f41..08f15a53a6 100644
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@@ -1,7 +1,26 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface ITagStyle {
+  tag: ViewStyle;
+  wrap: ViewStyle;
+  wrapSmall: ViewStyle;
+  text: TextStyle;
+  textSmall: TextStyle;
+  normalWrap: ViewStyle;
+  normalText: TextStyle;
+  activeWrap: ViewStyle;
+  activeText: TextStyle;
+  disabledWrap: ViewStyle;
+  disabledText: TextStyle;
+  close: ViewStyle;
+  closeIOS: ViewStyle;
+  closeAndroid: ViewStyle;
+  closeText: TextStyle;
+  closeTransform: ViewStyle;
+}
+
+export default StyleSheet.create<ITagStyle>({
   tag: {
     borderRadius: variables.radius_sm,
     backgroundColor: 'transparent',
diff --git a/components/textarea-item/index.tsx b/components/textarea-item/index.tsx
index 80ea1002dc..73649fe4e7 100644
--- a/components/textarea-item/index.tsx
+++ b/components/textarea-item/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { View, Image, Text, TextInput, TouchableWithoutFeedback } from 'react-native';
 import variables from '../style/themes/default';
 import TextAreaItemProps from './PropsType';
-import TextAreaItemStyle from './style/index';
+import TextAreaItemStyle, { ITextareaItemStyle } from './style/index';
 import omit from 'omit.js';
 
 function fixControlledValue(value) {
@@ -13,7 +13,10 @@ function fixControlledValue(value) {
   return value;
 }
 
-export default class TextAreaItem extends React.Component<TextAreaItemProps, any> {
+export interface ITextareaItemNativeProps extends TextAreaItemProps {
+  styles?: ITextareaItemStyle;
+}
+export default class TextAreaItem extends React.Component<ITextareaItemNativeProps, any> {
   static defaultProps = {
     onChange() {
     },
@@ -67,9 +70,9 @@ export default class TextAreaItem extends React.Component<TextAreaItemProps, any
   render() {
     const { inputCount } = this.state;
     const {
-      value, defaultValue, error, clear, autoHeight, last, onErrorClick,
-      styles, style,
+      value, defaultValue, error, clear, autoHeight, last, onErrorClick, style,
     } = this.props;
+    const styles = this.props.styles!;
     const rows = this.props.rows as number;
     const count = this.props.count as number;
 
diff --git a/components/textarea-item/style/index.tsx b/components/textarea-item/style/index.tsx
index 5a7246a358..fd1bc59ed9 100644
--- a/components/textarea-item/style/index.tsx
+++ b/components/textarea-item/style/index.tsx
@@ -1,7 +1,14 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface ITextareaItemStyle {
+  container: ViewStyle;
+  input: TextStyle;
+  icon: ViewStyle;
+  errorIcon: ViewStyle;
+  count: ViewStyle;
+}
+export default StyleSheet.create<ITextareaItemStyle>({
   container: {
     marginLeft: variables.h_spacing_lg,
     borderBottomWidth: variables.border_width_sm,
diff --git a/components/toast/ToastContainer.tsx b/components/toast/ToastContainer.tsx
index 23325d8589..cf826c5b58 100644
--- a/components/toast/ToastContainer.tsx
+++ b/components/toast/ToastContainer.tsx
@@ -6,7 +6,7 @@ import {
   ActivityIndicator,
   Animated,
 } from 'react-native';
-import ToastContainerStyle from './style/';
+import ToastContainerStyle, { IToastStyle } from './style/';
 
 export interface ToastProps {
   content: string;
@@ -15,7 +15,7 @@ export interface ToastProps {
   mask?: boolean;
   type?: string;
   onAnimationEnd?: () => void;
-  styles?: any;
+  styles?: IToastStyle;
 }
 
 export default class ToastContainer extends React.Component<ToastProps, any> {
@@ -80,7 +80,8 @@ export default class ToastContainer extends React.Component<ToastProps, any> {
   }
 
   render() {
-    const { type = '', content, styles, mask } = this.props;
+    const { type = '', content, mask } = this.props;
+    const styles = this.props.styles!;
     const iconType = {
       success: require('./images/success.png'),
       fail: require('./images/fail.png'),
diff --git a/components/toast/style/index.tsx b/components/toast/style/index.tsx
index 6b9cabb2c5..80bf8fc903 100644
--- a/components/toast/style/index.tsx
+++ b/components/toast/style/index.tsx
@@ -1,7 +1,17 @@
 import variables from '../../style/themes/default';
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, ViewStyle, ImageStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface IToastStyle {
+  container: ViewStyle;
+  innerContainer: ViewStyle;
+  innerWrap: ViewStyle;
+  iconToast: ViewStyle;
+  textToast: ViewStyle;
+  content: TextStyle;
+  image: ImageStyle;
+  centering: ViewStyle;
+}
+export default StyleSheet.create<IToastStyle>({
   container: {
     position: 'absolute',
     top: Platform.OS === 'ios' ? 64 : 54,
diff --git a/package.json b/package.json
index cbe2727e11..20c449f0aa 100644
--- a/package.json
+++ b/package.json
@@ -65,9 +65,9 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react": "15.0.31",
-    "@types/react-dom": "~15.5.1",
-    "@types/react-native": "~0.42.0",
+    "@types/react": "^15.0.38",
+    "@types/react-dom": "^15.5.1",
+    "@types/react-native": "^0.46.2",
     "antd": "2.x",
     "antd-demo-jest": "^1.3.1",
     "antd-mobile-demo-data": "^0.1.1",
@@ -121,7 +121,7 @@
     "stylelint": "^7.12.0",
     "stylelint-config-standard": "^16.0.0",
     "svg-sprite-loader": "^0.3.1",
-    "typescript": "~2.3.0",
+    "typescript": "~2.4.0",
     "typescript-babel-jest": "^1.0.1",
     "webpack-visualizer-plugin": "^0.1.11"
   },