Dimming

One of the most common use cases for a Bottom Sheet is to present it while still allowing users to interact with background components, such as in a Maps app.

In this guide, you can configure TrueSheet to achieve this exact functionality.

How?

You can easily disable the dimmed background of the sheet by setting dimmed to false.

export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      dimmed={false}
    >
      <View />
    </TrueSheet>
  )
}

Dimmed by Detent Index

To further customize the dimming behavior, dimmedDetentIndex is also available. Set the detent index at which you want the sheet to start dimming.

export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      dimmedDetentIndex={1} // Dim will start at 69% ✅
    >
      <View />
    </TrueSheet>
  )
}

dimmedDetentIndex is ignored if dimmed is set to false.

Dim Color and Opacity

Use dimColor and dimOpacity to change the dim's color and how strong it is.

export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 1]}
      dimColor="#1b0a3c"
      dimOpacity={0.3}
    >
      <View />
    </TrueSheet>
  )
}

dimOpacity={0} hides the dim, but it still blocks touches to the background and a tap still dismisses the sheet. Set dimmed={false} to let touches through.

On iOS, setting dimColor, dimOpacity, or dimBlur replaces the system dim with a custom dim layer. Stacked sheets each add their own layer, so the background gets darker with every sheet.

Dim Blur

Use dimBlur to blur the content behind the sheet instead of tinting it. It takes the same styles as backgroundBlur, and dimOpacity sets how strong the blur is.

export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 1]}
      dimBlur="system-ultra-thin-material-dark"
      dimOpacity={0.4}
    >
      <View />
    </TrueSheet>
  )
}

Over the blur, each style draws the tint of its iOS material, so the dim looks the same on iOS, Android, and Web. dimColor is ignored.

On Android, the blur needs Android 12 or later and the system's window blurs, which battery saver and the user's settings can turn off. Without them, the background is only tinted.

Customizing Dimming Alpha

You can dynamically control the dimming opacity based on the sheet's position using ReanimatedTrueSheet with animatedPosition.

Learn more about Reanimated integration in the Reanimated guide.

import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider, useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'
import { StyleSheet } from 'react-native'

export const App = () => {
  return (
    <ReanimatedTrueSheetProvider>
      <View style={styles.container}>
        <CustomBackdrop />
        <Sheet />
      </View>
    </ReanimatedTrueSheetProvider>
  )
}

const CustomBackdrop = () => {
  const { animatedPosition } = useReanimatedTrueSheet()

  const backdropStyle = useAnimatedStyle(() => ({
    opacity: animatedPosition.value * 0.5, // Adjust multiplier for desired alpha
  }))

  return <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]} />
}

const Sheet = () => {
  return (
    <ReanimatedTrueSheet
      detents={[0.25, 0.5, 1]}
      dimmed={false}
    >
      <View />
    </ReanimatedTrueSheet>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backdrop: {
    backgroundColor: 'black',
  },
})

This allows you to create custom dimming effects that respond to the sheet's movement in real-time.