lodev09
commented
2 months ago TrueSheet doesn't have first-class support for react-navigation, yet. As you mentioned, react-navigation has its own native implementation and doesn't play well with TrueSheet.
You can still use react-navigation with TrueSheet but it's not possible to contain the stack inside the sheet.
Description: When attempting to use a StackNavigator within the TrueSheet component, the sheet displays a white screen instead of the expected navigation content. This issue occurs on both iOS and Android platforms.
Steps to Reproduce:
Create a new React Native project. Install @lodev09/react-native-true-sheet and @react-navigation/stack. Set up a basic StackNavigator with a few screens. Include the StackNavigator inside the TrueSheet component. Present the TrueSheet. Expected Behavior: The StackNavigator should display its initial screen within the TrueSheet component.
Actual Behavior: The TrueSheet displays a white screen, and the StackNavigator content is not visible.
Example Code:
javascript Copy code import React, { useRef } from 'react'; import { View, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { TrueSheet } from '@lodev09/react-native-true-sheet';
const Stack = createStackNavigator();
const HomeScreen = ({ navigation }) => (
);
const DetailsScreen = () => (
);
const App = () => { const sheet = useRef(null);
const present = async () => { await sheet.current?.present(); };
return (
); };
export default App; Environment:
Expo version: 51 Platform: iOS/Android Additional Context:
The issue might be related to how the TrueSheet component handles nested navigation components. The problem persists despite various attempts to style or wrap the StackNavigator component. Possible Solution: Any guidance or fixes on ensuring the StackNavigator displays correctly within the TrueSheet component would be greatly appreciated.
Thank you for your attention to this issue.