CODEWITHSUNDEEP
react-nativereact-native-listviewtabbarios
toddmetheny
toddmetheny

Reputation: 4443

onPress event triggering ListView Item instead of TabBarIOS Item

I have a react-native app with a scrollable ListView of clickable items with TabBarIOS at the bottom of the screen. I'm sure you get it but attaching a screenshot in case it helps.

screen shot of page

For some reason, when I click on the TabBarIOS.Item it triggers the clickable item underneath and I'm not sure why.

Posting my render function. If anyone could tell me what I'm doing wrong or suggest something I could try I would appreciate it. Thanks in advance.

render() {

if (!this.state.loaded) {
  return this.renderLoadingView();
}

return (
  <View style={{ flex: 1 }}>
    <StatusBar
      hidden={true}
      barStyle="light-content"
    />
    <View style={styles.chapterListHeader}>
      <Text style={styles.chapterListTitleText}>Chapters</Text>
      <Image
        style={styles.clutchLogoImage}
        resizeMode="contain"
        source={require('../Assets/Images/clutchLogoSmall.png')}
      />
    </View>
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderChapter.bind(this)}
      renderFooter={this.renderFooter.bind(this)}
      style={styles.chapterList}
      onEndReached={() => {console.log('end reached')}}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
    />

    <View>
      <View>

        <TabBarIOS>
          <TabBarIOS.Item
             systemIcon="history"
             selected={this.state.selectedTab === 'tabOne'}
             onPress={() => this.setTab('tabOne')}
           ></TabBarIOS.Item>

          <TabBarIOS.Item
             systemIcon="bookmarks"
             selected={this.state.selectedTab === 'tabTwo'}
             onPress={() => this.setTab('tabTwo')}
             ></TabBarIOS.Item>

          <TabBarIOS.Item
             systemIcon="more"
             selected={this.state.selectedTab === 'tabThree'}
             onPress={() => this.setTab('tabThree')}
             ></TabBarIOS.Item>
        </TabBarIOS>
      </View>
    </View>

  </View>
);
}

Upvotes: 0

Views: 419

Answers (1)

tony
tony

Reputation: 160

Have you tried making your ListView the height of the parent View minus the height of your TabBar ? This will prevent the last item in the ListView from being hidden under the TabBar component.

Upvotes: 1

Related Questions