Expo SDK statusbar/modal regression between 42.0.0 and 43+

Please provide the following:

  1. SDK Version: 43.0.0 and 44.0.0
  2. Platforms(Android/iOS/web/all): android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hi,

I am having an issue with Modal and StatusBar since I have upgraded to expo SDK 43.0.0 and further

Long story short (see MRE below) : I was able to show a Modal popup and hide android status bar in expo SDK 42 and since SDK 43 the status bar is displayed each time the popup is visible

I known there is (was ?) a known bug between react-native status bar and modal but since it was working in expo SDK 42.0.0 I suppose the bug may be elsewhere and that it can be solved somehow.

Thanks is advance for any help.

MRE:
1- expo init statusbar_modal
2- cd statusbar_modal
3- expo upgrade 42.0.0
4- create App.js

import React from 'react';
import {
  Modal,
  Text,
  StyleSheet,
  View,
  Button,
  TouchableWithoutFeedback,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  render() {
    return (
      <View style={styles.appContainer}>
        <StatusBar hidden={true} animated={false} style='' />
        <View>
          <Button onPress={this.showModal} title='Show Modal' />
        </View>
        <Modal
          animationType='fade'
          transparent={true}
          visible={this.state.show}
          onRequestClose={this.hideModal}
          statusBarTranslucent={true}>
          <View style={styles.backdrop}>
            <TouchableWithoutFeedback onPress={this.hideModal}>
              <View /* Popup container */ style={[styles.popupContainer]}>
                <Text>This is a modal popup, touch me to close</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
  backdrop: {
    alignItems: 'center',
    justifyContent: 'space-evenly',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  popupContainer: {
    backgroundColor: 'white',
    width: 328,
    height: 328,
    borderRadius: 16,
    alignSelf: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

5- expo start


status bar is hidden :slight_smile:
6- expo update 43.0.0
7- expo start -c

status bar is visible :frowning:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.