react-native-tabs <Text> as own component

TabTitleText.js

/**
 * Created by thomaskekeisen on 16/03/2017.
 */
// @formatter:off
import   I18n   from 'react-native-i18n';
import   React  from 'react';
import   Styles from '../styles/Styles';
import { Text } from 'react-native';
// @formatter:on

class TabTitleText extends React.Component {
    getStyleWithPosition(style) {
        if (this.props.position) {
            if (this.props.position == 'left') {
                style.push(Styles.stylesheet.tabBarInPageTabLeft);
            }

            if (this.props.position == 'right') {
                style.push(Styles.stylesheet.tabBarInPageTabRight);
            }
        }

        return style;
    };

    getSelectedTextStyle() {
        let style = [Styles.stylesheet.tabBarInPageTabSelected];

        return this.getStyleWithPosition(style);
    };

    getStyle() {
        if (this.props.selected) {
            return this.getSelectedTextStyle();
        }

        return this.getTextStyle();
    }

    getTextStyle() {
        let style = [Styles.stylesheet.tabBarInPageTab];

        return this.getStyleWithPosition(style);
    };

    render() {
        return (
            <Text
                name={this.props.name}
                style={ this.getStyle() }
            >
                { I18n.t(this.props.i18n || this.props.name) }
            </Text>
        );
    }
}

module.exports = TabTitleText;

usage-example.js

import TabTitleText from '../components/TabTitleText';

// ...

<Tabs selected={ this.props.tabBar.tabIndex }
      onSelect={ (tab) => {
          this.tabShouldChange(tab.props.name);
      }}
      style={ Styles.stylesheet.tabBarInPage }
>
    <TabTitleText name="map" position="left"/>
    <TabTitleText name="list" position="right"/>
</Tabs>