when I am trying to render an absolute element inside the modal, only part of it which is inside the modal is getting shown and not the rest of it.
Code snippet.
import { useRef } from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import { TrueSheet } from '@lodev09/react-native-true-sheet';
export default function AssetExample() {
const sheet = useRef(null);
// Present the sheet ✅
const present = async () => {
await sheet.current?.present();
console.log('horray! sheet has been presented 💩');
};
// Dismiss the sheet ✅
const dismiss = async () => {
// await sheet.current?.dismiss()
console.log('Bye bye 👋');
};
return (
<View>
<Button onPress={present} title="Present" />
<TrueSheet ref={sheet} sizes={['auto', 'auto']}>
<View
style={{ height: 300, width: 360, backgroundColor: 'red' }}>
<View
style={{
height: 100,
width: 100,
backgroundColor: 'blue',
position: 'absolute',
top: -80,
left: 0,
right: 0,
}}></View>
</View>
</TrueSheet>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
padding: 24,
},
paragraph: {
margin: 24,
marginTop: 0,
fontSize: 14,
fontWeight: 'bold',
textAlign: 'center',
},
logo: {
height: 128,
width: 128,
},
});
screenshot of the error, I am trying to render blue element which is having height 100px in the code but only the part which is inside modal.
Before submitting a new issue
Bug Summary
when I am trying to render an absolute element inside the modal, only part of it which is inside the modal is getting shown and not the rest of it.
Affected Platforms
Library Version
2.0.6
Environment Info
System: OS: macOS 26.4.1 CPU: (12) arm64 Apple M3 Pro Memory: 161.69 MB / 18.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 25.6.0 path: /opt/homebrew/bin/node Yarn: version: 1.22.22 path: /opt/homebrew/bin/yarn npm: version: 11.8.0 path: /opt/homebrew/bin/npm Watchman: version: 2026.01.12.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/lib/ruby/gems/4.0.0/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 25.4 - iOS 26.4 - macOS 26.4 - tvOS 26.4 - visionOS 26.4 - watchOS 26.4 Android SDK: API Levels: - "30" - "33" - "34" - "35" - "36" Build Tools: - 35.0.0 - 36.0.0 - 36.1.0 System Images: - android-33 | AOSP ATD ARM 64 v8a - android-35 | Intel x86_64 Atom - android-36.1 | Google Play ARM 64 v8a - android-36 | Google Play ARM 64 v8a - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2025.3 AI-253.31033.145.2533.15176040 Xcode: version: 26.4.1/17E202 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.18 path: /usr/bin/javac Ruby: version: 4.0.1 path: /opt/homebrew/opt/ruby/bin/ruby npmPackages: "@react-native-community/cli": installed: 19.1.2 wanted: ^19.1.1 react: installed: 19.0.0 wanted: 19.0.0 react-native: installed: 0.78.3 wanted: 0.78.3 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: true newArchEnabled: trueSteps to Reproduce
Code snippet.
Repro
added the code snippet
Additional Context
screenshot of the error, I am trying to render blue element which is having height 100px in the code but only the part which is inside modal.