screens-header-bug-android.js

import React, { Component } from 'react';
import { StyleSheet, Button, View, TextInput } from 'react-native';
import {
  Screen,
  ScreenStack,
  ScreenStackHeaderConfig,
  ScreenStackHeaderCenterView,
  ScreenStackHeaderRightView,
} from 'react-native-screens';

class App extends Component {
  state = { toggle: true };
  render() {
    return (
      <ScreenStack style={styles.container}>
        <Screen style={StyleSheet.absoluteFill}>
          <ScreenStackHeaderConfig
            title="Lol"
            hidden={this.state.toggle}
            translucent={false}
          />
          <View style={[StyleSheet.absoluteFill, { justifyContent: 'center' }]}>
            <View
              style={{
                width: '100%',
                height: 50,
                position: 'absolute',
                top: 0,
                left: 0,
                backgroundColor: 'red',
              }}
            />
            <Button
              title="toggle"
              onPress={() => this.setState({ toggle: !this.state.toggle })}
            />
            <View
              style={{
                width: '100%',
                height: 50,
                position: 'absolute',
                bottom: 0,
                left: 0,
                backgroundColor: 'blue',
              }}
            />
          </View>
        </Screen>
      </ScreenStack>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textInput: {
    backgroundColor: 'white',
    borderWidth: 1,
    padding: 10,
    marginHorizontal: 20,
    alignSelf: 'stretch',
    borderColor: 'black',
  },
});

export default App;