Custom Component not appearing - react-native

Question

I made a custom bottom Navbar for my React-Native App which I want to stick at the bottom of the screen.
This is what it looks like
<View style={styles.NavBarBottom}>
<TouchableOpacity
onPress={() => this.activeTab("home")}>
<Text> <Icon name="bitcoin" size={30} color={ this.state.activeTab == "home" ? "#fbc02d" : "white"} /></Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.activeTab("News")}>
<Text> <Icons name="news" size={30} color={this.state.activeTab == "News" ? "#fbc02d" : "white"} /> </Text>
</TouchableOpacity>
</View>
where Styles are this
const styles = StyleSheet.create({
NavBarBottom : {
paddingTop: 8,
borderTopWidth: 2,
backgroundColor: "#005cb2",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
padding: 5,
}
})
Now this successfully works and show in case of Home Screen but on another screen when I import it, It appears only when the content is loading and afterwards it doesn't appear (attaching the GIF for the same in end). Also on the page where I am just passing the props, it doesn't appear
The code for other page would be
<View>
<Header
navigation = {this.props.navigation}
enable = "true" />
<ScrollView>
<View style={listOfCurrencies}>
{ CurrencyDisplay.map(data =>
<TouchableOpacity>
<View style={IndvidualCurrencyMain}>
<Text style={dataLong}> {data["long"]}</Text>
<Text style={dataShort}>{data["short"]}</Text>
</View>
</TouchableOpacity>)}
</View>
</ScrollView>
<BottomNavigation />
</View>
With Styles like this
const styles = StyleSheet.create({
listOfCurrencies: {
display: "flex",
flexDirection: "column",
marginBottom: 60
},
IndvidualCurrencyMain: {
backgroundColor: "white",
display: "flex",
flexDirection: "row",
height: 80,
alignItems: "center",
height: 50,
borderRadius: 10,
marginLeft: 3,
marginRight: 3,
marginTop: 5,
marginBottom: 5
},
dataLong:{
marginLeft: 3,
width: 150
},
dataShort: {
marginLeft: "48%",
marginRight: 5
},
index: {
marginLeft: 2,
width: 20
}
})
Any idea why it won't be appearing?

Answer 1

You can try this just by adding the main view flex:1 style