Support for FlatList

[pi0trpietruszewski]

Support for FlatList

• I'm submitting a ...

  • bug report
  • feature request
  • support request

• If bug, used module version

  0.4.0

• What is the current behavior?
  -On IOS, FlatList sometimes stuck, and user is unable to scroll down.
  -On Android FlatList is scrollable without Header moving.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

• Open example
• Select Quiz

• Solution Idea
  For non tabbed components we can try to detect FlatList and replace ScrollableTabView to React.cloneElement() cloned FlatList. But no idea what we can do with TabbedHeader.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

IOS	Android

[phwed]

I am facing the same issue currently is there a way to resolve this?

[phwed]

I am facing the same issue currently is there a way to resolve this?

never mind i solved it by adding scrollEnabled={false} to the flatlist and moving my scroll logic to the Header as suggested

[SvenNussgruber]

@phwed Do you mind sharing how exactly you implemented the scroll logic in the Header? I'm trying to have a top text that disappears, a search bar underneath that stays stickied, and a sectionList underneath that but can't get it working properly.

[phwed]

@SvenNussgruber
You can override the components with animated views as shown here

const CutomHeaderScreen = () => {

  const renderHeader = () => {
    const opacity = scrollY.y.interpolate({
      inputRange: [0, 60, 90],
      outputRange: [0, 0, 1],
      extrapolate: 'clamp',
    })

    return (
      <View
        style={styles.headerCotainer}>
        <View style={styles.headerWrapper}>
          <TouchableOpacity onPress={() => {}>
            <Image
              style={styles.headerImage}
              resizeMode="contain"
              source={{
                uri: 'https://close.png',
              }}
            />
          </TouchableOpacity>
          <Animated.View style={{ opacity }}>
            <Text
              style={styles.headerText}>
              Baby Yoda
            </Text>
          </Animated.View>
        </View>
      </View>
    )
  }

  return (
    <StickyParallaxHeader
      headerType="TabbedHeader"
      header={renderHeader}
      scrollEvent={event(
        [{ nativeEvent: { contentOffset: { y: scrollY.y } } }],
        { useNativeDriver: false }
      )}
    />
  )
}

so u can basically add your own animated opacity style to handle the top text that appears with respect to the animated scroll value.

link to docs::
https://github.com/netguru/sticky-parallax-header/blob/master/docs/TABBEDHEADER.MD

[mateusz1913]

FlatList, SectionList & custom scroll components are supported in version 1.0.x