Error in non-iPhoneX devices - null is not an object - ios

Question

When I run my app on a iPhone X simulator, it works as designed with no errors.
When I run it on an iPhone 5S, 7, and all other non iPhone X devices, I get an error that says, null is not an object (evaluating '_this.props.filters.map)
This is the render part of my code:
render() {
return(
<View>
<NativeText
color='gray'
style={{
paddingLeft: '3%',
paddingTop: '2%',
paddingBottom: '2%',
borderBottomColor: 'gray',
borderBottomWidth: 1,
fontSize: 14
}}>Saved Filters</NativeText>
<View
style={{
borderBottomColor: 'gray',
borderBottomWidth: 1,
}}
/>
<View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor: '#f7fafc'}}>
{
this.props.filters !== null ? this.props.filters.map(
(v, i) => {
return(
<View key={i} style={{flexDirection:'row', alignItems:'center', paddingLeft: '2%'}}>
<NativeText
key={i}
onPress={() => this.updateCurrentFilter(i)}
style={{
paddingLeft: 10,
fontWeight: "100",
fontSize: 14
}}
>{v.filter_name} </NativeText>
<View
style={{
alignSelf: 'flex-end'
}}
>
<Icon
name={this.props.checkedFilters !== undefined && this.props.checkedFilters[i] === true ? 'toggle-switch' : 'toggle-switch-off-outline'}
size={29}
style={{top: '7%'}}
color='black'
onPress={() => this.updateCurrentFilter(i)}
/>
</View>
</View>
)
}
) : null
}
</View>
<View
style={{
borderBottomColor: 'gray',
borderBottomWidth: 1,
}}
/>
</View>
)
}
The props comes from a redux reducer with a default state of null.
Is there anything specific to non-iPhone X devices that I should be aware of?

Answer 1

You are getting error because this.props.filters has null value in it
try this :
<View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor: '#f7fafc'}}>
{
this.props.filters ?
this.props.filters.length > 0 ?
this.props.filters.map((v, i) => {
return(
</View> // your component here
)})
: null
: null
}
</View>