feat(chat) keyboard covering input on android fix
This commit is contained in:
parent
661a3d34be
commit
5dbf4845fb
|
@ -4,7 +4,8 @@ import { useHeaderHeight } from '@react-navigation/stack';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
KeyboardAvoidingView,
|
KeyboardAvoidingView,
|
||||||
Platform
|
Platform,
|
||||||
|
StatusBar
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
@ -22,6 +23,11 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
contentContainerStyle?: StyleType,
|
contentContainerStyle?: StyleType,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is a text input rendered at the bottom of the screen?
|
||||||
|
*/
|
||||||
|
hasBottomTextInput: boolean,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Is the screen rendering a tab navigator?
|
* Is the screen rendering a tab navigator?
|
||||||
*/
|
*/
|
||||||
|
@ -38,6 +44,7 @@ const JitsiKeyboardAvoidingView = (
|
||||||
children,
|
children,
|
||||||
contentContainerStyle,
|
contentContainerStyle,
|
||||||
hasTabNavigator,
|
hasTabNavigator,
|
||||||
|
hasBottomTextInput,
|
||||||
style
|
style
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const headerHeight = useHeaderHeight();
|
const headerHeight = useHeaderHeight();
|
||||||
|
@ -54,8 +61,10 @@ const JitsiKeyboardAvoidingView = (
|
||||||
const tabNavigatorPadding
|
const tabNavigatorPadding
|
||||||
= hasTabNavigator ? headerHeight : 0;
|
= hasTabNavigator ? headerHeight : 0;
|
||||||
const noNotchDevicePadding = bottomPadding || 10;
|
const noNotchDevicePadding = bottomPadding || 10;
|
||||||
const iosVerticalOffset = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
|
const iosVerticalOffset
|
||||||
const androidVerticalOffset = headerHeight;
|
= headerHeight + noNotchDevicePadding + tabNavigatorPadding;
|
||||||
|
const androidVerticalOffset = hasBottomTextInput
|
||||||
|
? headerHeight + StatusBar.currentHeight : headerHeight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
|
|
|
@ -27,6 +27,11 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
footerComponent?: Function,
|
footerComponent?: Function,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is a text input rendered at the bottom of the screen?
|
||||||
|
*/
|
||||||
|
hasBottomTextInput?: boolean,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Is the screen rendering a tab navigator?
|
* Is the screen rendering a tab navigator?
|
||||||
*/
|
*/
|
||||||
|
@ -43,12 +48,14 @@ const JitsiScreen = ({
|
||||||
children,
|
children,
|
||||||
footerComponent,
|
footerComponent,
|
||||||
hasTabNavigator = false,
|
hasTabNavigator = false,
|
||||||
|
hasBottomTextInput = false,
|
||||||
style
|
style
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<View
|
<View
|
||||||
style = { styles.jitsiScreenContainer }>
|
style = { styles.jitsiScreenContainer }>
|
||||||
<JitsiKeyboardAvoidingView
|
<JitsiKeyboardAvoidingView
|
||||||
contentContainerStyle = { contentContainerStyle }
|
contentContainerStyle = { contentContainerStyle }
|
||||||
|
hasBottomTextInput = { hasBottomTextInput }
|
||||||
hasTabNavigator = { hasTabNavigator }
|
hasTabNavigator = { hasTabNavigator }
|
||||||
style = { style }>
|
style = { style }>
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
|
|
|
@ -53,6 +53,7 @@ class Chat extends AbstractChat<Props> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<JitsiScreen
|
<JitsiScreen
|
||||||
|
hasBottomTextInput = { true }
|
||||||
hasTabNavigator = { true }
|
hasTabNavigator = { true }
|
||||||
style = { styles.chatContainer }>
|
style = { styles.chatContainer }>
|
||||||
<MessageContainer messages = { _messages } />
|
<MessageContainer messages = { _messages } />
|
||||||
|
|
Loading…
Reference in New Issue