React-native-tab-view: TabBar Ripple flows outside of tabs

[zachdixon]

Expected behaviour

Ripple on Android should not flow outside of buttons

Actual behaviour

Ripple flows outside of buttons/Tabs

Code sample, screenshots

const Notes = ({ notes, styles }) => {
  return (
    <View style={styles.notesWrapper}>
      <Text style={styles.notesText}>{notes || "No notes"}</Text>
    </View>
  );
};

@inject("themeStore")
@observer
class NotesTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [{ key: "1", title: "Business" }, { key: "2", title: "Campaign" }]
    };
  }
  _handleIndexChange = index => this.setState({ index });
  _renderHeader = props => (
    <TabBar
      pressColor={
        this.props.themeStore.theme === "light" ? (
          Colors.secondary
        ) : (
          Colors.primary
        )
      }
      style={{ backgroundColor: "rgba(0,0,0,0)" }}
      indicatorStyle={{ backgroundColor: Colors.primary }}
      labelStyle={{
        color:
          this.props.themeStore.theme === "light"
            ? Colors.secondary
            : Colors.primary
      }}
      {...props}
    />
  );
  _renderScene = ({ route }) => {
    switch (route.key) {
      case "1":
        return (
          <Notes notes={this.props.businessNotes} styles={this.props.styles} />
        );
      case "2":
        return (
          <Notes notes={this.props.campaignNotes} styles={this.props.styles} />
        );
      default:
        return null;
    }
  };
  render() {
    return (
      <TabViewAnimated
        style={{ flex: 1 }}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        renderPager={props => <TabViewPagerScroll {...props} />}
        onIndexChange={this._handleIndexChange}
      />
    );
  }
}

What have you tried

I've tried putting overflow:hidden on everything I can think of, and I basically copied the example. I loaded the example in Expo and it works fine though.

[satya164]

The ripple effect needs a background color to be clipped. So instead of setting the background color to transparent, you can try setting it to #1D213A and the ripple will get cut off.

[agzuniverse]

Is there a way to cut off the ripple effect while having the background color as transparent?

[satya164]

Set a border maybe.

[agzuniverse]

Thanks, setting a border with width 0 worked.

[ankitsehgal94]

Hey @agzuniverse,
Where did you set border width 0 ?

[chramos]

I solved my problem on android this way:

renderLabel={({ route, focused }) => (
   <View style={{ flexWrap: "wrap-reverse" }}>
      // YOUR CODE
   </View>