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?