Skip to main content

Troubleshooting

React Native Gesture Handler​

react-native-gesture-handler

On Android, RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with GestureHandlerRootView.

import { GestureHandlerRootView } from 'react-native-gesture-handler'
return (
  <TrueSheet ref={sheet}>
    <GestureHandlerRootView>
      <View />
    </GestureHandlerRootView>
  </TrueSheet>
)

React Navigation​

react-navigation

On IOS, navigating to a screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!

Example:

const sheet = useRef<TrueSheet>(null)

const navigate = async () => {
  await sheet.current?.dismiss() // wait for the sheet to dismiss ✅
  navigation.navigate('SomeScreen') // navigate to the screen 🎉
}

return (
  <TrueSheet ref={sheet}>
    <Button onPress={navigate} title="Navigate to SomeScreen" />
    <View />
  </TrueSheet>
)

Present during Mount​

On iOS, when setting initialIndex and enabling initialIndexAnimated (default is true) to present during mount, the presentation animation becomes weird. This happens because RNN is not yet finished when the sheet is trying to present.

To solve this, you can do the following:

  1. Set initialIndexAnimated to false. Disables animation during mount.
return (
  <TrueSheet initialIndex={0} initialIndexAnimated={false}>
    <View />
  </TrueSheet>
)
  1. Wait for the screen to fully transition. See transitionEnd event.
const navigation = useNavigation()
const [isScreenShown, setIsScreenShown] = useState(false)

// Subscribe to the transitionEnd event ✅
useEffect(() => {
  const unsubscribe = navigation.addListener("transitionEnd", ({ data }) => {
    if (!data.closing) {
      setIsScreenShown(true)
    }
  })

  return unsubscribe
}, [])

// Wait for the screen to finish transitioning ✅
if (!isScreenShown) return null

// Finally show the sheet 🎉
return (
  <TrueSheet initialIndex={0} initialIndexAnimated>
    <View />
  </TrueSheet>
)

Weird layout render​

The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of flex=1 in your content styles. Instead, use fixed height or employ flexGrow, flexBasis, etc., to manage your layout requirements.