v3.4.0

Author: iRoachie

README.md

@@ -63,6 +63,7 @@ import MaterialTabs from 'react-native-material-tabs';
 | scrollable        | false                    | boolean       | Option between having fixed tabs or scrollable tabs                                                     |
 | textStyle         | null                     | object(style) | Text style for tab titles                                                                               |
 | onChange          | none                     | Function      | Handler that's emitted every time the user presses a tab. You can use this to change the selected index |
+| allowFontScaling  | true                     | boolean       | Specifies whether fonts should scale to respect Text Size accessibility settings                        |
 
 ## Example
 
@@ -76,7 +77,7 @@ import MaterialTabs from 'react-native-material-tabs';
  */
 
 import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, View } from 'react-native';
+import { AppRegistry, StyleSheet, Text, SafeAreaView } from 'react-native';
 import MaterialTabs from 'react-native-material-tabs';
 
 export default class Example extends Component {
@@ -90,7 +91,7 @@ export default class Example extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <MaterialTabs
           items={['One', 'Two', 'Three', 'Four', 'Five']}
           selectedIndex={this.state.selectedTab}
@@ -100,7 +101,7 @@ export default class Example extends Component {
           activeTextColor="white"
           textStyle={{ fontFamily: 'Papyrus' }}
         />
-      </View>
+      </SafeAreaView>
     );
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-tabs",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Material Design implementation of Tabs",
   "keywords": ["react", "react-native", "material-design", "tabs"],
   "main": "./src/index.js",

src/components/MaterialTabs.js

@@ -10,6 +10,7 @@ import Tab from './Tab';
 import Indicator from './Indicator';
 
 type Props = {
+  allowFontScaling: boolean,
   selectedIndex: number,
   barColor: string,
   barHeight: number,
@@ -30,6 +31,7 @@ type State = {
 
 export default class MaterialTabs extends React.Component<Props, State> {
   static propTypes = {
+    allowFontScaling: PropTypes.bool,
     selectedIndex: PropTypes.number,
     barColor: PropTypes.string,
     activeTextColor: PropTypes.string,
@@ -42,6 +44,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
   };
 
   static defaultProps = {
+    allowFontScaling: true,
     selectedIndex: 0,
     barColor: '#13897b',
     barHeight: values.barHeight,
@@ -66,16 +69,13 @@ export default class MaterialTabs extends React.Component<Props, State> {
     );
   }
 
-  componentWillUpdate(nextProps: Props) {
-    // Recalculate views if the number of items change
-    if (nextProps.items.length !== this.props.items.length) {
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.items.length !== prevProps.items.length) {
       this.bar.measure((_, b, width) => {
         this.getTabWidth(width);
       });
     }
-  }
 
-  componentDidUpdate() {
     this.selectTab();
   }
 
@@ -164,6 +164,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
           <TabTrack barHeight={this.props.barHeight}>
             {this.props.items.map((item, idx) => (
               <Tab
+                allowFontScaling={this.props.allowFontScaling}
                 text={item}
                 key={item}
                 stretch={!this.props.scrollable}

src/components/Tab/Tab.js

@@ -5,6 +5,7 @@ import { TabText, TabBody, TabButton } from './styles';
 import type { StyleObj } from '../../lib/definitions';
 
 type TabProps = {
+  allowFontScaling: boolean,
   text: string,
   tabWidth: number,
   tabHeight: number,
@@ -17,6 +18,7 @@ type TabProps = {
 };
 
 const Tab = ({
+  allowFontScaling,
   activeTextColor,
   active,
   onPress,
@@ -32,7 +34,11 @@ const Tab = ({
   return (
     <TabButton onPress={onPress} tabWidth={tabWidth} stretch={stretch}>
       <TabBody tabHeight={tabHeight}>
-        <TabText color={color} style={textStyle}>
+        <TabText
+          color={color}
+          style={textStyle}
+          allowFontScaling={allowFontScaling}
+        >
           {text.toUpperCase()}
         </TabText>
       </TabBody>

src/index.d.ts

@@ -1,12 +1,14 @@
-// Type definitions for react-native-material-tabs
-// Project: https://github.com/iRoachie/react-native-material-tabs
-// Definitions by: Kyle Roach <https://github.com/iRoachie>
-// TypeScript Version: 3.1
-
 import * as React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
 interface TabsProps {
+  /**
+   * Specifies whether fonts should scale to respect Text Size accessibility settings
+   *
+   * Default is true
+   */
+  allowFontScaling?: boolean;
+
   /**
    * The index of current tab selected. Indexes are mapped to the items prop
    *