[WIP] Handle status bar without is status bar translucent android option

[maciekstosio]

Summary

During the discussion #5851 it was suggested that we could handle status bar without passing special flag. I attached observer that listens to StatusBar changes and keep track if the color is translucent and what is its height. Thanks to that I can change top insets automatically. The PR is WIP - if we decide to go with it I need to remove unused flag or deprecate it

Before without useAnimatedKeyboard	Before with useAnimatedKeyboard	After
without.keyboard.hook.Before.mov	with.keyboard.hook.Before.mov	with.keyboard.hook.After.mov

Test plan

Turn of navigation headers if visible, and then you use this Example:

Example

import React, { useEffect, useState } from 'react';
import Animated, {
  useAnimatedKeyboard,
  useAnimatedReaction,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {
  Platform,
  StatusBar,
  StyleSheet,
  TextInput,
  View,
  Text,
  Button,
} from 'react-native';

export default function EmptyExample() {
  const [statusBarHidden, setStatusBarHidden] = useState(false);
  const [statusBarTranslucent, setStatusBarTranslucent] = useState(false);
  const keyboard = useAnimatedKeyboard();

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateY: -keyboard.height.value }],
  }));

  useAnimatedReaction(
    () => {
      return keyboard.height.value;
    },
    (currentValue) => console.log(currentValue)
  );

  return (
    <Animated.View
      style={[
        styles.container,
        animatedStyles,
        { justifyContent: 'flex-end', borderWidth: 5, borderColor: '#ff0', backgroundColor: "#222" },
      ]}>
      <StatusBar
        barStyle="default"
        hidden={statusBarHidden}
        backgroundColor={statusBarTranslucent ? 'transparent' : undefined}
        translucent={statusBarTranslucent}
      />
      <Button
        title="Toggle statusBackgroundColor"
        onPress={() => setStatusBarTranslucent((hidden) => !hidden)}
      />
      <Button
        title="Toggle StatusBar"
        onPress={() => setStatusBarHidden((hidden) => !hidden)}
      />
      <Button
        title="Show Warning"
        onPress={() => console.warn('WARNING!!!!')}
      />
      <View
        style={[
          styles.center,
          {
            height: 200,
            backgroundColor: '#f0f',
            borderWidth: 5,
            borderColor: '#0ff',
          },
        ]}>
        <Text>{`Android ${Platform.constants['Release']}`}</Text>
        <TextInput placeholder="Test" />
      </View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  center: { justifyContent: 'center', alignItems: 'center' },
});

[maciekstosio]

This is fired few times during the changes so I don't want to do update multiple times (it blocks the UI).

[maciekstosio]

This solution works, but we're investigating this in terms of performance, as in current state it may cause problems.

[efstathiosntonas]

@maciekstosio recently I had to use react-native-keyboard-controller and react-native-avoid-softinput and they both had issues with useAnimatedKeyboard and edge to edge setup with react-native-unistyles. The status bar is flickering when useAnimatedKeyboard does it's magic causing weird layout effects.

Both input handlers set decorFitsSystemWindow dynamically but on react-native-unistyles @2.8.1 it's static -> false.

some more info on rn-avoid-softinput:

• AvoidSoftInput.setShouldMimicIOSBehavior(false) causes layout issues on Android mateusz1913/react-native-avoid-softinput#200 (comment)

Just wanted to bring this to your attention.

cc: @jpudysz

[jpudysz]

Using ViewTreeObserver.OnDrawListener is not performant. It triggers the callback multiple times.
After months of debugging insets IMO there are two reliable ways to measure it:

• WindowInsetsCompat - but requires decorFitsSystemWindow set to false
• measuring root view and decor view and compare them - but we need to handle multiple edge cases

@maciekstosio if you want I can share some knowledge here

[maciekstosio]

Using ViewTreeObserver.OnDrawListener is not performant. It triggers the callback multiple times. After months of debugging insets IMO there are two reliable ways to measure it:

• WindowInsetsCompat - but requires decorFitsSystemWindow set to false
• measuring root view and decor view and compare them - but we need to handle multiple edge cases

@maciekstosio if you want I can share some knowledge here

Yeah, that's why it's on hold for so long :D Although I'm not sure if those two solution are feasible - we have decorFitsSystemWindow(false) to observe keyboard height, but as far as I remember the problem with transparent status bar is that insets do not change, just the background and I couldn't find a way to observe that (other then on every draw).
Anyway, I'm more than happy to discuss it with you, I'll write you.