| 1 | {"version":3,"sources":["SceneView.tsx"],"names":["React","View","StyleSheet","SceneView","Component","loading","Math","abs","props","navigationState","index","lazyPreloadDistance","value","setState","prevState","getDerivedStateFromProps","state","componentDidMount","lazy","unsubscribe","addEnterListener","handleEnter","timerHandler","setTimeout","componentDidUpdate","prevProps","componentWillUnmount","clearTimeout","undefined","render","layout","style","focused","styles","route","width","absoluteFill","children","create","flex","overflow"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n EventEmitterProps,\n NavigationState,\n Route,\n} from './types';\n\ntype Props<T extends Route> = SceneRendererProps &\n EventEmitterProps & {\n navigationState: NavigationState<T>;\n lazy: boolean;\n lazyPreloadDistance: number;\n index: number;\n children: (props: { loading: boolean }) => React.ReactNode;\n style?: StyleProp<ViewStyle>;\n };\n\ntype State = {\n loading: boolean;\n};\n\nexport default class SceneView<T extends Route> extends React.Component<\n Props<T>,\n State\n> {\n static getDerivedStateFromProps(props: Props<Route>, state: State) {\n if (\n state.loading &&\n Math.abs(props.navigationState.index - props.index) <=\n props.lazyPreloadDistance\n ) {\n // Always render the route when it becomes focused\n return { loading: false };\n }\n\n return null;\n }\n\n state = {\n loading:\n Math.abs(this.props.navigationState.index - this.props.index) >\n this.props.lazyPreloadDistance,\n };\n\n componentDidMount() {\n if (this.props.lazy) {\n // If lazy mode is enabled, listen to when we enter screens\n this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n } else if (this.state.loading) {\n // If lazy mode is not enabled, render the scene with a delay if not loaded already\n // This improves the initial startup time as the scene is no longer blocking\n this.timerHandler = setTimeout(\n () => this.setState({ loading: false }),\n 0\n );\n }\n }\n\n componentDidUpdate(prevProps: Props<T>, prevState: State) {\n if (\n this.props.lazy !== prevProps.lazy ||\n this.state.loading !== prevState.loading\n ) {\n // We only need the listener if the tab hasn't loaded yet and lazy is enabled\n if (this.props.lazy && this.state.loading) {\n this.unsubscribe?.();\n this.unsubscribe = this.props.addEnterListener(this.handleEnter);\n } else {\n this.unsubscribe?.();\n }\n }\n }\n\n componentWillUnmount() {\n this.unsubscribe?.();\n\n if (this.timerHandler) {\n clearTimeout(this.timerHandler);\n this.timerHandler = undefined;\n }\n }\n\n private timerHandler: NodeJS.Timeout | undefined;\n\n private unsubscribe: (() => void) | null = null;\n\n private handleEnter = (value: number) => {\n const { index } = this.props;\n\n // If we're entering the current route, we need to load it\n if (value === index) {\n this.setState((prevState) => {\n if (prevState.loading) {\n return { loading: false };\n }\n\n return null;\n });\n }\n };\n\n render() {\n const { navigationState, index, layout, style } = this.props;\n const { loading } = this.state;\n\n const focused = navigationState.index === index;\n\n return (\n <View\n accessibilityElementsHidden={!focused}\n importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}\n style={[\n styles.route,\n // If we don't have the layout yet, make the focused screen fill the container\n // This avoids delay before we are able to render pages side by side\n layout.width\n ? { width: layout.width }\n : focused\n ? StyleSheet.absoluteFill\n : null,\n style,\n ]}\n >\n {\n // Only render the route only if it's either focused or layout is available\n // When layout is not available, we must not render unfocused routes\n // so that the focused route can fill the screen\n focused || layout.width ? this.props.children({ loading }) : null\n }\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n route: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]} |