Avoid Keyboard for whole View (dynamic offset)

[saaymeen]

Feature request

Library version: 2.4.6

Hi, with the following example AvoidSoftInputView always pushes the content up so far that the focused input is always on the very bottom of the visible space (right above keyboard). I get that this is the intended behaviour and that I can add an offset for CTA buttons via avoidOffset prop, but how can I make the offset dynamic form multiple inputs?

function ExampleApp(): JSX.Element {
	return (
		<View style={{ flex: 1 }}>
			<Text style={{ paddingTop: 50, paddingLeft: 30 }}>Go back</Text>
			<View style={{ flex: 1 }} />
			<View>
				<AvoidSoftInputView
					style={{ padding: 20, backgroundColor: 'blue' }}
					hideAnimationDuration={80}
					showAnimationDuration={80}
					showAnimationDelay={0}
				>
					<TextInput style={{ backgroundColor: 'red', height: 45, paddingHorizontal: 20 }} />
					<View style={{ height: 20, backgroundColor: 'yellow' }} />
					<TextInput style={{ backgroundColor: 'red', height: 45, paddingHorizontal: 20 }} />
					<View style={{ height: 80, backgroundColor: 'green' }} />
				</AvoidSoftInputView>
			</View>
		</View>
	);
}

With the example above, I have two red boxes, a green area for CTA and blue padding. I always want the blue area to be above the Keyboard. My initial hope was that wrapping the whole View in AvoidSoftInputView will do this, but it doesn't. If I add an offset, I will always see varying height of the container depending on wich input I focus.
(For example, offsavoidOffset={50} will show the whole form when I focus the bottom Input but will only show part of the form when I focus top Input`.

Additionally, the Android Keyboard always aligns right at the bottom of the focused input while iOS always adds some space in between. Why is that?

[mateusz1913]

Hi @saaymeen, I moved this to the Discussions section, because it's not an issue, but rather couple of questions, which I'll try to answer below.

how can I make the offset dynamic form multiple inputs?

If I get it correctly, you want to wrap each of form's inputs in its separate AvoidSoftInputView wrapper and give different avoidOffset prop for each of those wrappers

With the example above, I have two red boxes, a green area for CTA and blue padding. I always want the blue area to be above the Keyboard. My initial hope was that wrapping the whole View in AvoidSoftInputView will do this, but it doesn't. If I add an offset, I will always see varying height of the container depending on wich input I focus.
(For example, offsavoidOffset={50} will show the whole form when I focus the bottom Input but will only show part of the form when I focus top Input`.

So the module is intended to work with elements that trigger keyboard (on Android these are 100% text inputs, on iOS everything that is displayed inside iOS's inputView - in most cases text inputs with conventional keyboard). If you want to have control over elements that don't trigger keyboard (e.g. buttons displayed at the very bottom of the screen), you may have to apply padding manually.
In that case, you can check dedicated docs section called Sticky footer recipe where such case is explained.
TLDR: you have to grab detected keyboardHeight and apply it (with some positive or negative offset) to the container that needs to have additional padding, in order to be moved above the keyboard.

Additionally, the Android Keyboard always aligns right at the bottom of the focused input while iOS always adds some space in between. Why is that?

I don't know tbh, my guess would be that it's related with iOS bottom safe area inset, which is taken into consideration when computing offset that needs to be applied to make text input visible.
I don't know if you render your form inside a built-in SafeAreaView or you use react-native-safe-area-context, but if not, it might be the reason (I always use safe-area-context lib in my projects and I didn't have any issues with extra spaces on iOS)

If you have any more doubts, feel free to ask them here or open new discussion in Discussions section