React Native Tab bar crashes the android app - react-native

Question

This is the code for components and tab bar creation
const Tab = createMaterialTopTabNavigator<DownloadLedgerNavigatorParamList>()
function HomeScreen() {
return (
<View style={{ marginTop: 10, padding: 20 }}>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
Material Goods
</Text>
<Text style={{ color: '#00B256', marginTop: 10 }}>
Note:
</Text>
<Text style={{ fontSize: 17, marginTop: 20 }}>
Select Date Range
</Text>
<View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: '10' }}>
<Text>Select Date</Text>
</View>
</View>
)
}
function SettingsScreen() {
return (
<View>
<Text>Settings Screen</Text>
</View>
)
}
Now when Home Screen is called, then the app crashes
export function DownloadNavigator() {
return (
<>
<AppGradient style={GRADIENT} />
<Tab.Navigator>
<Tab.Screen name="Aaa" component={HomeScreen} />
<Tab.Screen name="Bbb" component={SettingsScreen} />
</Tab.Navigator>
</>
)
}
But if I call the settings screen in both components then it is working fine. The problem is with HomeScreen only. Is it a bug?

Answer 1

Try this for the HomeScreen. I don't think you can add the styling you are trying to add to Text components. So I would suggest layering them in a View Component. Also in the last View Component, you wrote marginTop: '10' as a string, not a number.
<View style={{ marginTop: 10, padding: 20 }}>
<Text>
Material Goods
</Text>
<View style = {{marginTop: 10}}>
<Text style={{ color: '#00B256'}}>
Note:
</Text>
</View>
<View style = {{marginTop: 20}}>
<Text style={{ fontSize: 17}}>
Select Date Range
</Text>
<View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: 10 }}>
<Text>Select Date</Text>
</View>
</View>