React native and scrollView - react-native

Question

I used the other question to fix it my problem but I don't understand where I mistake.
Hi,
I have a problem with react native scroll view, it scroll but when I release it comes back to the top, how can I fix it?
This is the render:
render() {
const { centerEverything, skeleton, container, textContainer, contentContainer, buttonContainer,
propHeight, propWidth, halfPropWidth, titleContainer, descContainer, title, artworkTitle,
desc, buttonStyle, artworkContainer, artwork } = styles;
let CheckIndex = i => {
if((i % 2) == 0) {
return styles.gray
}
};
let rows = this.state.rows.map((r, i) => {
return <View key={ i } style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Ingrediente"
onChangeText={this.changeIngrediente.bind(this, 'quantita', i)}
value={this.state.date} />
<Input
propWidth={halfPropWidth}
placeholder="Quantita"
onChangeText={this.changeIngrediente.bind(this, 'ingrediente', i)}
value={this.state.time} />
</View>
});
return (
<TouchableWithoutFeedback onPress={()=> dismissKeyboard()}>
<View style={[centerEverything, container]}>
<View style={[centerEverything, textContainer]}>
<View style={titleContainer}>
<Text style={[title]}>Add Event</Text>
</View>
<View style={descContainer}>
<Text style={[desc]}>Submit your event and we will process it in a bit ⚡️</Text>
</View>
</View>
<ScrollView style={[contentContainer, propWidth]}>
<View style={[centerEverything, artworkContainer]}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={[centerEverything, {height: 100, width: deviceWidth*0.8}]}>
{
(() => {
switch (this.state.artworkUrl) {
case null:
return (
<View>
<Text style={[artworkTitle]}>Upload event artwork</Text>
<Text style={[desc]}>Preferably 640x480</Text>
</View>
);
case '':
return <Spinner size="small"/>
default:
return(
<Image style={artwork} source={{uri: this.state.artworkUrl}} />
)
}
})()
}
</View>
</TouchableOpacity>
</View>
<Input
propWidth={propWidth}
placeholder="Event Title"
onChangeText={(title) => this.setState({ title })}
value={this.state.title} />
<View style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Date"
onChangeText={(date) => this.setState({ date })}
value={this.state.date} />
<Input
propWidth={halfPropWidth}
placeholder="Time"
onChangeText={(time) => this.setState({ time })}
value={this.state.time} />
</View>
<View>
{ rows }
<TouchableHighlight
onPress={ this._addRow.bind(this) }
style={styles.button}>
<Text>Aggiungi ingrediente</Text>
</TouchableHighlight>
</View>
<View style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Organizer"
onChangeText={(organizer) => this.setState({ organizer })}
value={this.state.organizer} />
<Input
propWidth={halfPropWidth}
placeholder="Cost"
onChangeText={(cost) => this.setState({ cost })}
value={this.state.cost} />
</View>
<Input
propWidth={[propHeight, propWidth]}
placeholder="Address"
multiline={true}
onChangeText={(address) => this.setState({ address })}
value={this.state.address} />
<Input
propWidth={[propHeight, propWidth]}
placeholder="Note"
multiline={true}
onChangeText={(note) => this.setState({ note })}
value={this.state.note} />
</ScrollView>
<View style={[buttonContainer]}>
<ButtonComponent
style={buttonStyle}
type='primary'
shape='rectangle'
buttonState={this.state.buttonState}
states={this.buttonStates}
/>
</View>
</View>
</TouchableWithoutFeedback>
)
}
this is the style:
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center'
},
skeleton: {
borderWidth: 1,
borderColor: 'red'
},
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#F5F6F7',
marginTop: 44
},
textContainer: {
flex: 2,
marginTop: 20
},
propHeight: {
height: 80
},
propWidth: {
width: deviceWidth*0.8
},
halfPropWidth: {
width: deviceWidth*0.4
},
contentContainer: {
flex: 1,
width: deviceWidth,
height: deviceHeight-200
},
buttonContainer: {
width: deviceWidth,
alignItems: 'center',
backgroundColor: 'transparent',
position: 'absolute',
bottom: 20
},
button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
},
titleContainer: {
width: deviceWidth*0.8,
},
descContainer: {
width: deviceWidth*0.6,
},
title: {
fontSize: 22,
fontFamily: 'Helvetica Neue',
fontWeight: '400',
textAlign: 'center'
},
artworkTitle: {
fontSize: 18
},
desc: {
color: 'grey',
fontSize: 15,
fontFamily: 'Helvetica Neue',
fontWeight: '300',
textAlign: 'center'
},
buttonStyle: {
height: 40,
width: deviceWidth*0.7,
borderRadius: 20,
margin: 3
},
artworkContainer: {
borderColor: '#9B9B9B',
borderRadius: 3,
borderWidth: 1 / PixelRatio.get(),
marginBottom: 5,
width: deviceWidth*0.8,
height: 100
},
artwork: {
width: deviceWidth*0.8,
height: 100
},
listViewContainer: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
},
}

Answer 1

I set minheight property of the scroll and it seems to work.