Skip to content

Instantly share code, notes, and snippets.

@mozillo

mozillo/TabBarAndroid

Created December 22, 2015 03:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mozillo/860e31bf90c68d70c043 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mozillo/860e31bf90c68d70c043 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mozillo created this gist Dec 22, 2015.
    155 changes: 155 additions & 0 deletions TabBarAndroid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,155 @@
    import React, {
    Component,
    Navigator,
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet
    } from 'react-native';
    import assets from './assets';
    import buildStyleInterpolator from 'buildStyleInterpolator';

    export default class TabBarNavigator extends Component {

    constructor(props) {
    super(props);
    const { views } = props;
    this.routeStack = [];
    Object.keys(views).map((key) => this.routeStack.push(views[key]))

    this.state = {
    activeTab: this.routeStack[0]
    }
    }

    componentDidMount() {
    const { didFocus, willFocus } = this.props;
    this.navigator.navigationContext.addListener('didfocus', e => {
    if(typeof didfocus == 'function') {
    didFocus(e.currentTarget.currentRoute);
    }
    });
    }

    _switchTab(activeTab) {
    let stack = this.navigator.getCurrentRoutes();
    for(i in stack) {
    if(stack[i].index === activeTab.index) {
    this.navigator.jumpTo(stack[i]);
    break ;
    }
    }
    this.setState({ activeTab });
    }

    _configureScene() {
    return {
    gestures: null,
    springFriction: 26,
    springTension: 1000,
    defaultTransitionVelocity: 1,
    animationInterpolators: {
    into: buildStyleInterpolator({
    opacity: {
    from: 0,
    to: 1,
    min: 1,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 0,
    },
    }),
    out: buildStyleInterpolator({
    opacity: {
    from: 1,
    to: 0,
    min: 0,
    max: 0,
    type: 'linear',
    extrapolate: false,
    round: 0,
    },
    }),
    },
    }
    }

    _renderScene(route, navigator) {
    const { action, state } = this.props;
    let Comp = route.component;
    return (
    <Comp
    action={action}
    state={state} />
    );
    }

    render() {
    const { views, action, state } = this.props

    return (
    <Navigator
    ref={(navigator) => this.navigator = navigator}
    initialRoute={this.routeStack[4]}
    initialRouteStack={this.routeStack}
    navigationBar={(
    <View style={styles.tabbarWrapper}>

    {Object.keys(views).map((key) => {
    if(views[key].title) {
    return (
    <TouchableOpacity onPress={this._switchTab.bind(this, views[key])} activeOpacity={1} key={"tabbar.items"+key} style={styles.tabbarItem}>
    <Image source={assets[views[key].icon]} style={styles.tabbarIcon} />
    <Text style={styles.tabbarItemText}>{views[key].title}</Text>
    </TouchableOpacity>
    )
    }else {
    return (
    <TouchableOpacity onPress={this._switchTab.bind(this, views[key])} activeOpacity={1} key={"tabbar.items"+key} style={styles.tabbarItem}>
    <Image source={assets[views[key].icon]} style={styles.tabbarIconLg} />
    </TouchableOpacity>
    );
    }
    })
    }
    </View>
    )}
    configureScene={this._configureScene}
    renderScene={this._renderScene.bind(this)} />
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    },
    tabbarWrapper: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'space-between',
    borderTopWidth: 1,
    borderTopColor: '#EFEFEF',
    },
    tabbarItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
    tabbarItemText: {
    marginTop: 5,
    color: '#999999',
    fontSize: 14,
    fontWeight: '300'
    },
    tabbarIcon: {
    height: 20,
    width: 20,
    },
    tabbarIconLg: {
    height: 49,
    width: 49,
    },
    })