@gechiui/components/src/mobile/bottom-sheet/sub-sheet/index.native.js

UI components for GeChiUI.

/**
 * External dependencies
 */
import { SafeAreaView } from 'react-native';

/**
 * GeChiUI dependencies
 */
import { Children, useEffect, useContext } from '@gechiui/element';
import { createSlotFill, BottomSheetContext } from '@gechiui/components';

const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );

const BottomSheetSubSheet = ( {
	children,
	navigationButton,
	showSheet,
	isFullScreen,
} ) => {
	const { setIsFullScreen } = useContext( BottomSheetContext );

	useEffect( () => {
		if ( showSheet ) {
			setIsFullScreen( isFullScreen );
		}
	}, [ showSheet, isFullScreen ] );

	return (
		<>
			{ showSheet && (
				<Fill>
					<SafeAreaView>{ children }</SafeAreaView>
				</Fill>
			) }
			{ Children.count( children ) > 0 && navigationButton }
		</>
	);
};

BottomSheetSubSheet.Slot = Slot;
BottomSheetSubSheet.screenName = 'BottomSheetSubSheet';

export default BottomSheetSubSheet;