Problems on some Android models

[lordenas]

There are Android models that have the so-called monobrow, on all these models "keyboard-spacer" does not work correctly.

keyboard on top of input

[AlexandreM]

Got the same problem on Samsung S10E.

KeyboardSpacer does not take into account the large StatusBar of the device made by the notch. I tried to use TopSpacing and set it to the size of the statusBar to solve this problem, and it works for the Samsung S10E, but on other device which does not have the notch I have a weird spacing on them.

[Deleted user]

I also have someone complaining with a Samsung S10e, @AlexandreMaistret which TopSpacing did you give to make it work?

EDIT:
I added this and it seems to work great:

---

contants.js

export const TOP_SPACING = ['SM-G970F', '... other device names that might need this'];

---

someScreen.js

componentDidMount() {
    // Check if device is Android and if a top spacing value is set for this device,
    // if it is, it should add it to the state variable.
    // Some devices have a special value, because of the height of the status bar,
    // devices with a notch for example.
    if (Platform.OS === 'android') {
        if (TOP_SPACING.indexOf(Constants.deviceName) >= 0) {
            this.setState({ topSpacing: getStatusBarHeight() });
        }
    }
}

render() {
    return <KeyboardSpacer topSpacing={this.state.topSpacing} />;
}

[aaggarwa88]

@rafmrs what was full list of constants of devices you used? That would be hepful to use if you have a good list. thank you in advance!

[tom perwick]

Got the same problem on Samsung S10E.

KeyboardSpacer does not take into account the large StatusBar of the device made by the notch. I tried to use TopSpacing and set it to the size of the statusBar to solve this problem, and it works for the Samsung S10E, but on other device which does not have the notch I have a weird spacing on them.

I don't think it's to do with the statusbar because the status bar is only 24 high and you need 32 (BottomTabBar.COMPACT_TABBAR_HEIGHT).

For some reason, on the s10e (have tested a bunch of other but not all) the correct height to space is e.endCoordinates.height + tab bar, but on other phones it's simply e.endCoordinates.height.
This is all with the option keyboardHidesTabBar:true, so perhaps it's to do with the timing of when the keyboard end height is calculated?

Any way of determining which devices are affected would be useful.. @rafmrs

[Kris]

For Android, I'd recommend using KeyboardAwareScrollView (Github). Since this package is not actively maintained, I only use it for the rare instances in iOS where I have a sticky footer input that is not contained inside a ScrollView (like in a chat screen).