Images Shadow on loading React Native - react-native

Question

I am working with React native component FlatList there is actually two FlatList one for the dynamic content of Images and the other is using static data. The problem is when i loads that screen static data is loads initially and after that dynamic content loads but when static data loads it occupies the area of dynamic content and when dynamic images are loads they occupy there position and static data stretch to bottom i want to set a position for dynamic data until it loads the area where it will be shown it should be shadow type or something loading skeleton i don't wants that the other FlatList occupy the space of Images while Images are on Loading state.
<FlatList
data={newMovies}
renderItem={({ item, index }) => {
if (index >= 10) {
return null;
}
return (
<View
><Image
resizeMode="cover"
style={{
height: Sizes.DEVICE_HEIGHT * 0.32,
width: Sizes.DEVICE_WIDTH * 0.8875,
zIndex: -100,
marginLeft: 9,
}}
source={{ uri: IMAGE_URL_PREFIX + item.backdrop ||
item.poster }}
/>
<LinearGradient
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.2 }}
locations={[0, 0.4, 0.85]}
colors={[Colors.transparent, Colors.transparent,
Colors.black]}
style={{
height: Sizes.DEVICE_HEIGHT * 0.32,
width: Sizes.DEVICE_WIDTH * 0.8875,
marginLeft: 10,
position: 'absolute',
zIndex: 10,
}}
>
<View style={Styles.horizontalImage}>
<Text style={Styles.posterName} numOfLines={1}>
{item.name}</Text>
<Text style={Styles.posterDesc}>
{item.stringAttributes}
</Text>
</View>
</LinearGradient>
</View>
);
}
}
horizontal
onEndReached={() => this.onListEndReached(this.props)}
/>
</View>
<ScrollView style={Styles.innerContainer}>
<FlatList
removeClippedSubviews={false}
data={[{ key: 'New On Netflix', id: 0 },
{ key: 'Watch With Friends', id: 1 },
{ key: 'Watch By Yourself', id: 2 },
{ key: 'Newset Movies', id: 3 },
{ key: 'Best of All Time', id: 4 },
{ key: 'Best On Netflix', id: 5 },
{ key: 'Most Conversational', id: 6 },
{ key: 'Most Rewatchable', id: 7 }]}
renderItem={({ item }) => (<List>
<ListItem style={{ marginLeft: 0 }} onPress={() => this.selection(item.key, item.id)}>
<Text style={Styles.innerheader}>{item.key}</Text>
</ListItem>
</List>)}
keyExtractor={item => item.id}
/>

Answer 1

I found a solution with defining the View around my first FlatList and assigning the with to it exactly to my image so now the other FlatList is not overlapping with it while loading.