Skip to content

Strange dazzling rippling light effect tapping the background of a sheet on iOS with detent < 0.9 #652

@seba9999

Description

@seba9999

Before submitting a new issue

  • I tested using the latest version of the library.
  • I tested using a supported version of React Native.
  • I checked for existing issues that might answer my question.

Bug Summary

I'm experiencing a "strange" dazzling light effect when tapping on the sheet background and it doesn't seem to be linked to the liquid glass effect ... ( I've tried disablind transparency and animation in the iphone)

Maybe I'm not well enough used to iOS effects (still learning!) and it is some kind of design ? But it feels odd and also this effect stops when opening to an detent > 0.9 ...

But my use-case is a form to uplaod a file and so the input with the filename is akward to click to with this light ripple effect ... Can we disable it ?

I've tried to disable it with blurOptions or setting a background color ...

 <TrueSheet
      ref={ref}
      className={className}
      detents={detents || ['auto']}
      blurOptions={{
        intensity: 0,
        interaction: false,
      }}
      dismissible={dismissible}
      dimmed={dimmed}
      grabber={showHandleIndicator}
      scrollable={scrollable}
      onDidDismiss={onDismiss}
      onDetentChange={onChange}
      backgroundColor={"#ffffff"}
      scrollableOptions={{ scrollingExpandsSheet: true }}>

with no luck ...

Affected Platforms

  • iOS
  • Android
  • Web
  • Other

Library Version

3.10.0

Environment Info

System:
  OS: Windows 11 10.0.26200
  CPU: (28) x64 13th Gen Intel(R) Core(TM) i7-13850HX
  Memory: 15.81 GB / 31.69 GB
Binaries:
  Node:
    version: 25.2.1
    path: C:\nvm4w\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 11.6.2
    path: C:\nvm4w\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "35"
      - "36"
      - "36"
    Build Tools:
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-253.29346.138.2531.14876573
  Visual Studio:
    - 17.14.36804.6 (Visual Studio Professional 2022)
Languages:
  Java:
    version: 21.0.9
    path: C:\Program Files\Android\Android Studio\jbr\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.2
    wanted: ^20.1.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.85.1 is now available (your project is running on v0.81.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.85.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.5&to=0.85.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Steps to Reproduce

  1. Open a trueesheet in iOS with detent < 0.9

Repro

Open a simple TruSheet on an i-phone :

import { TrueSheet } from "@lodev09/react-native-true-sheet"

export const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const present = async () => {
    await sheet.current?.present()
  }

  const dismiss = async () => {
    await sheet.current?.dismiss()
  }

  return (
    <View>
      <Button onPress={present} title="Present" />
       <TrueSheet
          ref={sheet}
          detents={[0.8]}
          blurOptions={{
            intensity: 0,
            interaction: false,
          }}
          dismissible
          dimmed
          backgroundColor={"#ffffff"}
          scrollableOptions={{ scrollingExpandsSheet: true }}>
            <Button onPress={dismiss} title="Dismiss" />
           <View style={{height: "100%", width:"100%"}}>
               <Text>Hello World! </Text>
           </View>
      </TrueSheet>
    </View>
  )
}

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingneeds reproNeed to replicate this issue

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions