When I try and scroll to the bottom of my React Native screen it just goes back to the top after letting go. I've tried adding a flex of 1 to the parents of the ScrollView, but that didn't fix the issue, and neither did adding a bottom padding.
What could be causing this behavior?
import {
View,
Text,
SafeAreaView,
StyleSheet,
TextInput
TouchableOpacity,
ScrollView,
} from 'react-native';
import React, {useState} from 'react';
export default function SelectAddress() {
return (
<View style={styles.mainView}>
<SafeAreaView>
<View style={{minHeight: '100%'}}>
<ScrollView>
<View>
<TextInput style={styles.input} placeholder="Street address" />
<TextInput style={styles.input} placeholder="Apt/Suite/Bldg" />
<TextInput style={styles.input} placeholder="City" />
<TextInput style={styles.input} placeholder="State" />
<TextInput style={styles.input} placeholder="Zipcode" />
</View>
<TouchableOpacity style={styles.save}>
<Text>Save</Text>
</TouchableOpacity>
</ScrollView>
</View>
</SafeAreaView>
</View>
);
}
const styles = StyleSheet.create({
mainView: {
height: Dimensions.get('screen').height,
width: Dimensions.get('screen').width,
backgroundColor: '#ffffff',
},
input: {
paddingTop: 15,
paddingBottom: 15,
borderRadius: 12,
paddingLeft: 10,
minWidth: '95%',
marginTop: 10,
},
save: {
alignSelf: 'center',
padding: 6,
marginTop: 10,
borderRadius: 20,
},
});