automaticallyAdjustKeyboardInsets created padding at bottom when keyboard shown

[MariuzM]

Description

Noticed 2 issues:

1. When i click on input keyboard will show, but the ScrollView content will have bottom padding, once the keyboard is closed padding is no longer there.

3. Before i click on input i will scroll to bottom, once i click the keyboard it still misses maybe 20px of the original view before the keyboard was opened.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-11-10.at.01.13.34.mp4

My end goal is to have input at the bottom, show input when keyboard is being shown and the scrollview content also being shown last message when keyboard is opened

React Native Version

0.72.6

Output of npx react-native info

System:
OS: macOS 13.6.1
CPU: (10) arm64 Apple M1 Max
Memory: 13.08 GB / 64.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.9.0
path: ~/dev/node-v20.9.0/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 10.1.0
path: ~/dev/node-v20.9.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK:
API Levels:
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 30.0.3
- 31.0.0
- 33.0.0
- 34.0.0
System Images:
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Click the input to open keyboard

Snack, screenshot, or link to a repository

https://github.com/MariuzM/expo-starter/tree/chat
Tab Chat

import { KeyboardAvoidingView, Platform, ScrollView, TextInput, View } from 'react-native';

export const Chat = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={100}
      style={{
        backgroundColor: 'blue',
        flex: 1,
      }}
    >
      <ScrollView
        automaticallyAdjustKeyboardInsets={true}
        // contentContainerStyle={{ flexGrow: 1 }}
        // contentInset={{ bottom: -20 }}
        // contentInsetAdjustmentBehavior="never"
        style={{ backgroundColor: 'orange' }}
      >
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
        <View style={{ height: 200, width: '100%', backgroundColor: 'red', marginBottom: 10 }} />
      </ScrollView>

      <TextInput style={{ backgroundColor: 'green', margin: 12, height: 50 }} />
    </KeyboardAvoidingView>
  );
};

[MariuzM]

Closing i found solution key is to use inverted for Flatlist

[dhaval97shah]

@MariuzM can you please provide a working example? I'm still facing this issue

[gentlee]

OK here is the workaround, use it as footer [with noSafeArea]:

import {memo} from 'react'
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'

type Props = {
	noSafeArea?: boolean
}

export const AnimatedKeyboardOffset = memo(({noSafeArea}: Props) => {
	const keyboard = useKeyboardHeightWithDuration()
	// eslint-disable-next-line react-hooks/rules-of-hooks
	const bottomInset = noSafeArea ? 0 : useSafeAreaInsets().bottom

	const heightStyle = useAnimatedStyle(() => {
		const height = Math.max(keyboard.height, bottomInset)
		return {
			height: keyboard.duration ? withTiming(height, {duration: keyboard.duration}) : height,
		}
	}, [keyboard, bottomInset])

	return <Animated.View style={heightStyle} />
})

export const useKeyboardHeightWithDuration = () => {
	const [keyboardData, setKeyboardData] = useState({
		height: Keyboard.metrics()?.height ?? 0,
		duration: 0,
	})

	useEffect(() => {
		const show = Keyboard.addListener(isIOS ? 'keyboardWillShow' : 'keyboardDidShow', async (event) => {
			setKeyboardData({height: event.endCoordinates.height, duration: event.duration})
		})

		const hide = Keyboard.addListener(isIOS ? 'keyboardWillHide' : 'keyboardDidHide', (event) => {
			setKeyboardData({height: 0, duration: event.duration})
		})

		return () => {
			show.remove()
			hide.remove()
		}
	}, [])

	return keyboardData
}