Footer along with Searchbar not properly shown in FlatList

Question

I have this set of components:

render() {
        return (
            <InstantSearch
                appId="29FLVJV5X9"
                apiKey="f2534ea79a28d8469f4e81d546297d39"
                indexName="prod_conferences"
                style={{ flexGrow: 1 }}>
                <Configure filters={`startDateUnix>${TODAY}`} hitsPerPage={10} />
                <SearchBox />
                <LoadingIndicator />
                <Conferences/>
            </InstantSearch>)
    }

Where <InstantSearch> is a simple <View>

My Conferences:

export default connectInfiniteHits(({ hits, hasMore, refine }) => {

  const LoadMoreFooter = connectStateResults(
    ({ searching }) =>
      !searching ? <View style={s.loadMoreButtonContainer}>
        <Divider style={s.loadMoreButtonDivider} />
        <Button transparent color={'#53acfe'} title={'Load more confs...'} onPress={() => refine()} />
      </View> : null
  );

  return (
    <FlatList
      data={hits}
      keyExtractor={(item, index) => item.objectID}
      ListFooterComponent={<LoadMoreFooter />}
      renderItem={({ item }) =>
        <ConferenceItem {...item} />
      }
    />
  );
});

And <SearchBox> is a simple <SearchBar> from RN-elements. The problem is, after I added the SearchBox, my footer is never shown, the scroll "stops" before showing the footer.

With SearchBar(not working):

Without SearchBar (working):

How can I fix that?

Thanks!

Answer 1

Method 1

Add flex: 1 to the parent view:

<InstantSearch style={{ flex: 1 }}>

In your InstantSearch, make sure you pass the style to the outermost view:

const InstantSearch = props => <View style={props.style}>...

Method 2

Move your SearchBox to the ListHeaderComponent prop of FlatList:

<FlatList ListHeaderComponent={() => <SearchBox />} ...

Method 3

Give your SearchBox the following style:

{ position: 'absolute', zIndex: 1 }

See Method 1 on how to pass it to the wrapped View. If SearchBox is from a third party module, then just wrap it with a View:

<View style={{ position: 'absolute', zIndex: 1 }}>
  <SearchBox />
</View>

Method 4

Use SectionList instead of FlatList to avoid SearchBox getting scrolled down (as is with Method 2).

<SectionList
  renderSectionHeader={SearchBox}
  sections={[{ data: hits }]}

It has a slightly different API so I changed the data shape to pass to sections prop. Further changes might be required.

EDIT

You have an extra View that you did not include in OP, and you did not move the SearchBox to renderSectionHeader. Everything on top that occupies space should be moved from RootContainer to ConferenceList:

<SectionList
  sections={groupAndSortConferences(hits)}
  renderItem={({ item }) => <ConferenceItem {...item} />}
  keyExtractor={item => item.uuid}
  ListFooterComponent={<LoadMoreFooter />}
  renderSectionHeader={() => (
    <View>
      {Platform.OS === 'ios' && <View style={{ height: 24, backgroundColor: '#FFCA04' }} />}
      <SearchBox />
    </View>
  )}
/>

The hardcoded View you added for ios to replace the status bar seems hacky though, but that's a separate problem.