Skip to content

Commit f2c56d5

Browse files
kligarskikkafar
andauthored
apply suggestions from code review
Co-authored-by: Kacper Kafara <[email protected]>
1 parent 6d9a605 commit f2c56d5

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

versioned_docs/version-7.x/native-stack-navigator.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1040,9 +1040,9 @@ export default function App() {
10401040

10411041
Due to technical issues in platform component integration with `react-native`, `presentation: 'formSheet'` has limited support for `flex: 1`.
10421042

1043-
On Android, using `flex: 1` on a top-level content container passed to a `formSheet` with `showAllowedDetents: 'fitToContents'` causes the sheet to not display at all, leaving only the dimmed background visible. Setting fixed values for `sheetAllowedDetents` works correctly (content is aligned for the highest detent).
1043+
On Android, using `flex: 1` on a top-level content container passed to a `formSheet` with `showAllowedDetents: 'fitToContents'` causes the sheet to not display at all, leaving only the dimmed background visible. This is because it is the sheet, not the parent who is source of the size. Setting fixed values for `sheetAllowedDetents`, e.g. `[0.4, 0.9]`, works correctly (content is aligned for the highest detent).
10441044

1045-
On iOS, `flex: 1` with `showAllowedDetents: 'fitToContents'` works properly but setting a fixed value for `showAllowedDetents` causes the screen to display incorrectly - the height of the container does not fill the `formSheet`. This tradeoff is necessary to prevent ["sheet flickering" problem on iOS](https://github.com/software-mansion/react-native-screens/issues/1722).
1045+
On iOS, `flex: 1` with `showAllowedDetents: 'fitToContents'` works properly but setting a fixed value for `showAllowedDetents` causes the screen to not respect the `flex: 1` style - the height of the container does not fill the `formSheet` fully, but rather inherits intrinsic size of its contents. This tradeoff is *currently* necessary to prevent ["sheet flickering" problem on iOS](https://github.com/software-mansion/react-native-screens/issues/1722).
10461046

10471047
If you don't use `flex: 1` but the content's height is less than max screen height, the rest of the sheet might become translucent or use the default theme background color (you can see this happening on the screenshots in the descrption of [this PR](https://github.com/software-mansion/react-native-screens/pull/2462)). To match the sheet to the background of your content, set `backgroundColor` in the `contentStyle` prop of the given screen.
10481048

0 commit comments

Comments
 (0)