View is shaking by no reason on React Native iOS - react-native

Question

I have detected a weird behaviour in the RN app I'm developing. By no reason apparently, one of the components of the screen starts to shake when refresh the app. This happens both on iOS simulator and iPhone device. It does not happen every time I refresh, but most of the time, and when it happens the simulator becomes unresponsive.
Here is the GIF of what happens: https://gph.is/g/EvAqBgg
Here is the code of the screen and the shaking component:
Screen
<Container>
<SafeAreaView />
<Header>
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<MaterialIcons name="menu" size={24} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('Filter')}>
<MaterialIcons name="search" size={24} color="black" />
</TouchableOpacity>
</Header>
<FlatList
data={products}
renderItem={({ item }) => (
<ProductItem
product={item}
onPress={() => navigation.navigate('Product', { product: item })}
/>
)}
keyExtractor={(item) => item.id}
numColumns={2}
ListEmptyComponent={() => <Text>No hay elementos</Text>}
ListHeaderComponent={<HomeHeader />}
></FlatList>
<ShoppingCartButton
items={itemsInCart}
onPress={() => navigation.navigate('ShoppingCart')}
price={price}
></ShoppingCartButton>
</Container>
);
}
const Container = styled.View`
flex: 1;
align-items: center;
justify-content: center;
background-color: white;
`;
const Header = styled.View`
width: 100%;
height: 40px;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 16px;
padding-right: 16px;
`;
Shaking component
export default function ShoppingCartButton({ onPress, price, items }) {
return (
<ButtonArea>
<Container onPress={onPress}>
<CartIndicator>
<CartQuantity>{items}</CartQuantity>
</CartIndicator>
<ButtonTitle>Ver carrito</ButtonTitle>
<Price>{price} €</Price>
</Container>
<SafeAreaView />
</ButtonArea>
);
}
const ButtonArea = styled.View`
width: 100%;
padding: 16px;
border-top-width: 1px;
border-top-color: ${colors.separatorGrey};
background-color: ${colors.white};
box-shadow: 0px -4px 4px rgba(222, 222, 222, 0.2);
`;
const Container = styled.TouchableOpacity`
height: 48px;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: ${colors.mainBlue};
border-radius: 5px;
padding-left: 16px;
padding-right: 16px;
`;
const CartIndicator = styled.View`
background-color: #2c81ab;
padding: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 3px;
`;
const CartQuantity = styled.Text`
font-family: 'Medium';
color: ${colors.white};
`;
const ButtonTitle = styled.Text`
font-family: 'Medium';
color: ${colors.white};
`;
const Price = styled.Text`
font-family: 'Book';
color: ${colors.white};
`;

Answer 1

Try using https://www.npmjs.com/package/react-native-safe-area-context instead of SafeAreaView from React Native.
Another thing you can try is to set fixed height to ButtonArea component.
Can't guarantee that these will work, but it fixed the shaking issue for me.