react-native-screens
Version:
Native navigation primitives for your React Native app.
205 lines (198 loc) • 9.14 kB
JavaScript
'use client';
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { Animated, Platform } from 'react-native';
import TransitionProgressContext from '../TransitionProgressContext';
import DelayedFreeze from './helpers/DelayedFreeze';
import { freezeEnabled, isNativePlatformSupported, screensEnabled } from '../core';
// Native components
import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
import { usePrevious } from './helpers/usePrevious';
import { EDGE_TO_EDGE, transformEdgeToEdgeProps } from './helpers/edge-to-edge';
import { SHEET_DIMMED_ALWAYS, resolveSheetAllowedDetents, resolveSheetInitialDetentIndex, resolveSheetLargestUndimmedDetent } from './helpers/sheet';
const AnimatedNativeScreen = Animated.createAnimatedComponent(ScreenNativeComponent);
const AnimatedNativeModalScreen = Animated.createAnimatedComponent(ModalScreenNativeComponent);
// Incomplete type, all accessible properties available at:
// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
export const InnerScreen = /*#__PURE__*/React.forwardRef(function InnerScreen(props, ref) {
const innerRef = React.useRef(null);
React.useImperativeHandle(ref, () => innerRef.current, []);
const prevActivityState = usePrevious(props.activityState);
const setRef = ref => {
innerRef.current = ref;
props.onComponentRef?.(ref);
};
const closing = React.useRef(new Animated.Value(0)).current;
const progress = React.useRef(new Animated.Value(0)).current;
const goingForward = React.useRef(new Animated.Value(0)).current;
const {
enabled = screensEnabled(),
freezeOnBlur = freezeEnabled(),
shouldFreeze,
...rest
} = props;
// To maintain default behavior of formSheet stack presentation style and to have reasonable
// defaults for new medium-detent iOS API we need to set defaults here
const {
// formSheet presentation related props
sheetAllowedDetents = [1.0],
sheetLargestUndimmedDetentIndex = SHEET_DIMMED_ALWAYS,
sheetGrabberVisible = false,
sheetCornerRadius = -1.0,
sheetExpandsWhenScrolledToEdge = true,
sheetElevation = 24,
sheetInitialDetentIndex = 0,
// Other
stackPresentation,
// Events for override
onAppear,
onDisappear,
onWillAppear,
onWillDisappear
} = rest;
if (enabled && isNativePlatformSupported) {
const resolvedSheetAllowedDetents = resolveSheetAllowedDetents(sheetAllowedDetents);
const resolvedSheetLargestUndimmedDetent = resolveSheetLargestUndimmedDetent(sheetLargestUndimmedDetentIndex, resolvedSheetAllowedDetents.length - 1);
const resolvedSheetInitialDetentIndex = resolveSheetInitialDetentIndex(sheetInitialDetentIndex, resolvedSheetAllowedDetents.length - 1);
// Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens (there is a need for different
// shadow nodes).
const shouldUseModalScreenComponent = Platform.select({
ios: !(stackPresentation === undefined || stackPresentation === 'push' || stackPresentation === 'containedModal' || stackPresentation === 'containedTransparentModal'),
android: false,
default: false
});
const AnimatedScreen = shouldUseModalScreenComponent ? AnimatedNativeModalScreen : AnimatedNativeScreen;
let {
// Filter out active prop in this case because it is unused and
// can cause problems depending on react-native version:
// https://github.com/react-navigation/react-navigation/issues/4886
active,
activityState,
children,
isNativeStack,
gestureResponseDistance,
onGestureCancel,
style,
...props
} = rest;
if (active !== undefined && activityState === undefined) {
console.warn('It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens');
activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
}
if (isNativeStack && prevActivityState !== undefined && activityState !== undefined) {
if (prevActivityState > activityState) {
throw new Error('[RNScreens] activityState cannot be decreased in NativeStack');
}
}
const handleRef = ref => {
// Workaround is necessary to prevent React Native from hiding frozen screens.
// See this PR: https://github.com/grahammendick/navigation/pull/860
if (ref?.viewConfig?.validAttributes?.style) {
ref.viewConfig.validAttributes.style = {
...ref.viewConfig.validAttributes.style,
display: null
};
setRef(ref);
} else if (ref?._viewConfig?.validAttributes?.style) {
ref._viewConfig.validAttributes.style = {
...ref._viewConfig.validAttributes.style,
display: null
};
setRef(ref);
}
};
const freeze = freezeOnBlur && (shouldFreeze !== undefined ? shouldFreeze : activityState === 0);
return /*#__PURE__*/React.createElement(DelayedFreeze, {
freeze: freeze
}, /*#__PURE__*/React.createElement(AnimatedScreen, _extends({}, props, {
/**
* This messy override is to conform NativeProps used by codegen and
* our Public API. To see reasoning go to this PR:
* https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
*/
onAppear: onAppear,
onDisappear: onDisappear,
onWillAppear: onWillAppear,
onWillDisappear: onWillDisappear,
onGestureCancel: onGestureCancel ?? (() => {
// for internal use
})
//
// Hierarchy of screens is handled on the native side and setting zIndex value causes this issue:
// https://github.com/software-mansion/react-native-screens/issues/2345
// With below change of zIndex, we force RN diffing mechanism to NOT include detaching and attaching mutation in one transaction.
// Detailed information can be found here https://github.com/software-mansion/react-native-screens/pull/2351
,
style: [style, {
zIndex: undefined
}],
activityState: activityState,
sheetAllowedDetents: resolvedSheetAllowedDetents,
sheetLargestUndimmedDetent: resolvedSheetLargestUndimmedDetent,
sheetElevation: sheetElevation,
sheetGrabberVisible: sheetGrabberVisible,
sheetCornerRadius: sheetCornerRadius,
sheetExpandsWhenScrolledToEdge: sheetExpandsWhenScrolledToEdge,
sheetInitialDetent: resolvedSheetInitialDetentIndex,
gestureResponseDistance: {
start: gestureResponseDistance?.start ?? -1,
end: gestureResponseDistance?.end ?? -1,
top: gestureResponseDistance?.top ?? -1,
bottom: gestureResponseDistance?.bottom ?? -1
}
// This prevents showing blank screen when navigating between multiple screens with freezing
// https://github.com/software-mansion/react-native-screens/pull/1208
,
ref: handleRef,
onTransitionProgress: !isNativeStack ? undefined : Animated.event([{
nativeEvent: {
progress,
closing,
goingForward
}
}], {
useNativeDriver: true
})
}), !isNativeStack ?
// see comment of this prop in types.tsx for information why it is needed
children : /*#__PURE__*/React.createElement(TransitionProgressContext.Provider, {
value: {
progress,
closing,
goingForward
}
}, children)));
} else {
// same reason as above
let {
active,
activityState,
style,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onComponentRef,
...props
} = rest;
if (active !== undefined && activityState === undefined) {
activityState = active !== 0 ? 2 : 0;
}
return /*#__PURE__*/React.createElement(Animated.View, _extends({
style: [style, {
display: activityState !== 0 ? 'flex' : 'none'
}],
ref: setRef
}, props));
}
});
// context to be used when the user wants to use enhanced implementation
// e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
export const ScreenContext = /*#__PURE__*/React.createContext(InnerScreen);
const Screen = /*#__PURE__*/React.forwardRef((props, ref) => {
const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
return /*#__PURE__*/React.createElement(ScreenWrapper, _extends({}, EDGE_TO_EDGE ? transformEdgeToEdgeProps(props) : props, {
ref: ref
}));
});
Screen.displayName = 'Screen';
export default Screen;
//# sourceMappingURL=Screen.js.map