PagerTitleIndicator titles are too small in width

[nicklas669]

Hi.

I am having some issues with a PagerTitleIndicator. Previously when I used the PagerTitleIndicator with the exact same code, the titles or "tabs" took up the whole width of the screen, like on the image below:

But now the titles look like this:

Here is the source code:

      <IndicatorViewPager
        style={{
          flex: 1
        }}
        indicator={this._renderTitleIndicator()}
        ref={viewPager => (this._viewPager = viewPager)} // needed to programmatically change pages
        onPageSelected={this.onPageSelected.bind(this)}
        pagerStyle={pagerStyle}
      >
        <View style={pageContainer}>
           .....
        </View>
        <View style={pageContainer}>
           .....
        </View>
      </IndicatorViewPager>

_renderTitleIndicator() {
    return (
      <PagerTitleIndicator
        titles={["LEARN", "QUIZ"]}
        style={styles.indicatorContainer}
        selectedBorderStyle={styles.indicatorBorder}
        itemTextStyle={styles.indicatorText}
        selectedItemTextStyle={styles.indicatorSelectedText}
      />
    );
  }

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    backgroundColor: DARKBLUE,
    padding: 20
  },
  indicatorContainer: {
    height: 50,
    position: "absolute", // ew.. https://github.com/zbtang/React-Native-ViewPager/issues/18
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: INDICATORBGCOLOR
  },
  pagerStyle: {
    marginTop: 50
  },
  indicatorText: { color: WHITE },
  indicatorSelectedText: { color: LIGHTBLUE },
  indicatorBorder: { backgroundColor: LIGHTBLUE }
});

I have tried all kinds of styles and props on the ViewPager and PagerTitleIndicator but haven't found anything that helped.

We are 2 guys working on the app and we have seen this error come and go throughout the development phase. Some times it would show up right and some times wrong. But recently we updated the project to use React Native 0.51.0 and it seems that the titles show up wrong all the time now.

Thanks in advance if anyone can help!
Kinds regards, Nicklas

[calebdre]

I had this problem too: ScrollView produces this hierarchy:

ScrollView -> RCTScrollView -> RTCScrollContentView -> {YourChildViews}

RTCScrollContentView, for whatever reason, doesn't fill up all of its parent's (ScrollView) space, even though ScrollView has flex:1. I haven't tested, but I think it RCTScrollContentView fills up in such a way that having 5+ children will force it to fill up the entire space.

My solution was to give each child its down width - that forces RCTScrollContentView to fill up.

import {Dimensions} from "React-Native"

// ...

_renderTitleIndicator() {
    const titles = ["LEARN", "QUIZ"]
    const itemWidth = {"width": Dimensions.get("window").width / titles.length}

    return (
      <PagerTitleIndicator
        titles={titles}
        style={styles.indicatorContainer}
        selectedBorderStyle={styles.indicatorBorder}
        itemTextStyle={[styles.indicatorText, itemWidth]}
        selectedItemTextStyle={[styles.indicatorSelectedText, itemWidth]}
      />
    );
  }

[hasnabbas]

@nicklas669 did you find a solution for this?

[martin-braun]

_renderTitleIndicator() {
    const titles = ["LEARN", "QUIZ"]
    const itemWidth = {"width": Dimensions.get("window").width / titles.length}

    return (
      <PagerTitleIndicator
        titles={titles}
        style={styles.indicatorContainer}
        selectedBorderStyle={styles.indicatorBorder}
        itemTextStyle={[styles.indicatorText, itemWidth]}
        selectedItemTextStyle={[styles.indicatorSelectedText, itemWidth]}
      />
    );
  }

@calebdre, thanks for sharing this, it works, but it will break as soon as all tabs are larger than in width in total.