KeyboardAwareScrollView with Footer Button Still Behind Keyboard - react-native

Question

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>
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.

Answer 1

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>
);
}

Answer 2

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>