create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
242 lines (227 loc) • 7.79 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react';
import { Platform, StyleSheet, View } from 'react-native'; // @ts-ignore Getting private component
import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
import warnOnce from 'warn-once';
import { ScreenStack, ScreenContext } from 'react-native-screens';
import { StackActions, useTheme } from '@react-navigation/native';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
import HeaderConfig from './HeaderConfig';
import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
import getDefaultHeaderHeight from '../utils/getDefaultHeaderHeight';
import HeaderHeightContext from '../utils/HeaderHeightContext';
const isAndroid = Platform.OS === 'android';
let Container = View;
if (__DEV__) {
const DebugContainer = props => {
const {
stackPresentation,
...rest
} = props;
if (Platform.OS === 'ios' && stackPresentation !== 'push') {
return /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(View, rest));
}
return /*#__PURE__*/React.createElement(View, rest);
}; // @ts-ignore Wrong props
Container = DebugContainer;
}
const MaybeNestedStack = ({
options,
route,
stackPresentation,
children
}) => {
const {
colors
} = useTheme();
const {
headerShown = true,
contentStyle
} = options;
const Screen = React.useContext(ScreenContext);
const isHeaderInModal = isAndroid ? false : stackPresentation !== 'push' && headerShown === true;
const headerShownPreviousRef = React.useRef(headerShown);
React.useEffect(() => {
warnOnce(!isAndroid && stackPresentation !== 'push' && headerShownPreviousRef.current !== headerShown, `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`);
headerShownPreviousRef.current = headerShown;
}, [headerShown, stackPresentation, route.name]);
const content = /*#__PURE__*/React.createElement(Container, {
style: [styles.container, stackPresentation !== 'transparentModal' && stackPresentation !== 'containedTransparentModal' && {
backgroundColor: colors.background
}, contentStyle] // @ts-ignore Wrong props passed to View
,
stackPresentation: stackPresentation
}, children);
const topInset = useSafeAreaInsets().top;
const dimensions = useSafeAreaFrame();
const headerHeight = getDefaultHeaderHeight(dimensions, topInset, stackPresentation);
if (isHeaderInModal) {
return /*#__PURE__*/React.createElement(ScreenStack, {
style: styles.container
}, /*#__PURE__*/React.createElement(Screen, {
enabled: true,
isNativeStack: true,
style: StyleSheet.absoluteFill
}, /*#__PURE__*/React.createElement(HeaderHeightContext.Provider, {
value: headerHeight
}, /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
route: route
})), content)));
}
return content;
};
const RouteView = ({
descriptors,
route,
index,
navigation,
stateKey
}) => {
const {
options,
render: renderScene
} = descriptors[route.key];
const {
customAnimationOnSwipe,
fullScreenSwipeEnabled,
gestureEnabled,
headerShown,
nativeBackButtonDismissalEnabled = false,
replaceAnimation = 'pop',
screenOrientation,
stackAnimation,
statusBarAnimation,
statusBarColor,
statusBarHidden,
statusBarStyle,
statusBarTranslucent
} = options;
let {
stackPresentation = 'push'
} = options;
if (index === 0) {
// first screen should always be treated as `push`, it resolves problems with no header animation
// for navigator with first screen as `modal` and the next as `push`
stackPresentation = 'push';
}
const isHeaderInPush = isAndroid ? headerShown : stackPresentation === 'push' && headerShown !== false;
const dimensions = useSafeAreaFrame();
const topInset = useSafeAreaInsets().top;
const headerHeight = getDefaultHeaderHeight(dimensions, topInset, stackPresentation);
const parentHeaderHeight = React.useContext(HeaderHeightContext);
const Screen = React.useContext(ScreenContext);
return /*#__PURE__*/React.createElement(Screen, {
key: route.key,
enabled: true,
isNativeStack: true,
style: StyleSheet.absoluteFill,
customAnimationOnSwipe: customAnimationOnSwipe,
fullScreenSwipeEnabled: fullScreenSwipeEnabled,
gestureEnabled: isAndroid ? false : gestureEnabled,
nativeBackButtonDismissalEnabled: nativeBackButtonDismissalEnabled,
replaceAnimation: replaceAnimation,
screenOrientation: screenOrientation,
stackAnimation: stackAnimation,
stackPresentation: stackPresentation,
statusBarAnimation: statusBarAnimation,
statusBarColor: statusBarColor,
statusBarHidden: statusBarHidden,
statusBarStyle: statusBarStyle,
statusBarTranslucent: statusBarTranslucent,
onHeaderBackButtonClicked: () => {
navigation.dispatch({ ...StackActions.pop(),
source: route.key,
target: stateKey
});
},
onWillAppear: () => {
navigation.emit({
type: 'transitionStart',
data: {
closing: false
},
target: route.key
});
},
onWillDisappear: () => {
navigation.emit({
type: 'transitionStart',
data: {
closing: true
},
target: route.key
});
},
onAppear: () => {
navigation.emit({
type: 'appear',
target: route.key
});
navigation.emit({
type: 'transitionEnd',
data: {
closing: false
},
target: route.key
});
},
onDisappear: () => {
navigation.emit({
type: 'transitionEnd',
data: {
closing: true
},
target: route.key
});
},
onDismissed: e => {
navigation.emit({
type: 'dismiss',
target: route.key
});
const dismissCount = e.nativeEvent.dismissCount > 0 ? e.nativeEvent.dismissCount : 1;
navigation.dispatch({ ...StackActions.pop(dismissCount),
source: route.key,
target: stateKey
});
}
}, /*#__PURE__*/React.createElement(HeaderHeightContext.Provider, {
value: isHeaderInPush !== false ? headerHeight : parentHeaderHeight !== null && parentHeaderHeight !== void 0 ? parentHeaderHeight : 0
}, /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
route: route,
headerShown: isHeaderInPush
})), /*#__PURE__*/React.createElement(MaybeNestedStack, {
options: options,
route: route,
stackPresentation: stackPresentation
}, renderScene())));
};
function NativeStackViewInner({
state,
navigation,
descriptors
}) {
const {
key,
routes
} = state;
return /*#__PURE__*/React.createElement(ScreenStack, {
style: styles.container
}, routes.map((route, index) => /*#__PURE__*/React.createElement(RouteView, {
key: route.key,
descriptors: descriptors,
route: route,
index: index,
navigation: navigation,
stateKey: key
})));
}
export default function NativeStackView(props) {
return /*#__PURE__*/React.createElement(SafeAreaProviderCompat, null, /*#__PURE__*/React.createElement(NativeStackViewInner, props));
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
//# sourceMappingURL=NativeStackView.js.map