Android: Keyboard has a invisible top that pushed view

[afu1995]

Hey Guys, As said in the title i'm experiencing an Android issue when I press an input-field the keyboard activates and pushed the view far top. BUT the view adjust to the correct placement when I start typing. Please look at my video.

https://user-images.githubusercontent.com/79371290/233310864-1b60438c-78bd-4e4c-9c60-3110a166a92a.mp4

import React from 'react';
import { Keyboard, KeyboardAvoidingView as RNKeyboardView, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { isAndroid } from '~/app/helpers/Settings';

type Props = {
  children: React.ReactNode;
  dismissOnChildrenTouch?: boolean;
};

export function KeyboardAvoidingView({ children, dismissOnChildrenTouch = true }: Props) {
  return (
    <RNKeyboardView
      style={Styles.Keyboard}
      contentContainerStyle={Styles.ContentContainer}
      behavior={isAndroid ? 'height' : 'padding'}>
      <TouchableWithoutFeedback onPress={dismissOnChildrenTouch ? Keyboard.dismiss : undefined}>
        {children}
      </TouchableWithoutFeedback>
    </RNKeyboardView>
  );
}

const Styles = StyleSheet.create({
  Keyboard: {
    flex: 1,
  },
  ContentContainer: {
    flex: 1,
  },
});

[IordanisSap]

How did you solve that?

[anhquan291]

Facing the same problem. Did you find a solution for that @afu1995 ? Thank you so much

[AlaaMX]

+1

[kenanallahverdiev]

Can anyone share the solution please?