Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After hidden bottom tab bar by open keyboard remains white block #7284

Closed
fri0z opened this issue Oct 24, 2019 · 8 comments · Fixed by react-navigation/tabs#227
Closed

After hidden bottom tab bar by open keyboard remains white block #7284

fri0z opened this issue Oct 24, 2019 · 8 comments · Fixed by react-navigation/tabs#227

Comments

@fri0z
Copy link

fri0z commented Oct 24, 2019

Current behaviour

After hidden bottom tab bar by open keyboard remains white block. I use mode android:windowSoftInputMode="adjustResize" and adjustResize fits most to me. I tried other modes and not fits me.

Expected behaviour

I expect to hide the white bar in adjustResize mode

Code sample

import React from 'react';
import { Input } from "react-native-elements";
import { View, ScrollView } from 'react-native';

class Example extends React.Component {
    render() {
        return (
            <View style={ { backgroundColor: '#ccc', flex: 1 } }>
                <ScrollView>
                    <Input
                        label={ 'Серия бланка' }
                        placeholder='Серия бланка'
                    />
                </ScrollView>
            </View>
        );
    }
}

Screenshots (if applicable)

photo_2019-10-24_20-37-34

What have you tried

I watched react-navigation/tabs#16 / react-navigation/tabs#64

Your Environment

software version
ios or android android
react-native 0.60.5
react-navigation-tabs 4.0.10
react-navigation-stack 1.10.2
react-navigation-tabs 2.5.6
node v10.17.0
npm or yarn 6.11.3
@GuilhermeFM
Copy link

Facing the same problem.

When we set the keyboardHidesTabBar property to true the bottom bar animates and disappears leaving a white bar in its place.

@yasirwahid
Copy link

i changed to android:windowSoftInputMode="adjustPane" and the white bar was gone ,but not a feasible solution to me i also need to work on "adjustResize" mode

@fri0z
Copy link
Author

fri0z commented Nov 8, 2019

@satya164 Is there any information on this issue?

@wwgoncalves
Copy link

@fri0z Facing the same here, trying to figure things out...
It seems to occur because the hide animation (tab bar resizing) is much fast -- and the Android app "root view" background is white.

I've managed to come up with a workaround that recreates the hide animation. See if it's useful for you:

import React, { useEffect } from 'react';
...
import { Keyboard, Animated } from 'react-native';

const animatedOpacity = new Animated.Value(1.0);
const animatedHeight = new Animated.Value(49);
...
...
 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        Animated.timing(animatedOpacity, {
          toValue: 0.0,
          duration: 200,
        }).start();
        Animated.timing(animatedHeight, { toValue: 0, duration: 500 }).start();
      }
    );

    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        Animated.timing(animatedOpacity, {
          toValue: 1.0,
          duration: 800,
        }).start();
        Animated.timing(animatedHeight, { toValue: 49, duration: 300 }).start();
      }
    );

    return function cleanup() {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []); // eslint-disable-line
...
...
ScreenFunctionalComponentName.navigationOptions = {
  ...
  tabBarOptions: {
    ...
    keyboardHidesTabBar: false,
    ...
    style: {
      ...
      opacity: animatedOpacity,
      height: animatedHeight,
      ...
    },
  },
};

Note: You will probably still see a white background while the animation occurs. To make things look better we have to change the app "root" background. Inside the folder android/app/src/main/res/values, create the file colors.xml with a reference for your custom color, e. g.

<resources>
  <color name="windowBackgroundColor">#cccccc</color>
</resources>

and add the following line to the android/app/src/main/res/values/styles.xml file referring your color just below the last item:

        <item name="android:windowBackground">@color/windowBackgroundColor</item>

@fri0z
Copy link
Author

fri0z commented Nov 26, 2019

@wwgoncalves Thanks for the hint, but this is only a temporary solution to the problem.

@fri0z
Copy link
Author

fri0z commented Nov 26, 2019

Today I tested the fixes that @vonovak suggested and they work. Waiting for the adoption of corrections.

satya164 referenced this issue in react-navigation/tabs Dec 3, 2019
@satya164 satya164 transferred this issue from react-navigation/tabs Feb 24, 2020
@barak109
Copy link

barak109 commented Mar 9, 2020

I upgraded and it's still happen to me.
I see that it doesn't work with autoFocus
<TextInput
autoFocus
keyboardType={"numeric"}
onChangeText={value =>{}}
placeholder={"Code ... "}
value={codeInput}
/>

@yarin177
Copy link

same here still looking for a fix...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants