React-native-screens: [3.2.0] iOS modal with header

Created on 12 May 2021 · 6Comments · Source: software-mansion/react-native-screens

Description

Trying out latest version 3.2.0. According to https://github.com/software-mansion/react-native-screens/pull/821, now in modal in iOS would have header by default, alinged with Android's behaviour. But without headerShown: true, there is still no header present in iOS.
Therefore I added headerShown: true in stack options, but then I get the warning Be aware that changing the visibility of header in modal on iOS will result in resetting the state of the screen.

Am I missing any information here?

Steps To Reproduce

options={{
  stackPresentation: 'modal'
}}

Above in iOS header doesn't show up.

options={{
  stackPresentation: 'modal',
  headerShown: true
}}

Above in iOS, header does show up, but with the warning.

Package versions

React: 17.0.2
React Native: 0.64.1
React Native Screens: 3.2.0

Source

xmflsct

All 6 comments

As you can read in the release notes (https://github.com/software-mansion/react-native-screens/releases/tag/3.2.0), the header in the modal is not rendered by default in order not to change the previous default behavior. I am not sure where there is an information about them being shown by default in #821? The information is a warning about changing the visibility after rendering the header in modal, so if you decided to do it, you shouldn't make it hidden again due to the implementation of rendering it, which will cause the whole screen to rerender. Can I help you more with this?

WoLewicki on 13 May 2021

👍1

@WoLewicki Sorry I miss reading the most important part. But I still don't understand why I would get this warning by adding headerShown: true?

        <Stack.Screen
          name='The-Screen'
          component={TheScreen}
          options={({
            stackPresentation: 'modal',
            headerShown: true,
            headerTitle: 'The Title',
          })}
        />

xmflsct on 14 May 2021

I think this answers similar question: https://github.com/software-mansion/react-native-screens/pull/821#discussion_r633399356

WoLewicki on 17 May 2021

👍1

@WoLewicki Thank you for the reference. Feel free to close the issue. Though guess others might wonder why the warning. :)

xmflsct on 17 May 2021

Yeah, but I think it is good to explicitly warn people about potential problems and they can disable the warning then. I will close this issue then.

WoLewicki on 18 May 2021

👍1

I appreciate the warning though as a user I had to disable the header to get it to conform to a similar layout for Android.

I could disable the warning however, the stack presentation seems to be iOS specific.

If we had no intention of updating the header state (which I assume most people don't) could setting the header shown to false not trigger the warning (since it does not render by default anyway)?