react native – Surprising clean house underneath FlatList on iOS

there’s a bizarre house between the FlatList and the navigation bar. it solely happens on iOS and works as anticipated on Android (no hole between them). once I put a View tag across the FlatList, it fills the hole however I am unable to scroll the listing all the best way down. the hole is about 35px tall

I’ve already checked and there isn’t any margin/padding nor something there, it is only a clean house.

<Record
   theme={theme}
   knowledge={chats
      .filter(el => el.identify.search(new RegExp(search, "i")) !== -1)
      .kind(sortChats)}
   renderItem={renderItem}
   keyExtractor={merchandise => merchandise._id}
/>

export default Record = Styled.FlatList`
  margin-top: 30px;
  padding-right: ${({ theme }) => theme.display.padding.proper};
  margin-right: -${({ theme }) => theme.display.padding.proper};
`;

const ItemContainer = Styled.View`
  flex-direction: row;
  margin-bottom: 15px;
  opacity: ${({ offline }) => (offline ? 0.5 : 1)};
`;

const ChatInfo = Styled.View`
  flex: 1;
`;