FlatList inside ScrollView Container in order to support large title

This is mostly an iOS issue.

I’ve been using the Grid component in the zoom sample project as an example.

I have a FlatList that I want to render inside a screen that has:

• a big title
• a search bar

To achieve that, I have it wrapped in a ScrollView per the example.

The first thing I receive is a warning:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead

Replacing the ScrollView container with a FlatList was a no-go, but admittedly I haven’t tried much else.

Back to the ScrollView: When I pull to refresh the FlatList, the wrapping ScrollView moves instead, and the refresh is never triggered.

If I attempt to attach the RefreshControl to the container ScrollView, I get some undefined behaviour.

Here’s a snippet of what I’m trying out (this is a replacement for the Colors component):

const Colors = ({colors, children, filter}) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, [loading]);

  const suffix = filter != null ? '_search' : '';
  const matchedColors = colors.filter(
    color => !filter || color.indexOf(filter.toLowerCase()) !== -1,
  );
  return (
    <NavigationContext.Consumer>
      {({stateNavigator}) => (
        <FlatList
          contentInsetAdjustmentBehavior="automatic"
          data={matchedColors}
          renderItem={({item: color}) => (
            <TouchableHighlight
              key={color}
              style={styles.color}
              underlayColor={color}
              onPress={() => {
                stateNavigator.navigate('detail', {
                  color,
                  name: color + suffix,
                  filter,
                  search: filter != null,
                });
              }}>
              <SharedElement name={color + suffix} style={{flex: 1}}>
                <View style={{backgroundColor: color, flex: 1}} />
              </SharedElement>
            </TouchableHighlight>
          )}
          keyExtractor={item => item}
          onRefresh={() => setLoading(true)}
          refreshing={loading}
        />
      )}
    </NavigationContext.Consumer>
  );
};

Is it possible to get the behaviour that I am after?

[salockhart]

Hey @grahammendick, I haven’t had a chance yet, but I should be able to in the next week or two. I’ll let you know how it goes

[grahammendick]

@salockhart did you give this a go? I’m keen to know how it worked out