ReactNative: View *behind* ScrollView - reactjs

Question

I have a View (containing an Icon and Text, to act as a big checkbox) which is placed above a ScrollView, however, the ScrollView is appearing in front of the View, and also the Text isn't displaying.
I've tried every combination of flex, sometimes ending up with both of them taking up half the screen.
The Icon/Text works fine on other screens.
this shows the view behind the scrollview, rather than neatly above it, with some margin.
this is what it looks like on another screen, fine with margins, etc.
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
backgroundColor: 'white',
},
scrollview: {
width: '100%',
paddingTop: 10,
paddingBottom: 10,
},
heading: {
fontSize: 36,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
subheading: {
fontSize: 20,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
});```
<View style={ style.container }>
<Text style={ style.heading }>{ this.state.list && this.state.list.name || 'My Gift List' }</Text>
{ this.state.list.date ? <Text style={ [ style.subheading, { marginTop: 5, marginBottom: 10 } ] }>{ formatDate( dateFromIso( this.state.list.date ), "%A %eth %B, %Y" ) }</Text> : null }
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 10, marginBottom: 20 }}>
<Checkbox icon={ this.state.showTicked ? 'check' : null } onPress={ () => this.setState( { showTicked: ! this.state.showTicked } ) } />
<Text style={{ marginLeft: 10 }} onPress={ () => this.setState( { multiple: ! this.state.multiple } ) }>I would like more than one</Text>
</View>
{
this.state.list.items.length > 0 ?
<ScrollView style={ style.scrollview } >
<FlatList style={ { marginTop: 10, marginBottom: 50, width: "100%", borderTopColor: '#ddd', borderTopWidth: 1 } } data={ this.state.list.items } renderItem={ this.renderItem } />
</ScrollView>
: null
}
</View>```
const Checkbox = args => {
const props = Object.assign( {}, args );
props.containerStyle = Object.assign( { width: 40 }, props.containerStyle || {} );
props.buttonStyle = Object.assign( { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#555', height: 40 }, props.buttonStyle || {} );
if ( props.icon )
{
let iconProps = Object.assign( { type: 'font-awesome', name: props.icon , color: "#555555", size: 20 }, props.iconStyle || {} );;
props.icon = <RNEIcon {...iconProps} />
}
return <RNEButton {...props} />
};

Answer 1

I think You just need to change the z index for the scroll view and the regular view in the style sheet
export default StyleSheet.create({
container: {
zIndex: 2,
flex: 1,
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
backgroundColor: 'white',
},
scrollview: {
zIndex: 1,
width: '100%',
paddingTop: 10,
paddingBottom: 10,
},
heading: {
fontSize: 36,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
subheading: {
fontSize: 20,
textAlign: 'center',
marginLeft: 20,
marginRight: 20,
},
});```