How to show page indicator top of the view

[ashanjayasundara]

how can i show page dot indicator on top of the parent view currently its show on bottom of the view

[beeglebug]

you can pass a style prop with overrides for the default styling (which is position: absolute, bottom: 10)

try something along the lines of bottom: null, top: 0

[skwidz]

@beeglebug's solution didnt work for me, and caused the pager not to render.

What did work for me was passing flexDirection:'column-reverse' in as a prop

it looked like this;

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

[it16madhavanadkat]

for

<IndicatorViewPager
horizontalScroll={true}
style={{flex: 1}}
indicator={this._renderTabIndicator()}
pagerStyle={{marginTop: 50}}
onPageSelected={this.onPageSelected}
trackScroll={true}
>

where

_renderTabIndicator() {
return (
<PagerTitleIndicator
style={ {
flex: 1,
height: 50,
position: 'absolute',
top: 0,
left: 0,
right: 0,
backgroundColor: 'white'
} }
itemTextStyle={stylesd.indicatorText}
selectedItemTextStyle={stylesd.indicatorSelectedText}
titles={tabTitle}
/>
);
}

this will 100% show tab on top make sure you use

style={{flex: 1}}
indicator={this._renderTabIndicator()}