Position of `ListEmptyComponent`

[pedrobern]

Position of `ListEmptyComponent`

[alexpchin]

Can we perhaps resolve this using flexGrow: 1 instead of using minHeight?

Example, removing the calculated containerHeight from props, not updated in CollapsibleTabView.

export const AnimatedContacts = React.forwardRef<
  any,
  React.PropsWithoutRef<CollapsibleScenePropsAndRef>
>(({ contentContainerStyle, ...rest }, ref) => {
  const [isRefreshing, startRefreshing] = useRefresh();

  const contentContainerStyleProp = {
    paddingTop: contentContainerStyle.paddingTop || 0,
    flexGrow: 1,
  };

  return (
    <Animated.FlatList
      ref={ref}
      data={CONTACTS}
      keyExtractor={(_, i) => String(i)}
      renderItem={renderItem}
      ItemSeparatorComponent={ItemSeparator}
      ListEmptyComponent={ListEmptyComponent}
      refreshing={isRefreshing}
      onRefresh={startRefreshing}
      contentContainerStyle={contentContainerStyleProp}
      {...rest}
    />
  );
});

Gives:

[PedroBern]

@alexpchin I'm not with the project open right now, I will check it later, but I think removing the minHeight will re-introduce a bug in case of the content being smaller than the screen height (#8). Can you check this by adding the same contentContainerStyleProp to the SmallContentExample ?

[alexpchin]

@PedroBern Yes, you are correct. It does create a gap at the top when scrolling between tabs. I will look into it further now.

[PedroBern]

@alexpchin check out the #22 preview, please let me know if it is working for you or if you have something to add. When you say it's ok I will merge and release 🚀

expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-22

[alexpchin]

@PedroBern is the man. 🚀

[PedroBern]

released in v1.4.1 🚀