Place the tabs on top of the IndicatorViewPager

[zbtang]

Place the tabs on top of the IndicatorViewPager

[zbtang]

Yes, you can.
Here is an example:

import React, {Component} from 'react';
import {StyleSheet, View,} from 'react-native';
import {IndicatorViewPager, PagerTitleIndicator} from 'rn-viewpager';

export default class TestPage extends Component {
    render() {
        return (
            <IndicatorViewPager
                style={{flex: 1}}
                indicator={this._renderTabIndicator()}
                pagerStyle={{marginTop: 50}}
            >
                <View style={{backgroundColor: 'red'}}/>
                <View style={{backgroundColor: 'blue'}}/>
                <View style={{backgroundColor: 'yellow'}}/>
            </IndicatorViewPager>
        );
    }

    _renderTabIndicator() {
        return (
            <PagerTitleIndicator
                style={styles.indicatorContainer}
                itemTextStyle={styles.indicatorText}
                selectedItemTextStyle={styles.indicatorSelectedText}
                titles={['red', 'blue', 'yellow']}
            />
        );
    }
}
const styles = StyleSheet.create({
    indicatorContainer: {
        height: 50,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
    },
    indicatorText: {color: 'green'},
    indicatorSelectedText: {
        color: 'orange'
    }
});

[akhileshsinha06]

<IndicatorViewPager
style={{flex:1, flexDirection:'column-reverse'}}
indicator={this._renderTabIndicator()}>
<======= Your Views Here ========>

[traderdata]

I tried your example and it worked but all tabs are aligned on left. Any way to have them eaqually spaced horizontally?

Thanks

[purushottamparajuli]

the navigation freezes when i impliment it like you said

[martin-braun]

<IndicatorViewPager
style={{flex:1, flexDirection:'column-reverse'}}
indicator={this._renderTabIndicator()}>
<======= Your Views Here ========>

This looks cleaner, well done, love it