immersive is disabled after opening modal or coming back from sleep

[yanush]

After opening a modal window, the immersive mode is disabled.
I had to reactivate it after closing the modal window.
Same thing happens when the application comes back from sleep mode

[ThatBean]

Sorry for the late reply.

We want to keep this module simple, and keep the state of immersive mode in JavaScript.
For the mode reset when application comes back from sleep mode, try using AppState like this from ReactNative Docs:

class Root extends PureComponent {
  constructor (props) {
    super (props)

    this.setImmersiveOn = () => {
      Immersive.on()
      this.setState({ isImmersive: true })
    }
    this.setImmersiveOff = () => {
      Immersive.off()
      this.setState({ isImmersive: false })
    }
    this.onAppStateChange = (nextAppState) => {
      nextAppState === 'active' && console.log('App has come to the foreground!')
      nextAppState === 'active' && this.state.isImmersive && Immersive.on()
    }

    this.state = { isImmersive: false }
  }

  componentDidMount() { AppState.addEventListener('change', this.onAppStateChange) }

  componentWillUnmount() { AppState.removeEventListener('change', this.onAppStateChange) }

  render() {
    return <View style={styles.container}>
      <Button onPress={this.setImmersiveOn} title="Immersive on" />
      <Button onPress={this.setImmersiveOff} title="Immersive off" />
    </View>
  }
}

[Grzegorz Mandziak]

but what about modal, it makes sense for me to reactivate it when app changed state, but what about modal ? @ThatBean

[ThatBean]

Haven't tried modal in our project yet. But with our experience, the Immersive Flag will get reset on:

• coming back to active AppState:
  - fix: AppState.addEventListener('change', (state) => state === 'active' && Immersive.on())

• after the Keyboard dismiss:
  - fix: Keyboard.addListener('keyboardDidHide', Immersive.on)

• after Alert opening
  - fix: Immersive.on in onDismiss and all onPress, or somthing less good like setTimeout(Immersive.on, 200)

• after Modal opening (haven't tried in our project yet)

---

In our case, we combine the reset with StatusBar and use something like this:

const setLayoutStatus = PLATFORM_ANDROID ? ({ isHideStatusBar = false, isImmersive = false }) => {
  __DEV__ && console.log('[setLayoutStatus]', { isHideStatusBar, isImmersive })
  StatusBar.setHidden(isHideStatusBar)
  StatusBar.setTranslucent(true)
  StatusBar.setBackgroundColor('#00000066', true)
  Immersive.setImmersive(isImmersive)
} : () => {}

[Grzegorz Mandziak]

OK, thanks :)

[ThatBean]

@yanush @alimek you might want to try react-native-immersive@1.1.0 and check out Restore Immersive State.

[Grzegorz Mandziak]

great :) thanks

[Jacky]

any idea what does the immersive listener do? cause if we can use default component listeners to control the immersive flag, then why there is a immersive listener?

[Deleted user]

Hi @ThatBean
Have you tried using it with Modals?
I'm facing a problem when using it with Modals.
Help me out please.