[iOS] Some views are not visible in Formsheet

[itsramiel]

Description

I have a screen with presentation set to formsheet. I want to have a header view, body scrollview, and a footer view. on Android it works fine, but on iOS the header is not displayed and weird thing that the background color of the scrollview extends beyond the footer as well as the scrollview is not fully flexed.

Example Code

// In App.js in a new project

import * as React from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import {
  createStaticNavigation,
  StaticParamList,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go to Form" onPress={() => navigation.navigate('Form')} />
    </View>
  );
}

function Formsheet() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ backgroundColor: 'red' }}>
        <Text>Header</Text>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: 'green' }}>
        <Text>Content</Text>
      </ScrollView>
      <View style={{ backgroundColor: 'blue' }}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Form: {
      screen: Formsheet,
      options: {
        presentation: 'formSheet',
        headerShown: false,
      },
    },
  },
});

type RootStackParamList = StaticParamList<typeof RootStack>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

Screenshots

Before	After
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-07.at.10.20.25.mp4	Screen.Recording.2025-07-07.at.10.20.31.AM.mov

I did get the following warning:

 (NOBRIDGE) WARN  [RNScreens] FormSheet with ScrollView expects at most 2 subviews. Got 5. This might result in incorrect layout.           If you want to display header alongside the scrollView, make sure to apply `collapsable: false` on your header component view.

Removing the footer and leaving the header view as well as body scrollview with header view passed collapsible still does not render the header.

Example Code

// In App.js in a new project

import * as React from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import {
  createStaticNavigation,
  StaticParamList,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go to Form" onPress={() => navigation.navigate('Form')} />
    </View>
  );
}

function Formsheet() {
  return (
    <View style={{ flex: 1 }}>
      <View collapsable style={{ backgroundColor: 'red' }}>
        <Text>Header</Text>
      </View>
      <ScrollView style={{ flex: 1, backgroundColor: 'green' }}>
        <Text>Content</Text>
      </ScrollView>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
    Form: {
      screen: Formsheet,
      options: {
        presentation: 'formSheet',
        headerShown: false,
      },
    },
  },
});

type RootStackParamList = StaticParamList<typeof RootStack>;

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

Screenshots

Before	After
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-07.at.10.23.11.mp4	Screen.Recording.2025-07-07.at.10.23.23.AM.mov

Steps to reproduce

1. Clone repo or example code
2. run app on ios and tap on go to form
3. Note how on iOS the header is not displayed, the background color of the scrollview extends beyond the footer as well as the scrollview is not fully flexed.

Snack or a link to a repository

https://github.com/itsramiel/Formsheet

Screens version

4.11.1

React Native version

0.80.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[itsramiel]

The warning mentions setting collapsible to false but I was setting it to true 🫣

[itsramiel]

Hmm actually, the views are rendering but I am still getting an warning that I have 3 views which i think is logical as I want a header, body, and footer. I don't think it makes sense to restrict the number of views

[joprice]

I'm seeing similar warnings, even with 2 views, with collapsable set to false or true. The scrollview also overlaps the header and the last item in the scrollview is clipped when I scroll to the end. When I have just two views, it seemingly incorrectly says "Got 3".

[joprice]

I figured my issue out. I was using the screenLayout param of react navigation, adding a wrapper component, which must add an extra view alongside the children. Removing the wrapper fixed the layout issues. Is there any other way to work around this?

[MarkusWendorf]

@kkafar I think the issues with formSheets right now is that It only works for 2 children where the first is assumed to be the header right?

react-native-screens/ios/RNSScreenContentWrapper.mm

Lines 137 to 161 in 8aa80e8

	if (scrollViewComponentIndex == 0) {
	CGRect newFrame = scrollViewComponent.frame;
	newFrame.size = size;
	scrollViewComponent.frame = newFrame;
	return YES;
	}
	// Case 2: There is a header - we adjust scrollview size by the header height.
	if (scrollViewComponentIndex == 1) {
	UIView *headerView = self.subviews[0];
	CGRect newFrame = scrollViewComponent.frame;
	newFrame.size = size;
	newFrame.size.height -= headerView.frame.size.height;
	#ifdef RCT_NEW_ARCH_ENABLED
	// For some unknown yet reason on new architecture the scroll view
	// is placed at (0, 0), which makes no sense given there
	// is another child at lower index in flex layout.
	// TODO: Research why this happens and solve this properly.
	if (newFrame.origin.y == 0) {
	newFrame.origin.y = headerView.frame.size.height;
	}
	#endif // RCT_NEW_ARCH_ENABLED
	scrollViewComponent.frame = newFrame;
	return YES;
	}

Are there plans to also support a fixed footer? or both a footer and a header at the same time?