automaticallyAdjustKeyboardInsets created padding at bottom when keyboard shown #41397

Activity

1. MariuzM

   added

   Needs: Triage 🔍

   on Nov 9, 2023
2. github-actions

   added

   API: Keyboard

   on Nov 9, 2023
3. MariuzM commented on Nov 10, 2023

   

   MariuzM

   on Nov 10, 2023

   Author

   More actions

   Closing i found solution key is to use inverted for Flatlist

   👎React with 👎6Reacted by Ayush Goyal, Andrew Ilyukhin, Quentin Calvez, roni-castro-shipt, gentlee and Michael Young
4. MariuzM

   closed this as completedon Nov 10, 2023
5. dhaval97shah commented on Apr 14, 2024

   

   dhaval97shah

   on Apr 14, 2024

   More actions

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

   👍React with 👍5Reacted by Ayush Goyal, J. Holl, vishalpawar048, Quentin Calvez and gentlee
6. gentlee commented on Oct 1, 2025

   

   gentlee

   on Oct 1, 2025

   Last edited by gentlee

   More actions

   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
   }