Adding Footer

Do you need a FAB (Floating Action Button) on the sheet? Or perhaps a small banner at the bottom? We've got you covered!

TrueSheet provides first-class support for a Footer component. This component will float at the bottom of the sheet.

How?

Define your footer component.

const SomeFooter = () => {
  return (
    <View>
      <Text>My Foot-er is Awesome.</Text>
    </View>
  )
}

Stick it in the footer.

const App = () => {
  return (
    <TrueSheet footer={SomeFooter}>
      <View />
    </TrueSheet>
  )
}

tip

For best performance, use ReactElement instead!

const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      footer={
        <View>
          <Text>My Foot-er is more awesome.</Text>
        </View>
      }
    >
      <View />
    </TrueSheet>
  )
}

Safe Area Handling

The footer is pinned to the bottom edge of the sheet. The sheet height automatically includes the bottom safe area on both iOS and Android. To ensure your footer extends properly into the safe area, add bottom padding:

import { Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const isIPad = Platform.OS === 'ios' && Platform.isPad;

const MyFooter = () => {
  const insets = useSafeAreaInsets();
  const bottomInset = isIPad ? 0 : insets.bottom;

  return (
    <View style={{ paddingBottom: bottomInset, backgroundColor: '#333' }}>
      <View style={{ height: 60, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: '#fff' }}>Footer Content</Text>
      </View>
    </View>
  );
};

// Usage
<TrueSheet detents={['auto']} footer={<MyFooter />}>
  {/* content */}
</TrueSheet>

This ensures the footer background extends into the safe area while keeping the content above the home indicator.

note

On iPad, the sheet is displayed as a floating modal, so bottom padding is not needed.