[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).