Unable to scroll TabViewAnimated view

Question

I am using TabViewAnimated from react-native-tab-view with three scenes. While loading it shows scroll bar for child scenes but it disappear soon and shows the scroll of TabViewAnimated which is not scrolling.

My render function as follows:

render() {
  return (
    <View style={{backgroundColor: "#fff"}}>
    <StickyHeaderFooterScrollView makeScrollable={true} 
      renderStickyHeader={() => (
        <View>
          <Text> My Title </Text>
        </View>
      )}
    >
      <View style={{backgroundColor: "#fff", height: Dimensions.get('window').height, flex: 1}}>
        <TabViewAnimated
          navigationState={this.state}
          renderScene={this._renderScene}
          animationEnabled={true}
          swipeEnabled={true}
          renderHeader={this._renderHeader}
          onIndexChange={index => this.setState({ index })}
          initialLayout={initialLayout}
        />
      </View>
    </StickyHeaderFooterScrollView>
  </View>
  );
}

initailLayout value: const initialLayout = { height: 0, width: Dimensions.get('window').width, };

And the _renderScene function is

renderScene = ({ route }) => {
  let auth = this.props.navigation.state.params.auth;
  switch (route.key) {
    case 'tab1':
      return <Tabs1 />;
    case 'tab2':
      return <Tab2 />;
    case 'tab3':
      return <Tab3 />;
    default:
      return null;
  }
};

Child scene tab be like,

<View style={{flex: 1, backgroundColor:"#EEE"}}>
  <View style={{margin:'3%'}}>
    <FlatList
      vertical
      data={data}
      renderItem={({ item: rowData }) => {
        return (
          <View >
            <View style={{width: "20%"}}>
              <Image source={{uri: rowData.photo}} />
            </View>
            <View style={{width: "60%"}}>
              <Text> {rowData.name} </Text>
            </View>
            <View style={{width: "20%"}}>
              <Text> {rowData.mail} </Text>
            </View>
          </View>
        );
      }}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(item, index) => index.toString()}
    /> 
  </View>
</View>

what I am missing here?

Unable to scroll TabViewAnimated view

0 Answers0