React Native Scrollview doesn't stay at the bottom

Viewed 26

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,
  },
});
1 Answers
Related