How do I prevent the screen from scrolling to x:0, y:0 when an input loses focus?

Question

I'm of aware of this:https://github.com/APSL/react-native-keyboard-aware-scroll-view &

import { KeyboardAvoidingView } from "react-native";

but I don't think I'm doing something right.

The code below is an example of one of the many forms on the application. The issue is when the user deselects an input field, the screen jumps all the way to the top of the form.

Imagine filling out a form with 10 inputs and every time you were done with a field, the screen jumps to the top. That's poor UX and I'm trying to prevent that from happening.

I'm using redux-form and native-base.

(I have a switch in the sidebar which toggles a boolean. If it's true, then input will display what's stored in its auto_fill prop. This has nothing to do with the issue, just a little bit of context to understand the code better.)

<Form>
  <Field
    label="Address *"
    name="address" 
    component={SmartInput}
    auto_fill={side_bar_switch ? "182 Blink" : null}
    validate={
      side_bar_switch ? null : [required, minLength1, maxLength100]
    }
  />
  <Field
    label="City *"
    name="city" 
    component={SmartInput}
    auto_fill={side_bar_switch ? "Los Angeles" : null}
    validate={
      side_bar_switch ? null : [required, minLength1, maxLength30]
    }
  />
  <Field
    label="Apt Number"
    name="apt" 
    component={SmartInput}
    auto_fill={side_bar_switch ? "5" : null}
    validate={side_bar_switch ? null : [maxLength5]}
  />
  <Field
    label="ZIP code *"
    name="zipcode" 
    component={SmartInput}
    auto_fill={side_bar_switch ? "90210" : null}
    validate={
      side_bar_switch ? null : [required, number, maxLength5]
    }
  />
  <Field
    label="State *" 
    name="state"
    component={SmartInput}
    auto_fill={side_bar_switch ? "CALIFORNIA" : null}
    validate={side_bar_switch ? null : [required]}
  />
  <Field
    label="Phone Number *"
    name="phoneNumber" 
    component={SmartInput}
    auto_fill={side_bar_switch ? "2816769900" : null}
    validate={side_bar_switch ? null : [required, phoneNumber]}
  />
  <Field
    label="Email *"
    name="app_email"
    component={SmartInput}
    auto_fill={side_bar_switch ? "threadpool.io@x_x.com" : null}
    validate={
      side_bar_switch ? null : [required, email, maxLength50]
    }
  />
</Form>

Answer 1

I have created a component for this use case

its a wrapper component use this instead of View when playing with TextInput

import React, {Component} from "react";
import {
StyleSheet,
KeyboardAvoidingView,
ScrollView,
} from "react-native";
import themeConstants from "../../theme/themeConstants";

class KeyboardAwareScrollView extends Component {

render() {
return (
  <ScrollView style={styles.container}>
    <KeyboardAvoidingView style={styles.container2} behavior="padding" enabled>
      {this.props.children}
    </KeyboardAvoidingView>
  </ScrollView>
 );
}
}

export default KeyboardAwareScrollView;

const styles = StyleSheet.create({
container: {
flex: 1,

backgroundColor: themeConstants.offWhite
},
container2: {
flex: 1,
justifyContent: "flex-start",
paddingTop: 30,
alignItems: "center",
backgroundColor: themeConstants.offWhite
},
});