diff --git a/components/tabs/DefaultTabBar.tsx b/components/tabs/DefaultTabBar.tsx
index af8496eb2..705dec333 100644
--- a/components/tabs/DefaultTabBar.tsx
+++ b/components/tabs/DefaultTabBar.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import { Animated, Dimensions, LayoutChangeEvent, Platform, ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Animated, Dimensions, LayoutChangeEvent, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Theme, WithTheme, WithThemeStyles } from '../style';
 import { TabBarPropsType, TabData } from './PropsType';
-import defaultStyles from './Styles';
+import TabBarStyles, { TabBarStyle } from './style';
 
 const WINDOW_WIDTH = Dimensions.get('window').width;
 
-export interface PropsType extends TabBarPropsType {
+export interface PropsType
+  extends TabBarPropsType,
+    WithThemeStyles<TabBarStyle> {
   scrollValue?: any;
-  styles?: typeof defaultStyles;
   tabStyle?: ViewStyle;
   tabsContainerStyle?: ViewStyle;
   /** default: false */
@@ -34,7 +36,6 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
     tabBarInactiveTextColor: '',
     tabBarTextStyle: {},
     dynamicTabUnderlineWidth: false,
-    styles: defaultStyles,
   };
 
   _tabsMeasurements: any[] = [];
@@ -151,19 +152,25 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
     goToTab && goToTab(index);
   };
 
-  renderTab(tab: TabData, index: number, width: number, onLayoutHandler: any) {
+  renderTab = (
+    tab: TabData,
+    index: number,
+    width: number,
+    onLayoutHandler: any,
+    styles: ReturnType<typeof TabBarStyles>,
+    theme: Theme,
+  ) => {
     const {
       tabBarActiveTextColor: activeTextColor,
       tabBarInactiveTextColor: inactiveTextColor,
       tabBarTextStyle: textStyle,
       activeTab,
       renderTab,
-      styles = defaultStyles,
     } = this.props;
     const isTabActive = activeTab === index;
     const textColor = isTabActive
-      ? activeTextColor || styles.TabBar.activeTextColor
-      : inactiveTextColor || styles.TabBar.inactiveTextColor;
+      ? activeTextColor || theme.activeTextColor
+      : inactiveTextColor || theme.inactiveTextColor;
 
     return (
       <TouchableOpacity
@@ -176,7 +183,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
       >
         <View
           style={{
-            ...styles.TabBar.tab,
+            ...StyleSheet.flatten(styles.tab),
             ...this.props.tabStyle,
             width,
           }}
@@ -187,7 +194,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
             <Text
               style={{
                 color: textColor,
-                ...styles.TabBar.textStyle,
+                ...StyleSheet.flatten(styles.textStyle),
                 ...textStyle,
               }}
             >
@@ -197,7 +204,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
         </View>
       </TouchableOpacity>
     );
-  }
+  };
 
   measureTab = (page: number, event: any) => {
     const { x, width, height } = event.nativeEvent.layout;
@@ -211,82 +218,95 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
       page = 0,
       tabBarUnderlineStyle,
       tabBarBackgroundColor,
-      styles = defaultStyles,
       tabsContainerStyle,
       renderUnderline,
       keyboardShouldPersistTaps,
     } = this.props;
+    return (
+      <WithTheme styles={this.props.styles} themeStyles={TabBarStyles}>
+        {(styles, theme) => {
+          const tabUnderlineStyle = {
+            position: 'absolute',
+            bottom: 0,
+            ...StyleSheet.flatten(styles.underline),
+            ...tabBarUnderlineStyle,
+          };
 
-    const tabUnderlineStyle = {
-      position: 'absolute',
-      bottom: 0,
-      ...styles.TabBar.underline,
-      ...tabBarUnderlineStyle,
-    };
+          const dynamicTabUnderline = {
+            left: this.state._leftTabUnderline,
+            width: this.state._widthTabUnderline,
+          };
 
-    const dynamicTabUnderline = {
-      left: this.state._leftTabUnderline,
-      width: this.state._widthTabUnderline,
-    };
+          const tabWidth =
+            this.state._containerWidth / Math.min(page, tabs.length);
+          const underlineProps = {
+            style: {
+              ...tabUnderlineStyle,
+              ...dynamicTabUnderline,
+            },
+          };
 
-    const tabWidth = this.state._containerWidth / Math.min(page, tabs.length);
-    const underlineProps = {
-      style: {
-        ...tabUnderlineStyle,
-        ...dynamicTabUnderline,
-      },
-    };
+          return (
+            <View
+              style={[
+                styles.container,
 
-    return (
-      <View
-        style={{
-          ...styles.TabBar.container,
-          backgroundColor: tabBarBackgroundColor,
+                {
+                  backgroundColor: tabBarBackgroundColor,
+                },
+              ]}
+              onLayout={this.onContainerLayout}
+            >
+              <ScrollView
+                ref={(scrollView: any) => {
+                  this._scrollView = scrollView;
+                }}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                directionalLockEnabled
+                bounces={false}
+                scrollsToTop={false}
+                scrollEnabled={tabs.length > page}
+                keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                renderToHardwareTextureAndroid
+              >
+                <View
+                  style={[
+                    styles.tabs,
+
+                    {
+                      ...tabsContainerStyle,
+                      backgroundColor: tabBarBackgroundColor,
+                    },
+                  ]}
+                  onLayout={this.onTabContainerLayout}
+                >
+                  {tabs.map((name, index) => {
+                    let tab = { title: name } as TabData;
+                    if (tabs.length - 1 >= index) {
+                      tab = tabs[index];
+                    }
+                    return this.renderTab(
+                      tab,
+                      index,
+                      tabWidth,
+                      this.measureTab.bind(this, index),
+                      styles,
+                      theme,
+                    );
+                  })}
+                  {renderUnderline ? (
+                    renderUnderline(underlineProps)
+                  ) : (
+                    <Animated.View {...underlineProps} />
+                  )}
+                </View>
+              </ScrollView>
+            </View>
+          );
         }}
-        onLayout={this.onContainerLayout}
-      >
-        <ScrollView
-          ref={(scrollView: any) => {
-            this._scrollView = scrollView;
-          }}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          showsVerticalScrollIndicator={false}
-          directionalLockEnabled
-          bounces={false}
-          scrollsToTop={false}
-          scrollEnabled={tabs.length > page}
-          keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-          renderToHardwareTextureAndroid
-        >
-          <View
-            style={{
-              ...styles.TabBar.tabs,
-              ...tabsContainerStyle,
-              backgroundColor: tabBarBackgroundColor,
-            }}
-            onLayout={this.onTabContainerLayout}
-          >
-            {tabs.map((name, index) => {
-              let tab = { title: name } as TabData;
-              if (tabs.length - 1 >= index) {
-                tab = tabs[index];
-              }
-              return this.renderTab(
-                tab,
-                index,
-                tabWidth,
-                this.measureTab.bind(this, index),
-              );
-            })}
-            {renderUnderline ? (
-              renderUnderline(underlineProps)
-            ) : (
-              <Animated.View {...underlineProps} />
-            )}
-          </View>
-        </ScrollView>
-      </View>
+      </WithTheme>
     );
   }
 
diff --git a/components/tabs/PropsType.tsx b/components/tabs/PropsType.tsx
index 58a807898..2a8a2ed7a 100644
--- a/components/tabs/PropsType.tsx
+++ b/components/tabs/PropsType.tsx
@@ -1,5 +1,4 @@
 import { StyleProp, ViewStyle } from "react-native";
-import Styles from "./Styles";
 
 export interface TabData {
   key?: string;
@@ -95,6 +94,5 @@ export interface PropsType {
   /** use left instead of transform | default: false */
   useLeftInsteadTransform?: boolean;
   style?: StyleProp<ViewStyle>;
-  styles?: typeof Styles;
   keyboardShouldPersistTaps?: boolean;
 }
diff --git a/components/tabs/Styles.tsx b/components/tabs/Styles.tsx
deleted file mode 100644
index 391748bf4..000000000
--- a/components/tabs/Styles.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ViewStyle } from "react-native";
-
-export default {
-  Tabs: {
-    container: {
-      flex: 1,
-    } as ViewStyle,
-    topTabBarSplitLine: {
-      borderBottomColor: '#eee',
-      borderBottomWidth: 1,
-    } as ViewStyle,
-    bottomTabBarSplitLine: {
-      borderTopColor: '#eee',
-      borderTopWidth: 1,
-    } as ViewStyle,
-  },
-  TabBar: {
-    container: {
-      height: 43.5,
-    },
-    tabs: {
-      flex: 1,
-      flexDirection: 'row',
-      height: 43.5,
-      backgroundColor: '#fff',
-      justifyContent: 'space-around',
-    } as ViewStyle,
-    tab: {
-      height: 43.5,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: 2,
-      paddingLeft: 2,
-      flexDirection: 'row',
-    } as ViewStyle,
-    underline: {
-      height: 2,
-      backgroundColor: '#108ee9',
-    } as ViewStyle,
-    textStyle: {
-      fontSize: 15,
-    } as ViewStyle,
-    activeTextColor: '#108ee9',
-    inactiveTextColor: '#000',
-  },
-};
diff --git a/components/tabs/Tabs.tsx b/components/tabs/Tabs.tsx
index a1f55c9ee..79f28b371 100644
--- a/components/tabs/Tabs.tsx
+++ b/components/tabs/Tabs.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Animated, Dimensions, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, Platform, ScrollView, ViewPagerAndroid } from 'react-native';
+import { WithTheme, WithThemeStyles } from '../style';
 import View from '../view';
 import { DefaultTabBar } from './DefaultTabBar';
 import { PropsType, TabData } from './PropsType';
-import Styles from './Styles';
+import TabsStyles, { TabsStyle } from './style/tabs';
 
 export interface StateType {
   currentTab: number;
@@ -13,8 +14,8 @@ export interface StateType {
 }
 
 let instanceId: number = 0;
-
-export class Tabs extends React.PureComponent<PropsType, StateType> {
+export interface TabsProps extends PropsType, WithThemeStyles<TabsStyle> {}
+export class Tabs extends React.PureComponent<TabsProps, StateType> {
   static defaultProps: PropsType = {
     tabBarPosition: 'top',
     initialPage: 0,
@@ -196,7 +197,6 @@ export class Tabs extends React.PureComponent<PropsType, StateType> {
   render() {
     const {
       tabBarPosition,
-      styles = Styles,
       noRenderContent,
       keyboardShouldPersistTaps,
     } = this.props;
@@ -221,33 +221,33 @@ export class Tabs extends React.PureComponent<PropsType, StateType> {
       //     [this.props.tabBarPosition === 'overlayTop' ? 'top' : 'bottom']: 0,
       // };
     }
-
-    const content = [
-      <View
-        key="$tabbar"
-        style={
-          tabBarPosition === 'top'
-            ? styles.Tabs.topTabBarSplitLine
-            : styles.Tabs.bottomTabBarSplitLine
-        }
-      >
-        {this.renderTabBar(tabBarProps, DefaultTabBar)}
-      </View>,
-      !noRenderContent && this.renderContent(),
-    ];
-
     return (
-      <View
-        style={[
-          {
-            ...styles.Tabs.container,
-          },
-          this.props.style,
-        ]}
-        onLayout={this.handleLayout}
-      >
-        {tabBarPosition === 'top' ? content : content.reverse()}
-      </View>
+      <WithTheme styles={this.props.styles} themeStyles={TabsStyles}>
+        {styles => {
+          const content = [
+            <View
+              key="$tabbar"
+              style={
+                tabBarPosition === 'top'
+                  ? styles.topTabBarSplitLine
+                  : styles.bottomTabBarSplitLine
+              }
+            >
+              {this.renderTabBar(tabBarProps, DefaultTabBar)}
+            </View>,
+            !noRenderContent && this.renderContent(),
+          ];
+
+          return (
+            <View
+              style={[styles.container, this.props.style]}
+              onLayout={this.handleLayout}
+            >
+              {tabBarPosition === 'top' ? content : content.reverse()}
+            </View>
+          );
+        }}
+      </WithTheme>
     );
   }
   getTabIndex(props: PropsType) {
diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx
index a3657fd3f..0e05ef240 100644
--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@@ -1,47 +1,36 @@
-import variables from '../../style/themes/default';
-import * as RN from 'react-native';
-
-export default {
-  Tabs: {
-    container: {
-      flex: 1,
-    } as RN.ViewStyle,
-    topTabBarSplitLine: {
-      borderBottomColor: variables.border_color_base,
-      borderBottomWidth: 1,
-    } as RN.ViewStyle,
-    bottomTabBarSplitLine: {
-      borderTopColor: variables.border_color_base,
-      borderTopWidth: 1,
-    } as RN.ViewStyle,
-  },
-  TabBar: {
-    container: {
-    },
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { Theme } from '../../style';
+export interface TabBarStyle {
+  container: ViewStyle;
+  tabs: ViewStyle;
+  tab: ViewStyle;
+  underline: ViewStyle;
+  textStyle: TextStyle;
+}
+export default (theme: Theme) =>
+  StyleSheet.create<TabBarStyle>({
+    container: {},
     tabs: {
       flex: 1,
       flexDirection: 'row',
-      backgroundColor: variables.fill_base,
+      backgroundColor: theme.fill_base,
       justifyContent: 'space-around',
       shadowRadius: 0,
       shadowOpacity: 0,
       elevation: 0,
-    } as RN.ViewStyle,
+    },
     tab: {
-      height: variables.tabs_height,
+      height: theme.tabs_height,
       alignItems: 'center',
       justifyContent: 'center',
       padding: 0,
       flexDirection: 'row',
-    } as RN.ViewStyle,
+    },
     underline: {
       height: 2,
-      backgroundColor: variables.tabs_color,
-    } as RN.ViewStyle,
+      backgroundColor: theme.tabs_color,
+    },
     textStyle: {
       fontSize: 15,
-    } as RN.ViewStyle,
-    activeTextColor: variables.tabs_color,
-    inactiveTextColor: variables.color_text_base,
-  },
-};
+    },
+  });
diff --git a/components/tabs/style/tabs.tsx b/components/tabs/style/tabs.tsx
new file mode 100644
index 000000000..2650283f2
--- /dev/null
+++ b/components/tabs/style/tabs.tsx
@@ -0,0 +1,21 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Theme } from '../../style';
+export interface TabsStyle {
+  container: ViewStyle;
+  topTabBarSplitLine: ViewStyle;
+  bottomTabBarSplitLine: ViewStyle;
+}
+export default (theme: Theme) =>
+  StyleSheet.create<TabsStyle>({
+    container: {
+      flex: 1,
+    },
+    topTabBarSplitLine: {
+      borderBottomColor: theme.border_color_base,
+      borderBottomWidth: 1,
+    },
+    bottomTabBarSplitLine: {
+      borderTopColor: theme.border_color_base,
+      borderTopWidth: 1,
+    },
+  });