KeyboardAwareScrollView with Footer Button Still Behind Keyboard

user_659751 0
Viewed 574
const headerHeight = useHeaderHeight();
const keyboardVerticalOffset = Platform.OS === 'ios' ? headerHeight + 20 : 0;
const behavior = Platform.OS === 'ios' ? 'padding' : 'height';

<SafeAreaView style={styles.wrapper}>
  <KeyboardAwareScrollView
    keyboardVerticalOffset={keyboardVerticalOffset}
    behavior={behavior}
    contentContainerStyle={{flexGrow: 1}}
    style={{
      backgroundColor: 'blue',
    }}>
    <View style={{flex: 1, backgroundColor: 'red', height: '100%'}}>
      <Text>Details Screen</Text>
      <View style={styles.priceInputWrapper}>
        <Text style={styles.dollarSignText}>$</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.priceInput}
          onChangeText={handlePriceValue}
          value={priceValue}
          placeholder="0"
        />
      </View>
    </View>
    <ButtonTouchOpacity onPress={() => navigation.navigate('PostDelivery')}>
      <Text>Save and Next</Text>
    </ButtonTouchOpacity>
  </KeyboardAwareScrollView>
</SafeAreaView>

enter image description hereenter image description here

I'm trying to set it so when the keyboard pops up, the button at the bottom will be above the keyboard. Trying to keep the button at the footer of the page.

react-native
2 Answers

IMO KeyboardAwareScrollView's use case is a bit different than yours. I use it when there is a situation that user can change focus between multiple inputs and they should be automatically aligned to a visible position. For cases like this, I use RN's KeyboardAvoidingView component. I don't know how strict you are on using KeyboardAwareScrollView, but if you are not that strict about it, here is a snippet that works with KeyboardAvoidingView:

import * as React from "react";
import {
    View,
    Button,
    SafeAreaView,
    Text,
    TextInput,
    Platform,
    KeyboardAvoidingView
} from "react-native";

export default function App() {
    const headerHeight = 20;
    const keyboardVerticalOffset =
        Platform.OS === "ios" ? headerHeight + 20 : 0;
    const behavior = Platform.OS === "ios" ? "padding" : "height";

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <KeyboardAvoidingView
                keyboardVerticalOffset={keyboardVerticalOffset}
                behavior={behavior}
                style={{
                    flex: 1
                }}
            >
                <View
                    style={{ flex: 1, backgroundColor: "red", height: "100%" }}
            >
                <Text>Details Screen</Text>
                <TextInput 
                style={{
                    width: 500,
                    height: 60,
                    backgroundColor: "cyan"
                }}
                />
            </View>
            <Button
                title="Save and Exit"
            />
        </KeyboardAvoidingView>
    </SafeAreaView>
);
}
user_110179170

You need to move the button outside the scrollview.

const headerHeight = useHeaderHeight();
const keyboardVerticalOffset = Platform.OS === 'ios' ? headerHeight + 20 : 0;
const behavior = Platform.OS === 'ios' ? 'padding' : 'height';

<SafeAreaView style={styles.wrapper}>
  <KeyboardAwareScrollView
    keyboardVerticalOffset={keyboardVerticalOffset}
    behavior={behavior}
    contentContainerStyle={{flexGrow: 1}}
    style={{
      backgroundColor: 'blue',
    }}>
    <View style={{flex: 1, backgroundColor: 'red', height: '100%'}}>
      <Text>Details Screen</Text>
      <View style={styles.priceInputWrapper}>
        <Text style={styles.dollarSignText}>$</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.priceInput}
          onChangeText={handlePriceValue}
          value={priceValue}
          placeholder="0"
        />
      </View>
    </View>
  </KeyboardAwareScrollView>
  <ButtonTouchOpacity onPress={() => navigation.navigate('PostDelivery')}>
    <Text>Save and Next</Text>
  </ButtonTouchOpacity>
</SafeAreaView>
user_147575390
Related