zbtang / React-Native-ViewPager

ViewPager and Indicator component for react-native on both android and ios.
950 stars 276 forks source link

How to show page indicator top of the view #137

Open ashanjayasundara opened 6 years ago

ashanjayasundara commented 6 years ago

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

beeglebug commented 6 years ago

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 commented 6 years ago

@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 commented 5 years ago

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()}