import { getHeaderTitle, Header, HeaderBackButton, HeaderBackContext, SafeAreaProviderCompat, Screen, } from '@react-navigation/elements'; import type { ParamListBase, StackNavigationState, } from '@react-navigation/native'; import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import type { NativeStackDescriptorMap, NativeStackNavigationHelpers, } from '../types'; type Props = { state: StackNavigationState; // This is used for the native implementation of the stack. // eslint-disable-next-line react/no-unused-prop-types navigation: NativeStackNavigationHelpers; descriptors: NativeStackDescriptorMap; }; const TRANSPARENT_PRESENTATIONS = [ 'transparentModal', 'containedTransparentModal', ]; export default function NativeStackView({ state, descriptors }: Props) { const parentHeaderBack = React.useContext(HeaderBackContext); return ( {state.routes.map((route, i) => { const isFocused = state.index === i; const previousKey = state.routes[i - 1]?.key; const nextKey = state.routes[i + 1]?.key; const previousDescriptor = previousKey ? descriptors[previousKey] : undefined; const nextDescriptor = nextKey ? descriptors[nextKey] : undefined; const { options, navigation, render } = descriptors[route.key]; const headerBack = previousDescriptor ? { title: getHeaderTitle( previousDescriptor.options, previousDescriptor.route.name ), } : parentHeaderBack; const canGoBack = headerBack !== undefined; const { header, headerShown, headerTintColor, headerBackImageSource, headerLeft, headerRight, headerTitle, headerTitleAlign, headerTitleStyle, headerStyle, headerShadowVisible, headerTransparent, headerBackground, headerBackTitle, presentation, contentStyle, } = options; const nextPresentation = nextDescriptor?.options.presentation; return ( headerLeft({ tintColor, canGoBack, label: headerBackTitle, }) : headerLeft === undefined && canGoBack ? ({ tintColor }) => ( ( ) : undefined } onPress={navigation.goBack} canGoBack={canGoBack} /> ) : headerLeft } headerRight={ typeof headerRight === 'function' ? ({ tintColor }) => headerRight({ tintColor, canGoBack }) : headerRight } headerTitle={ typeof headerTitle === 'function' ? ({ children, tintColor }) => headerTitle({ children, tintColor }) : headerTitle } headerTitleAlign={headerTitleAlign} headerTitleStyle={headerTitleStyle} headerTransparent={headerTransparent} headerShadowVisible={headerShadowVisible} headerBackground={headerBackground} headerStyle={headerStyle} /> ) } style={[ StyleSheet.absoluteFill, { display: isFocused || (nextPresentation != null && TRANSPARENT_PRESENTATIONS.includes(nextPresentation)) ? 'flex' : 'none', }, presentation != null && TRANSPARENT_PRESENTATIONS.includes(presentation) ? { backgroundColor: 'transparent' } : null, ]} > {render()} ); })} ); } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { flex: 1, }, backImage: { height: 24, width: 24, margin: 3, resizeMode: 'contain', }, });