diff --git a/README.md b/README.md index 21ee2cdc..b651b142 100644 --- a/README.md +++ b/README.md @@ -249,6 +249,13 @@ This view is usually only shown for a split second. Keep it lightweight. By default, this renders `null`. + +##### `removeClippedSubviews` + +Boolean indicating whether to remove invisible views (such as unfocused screens) from the native view hierarchy to improve memory usage. Defaults to `false`. + +**Note**: Don't enable this on iOS where this is buggy and views don't re-appear. + ##### `keyboardDismissMode` String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are: diff --git a/src/Pager.js b/src/Pager.js index da032681..f3a42e51 100644 --- a/src/Pager.js +++ b/src/Pager.js @@ -1,7 +1,7 @@ /* @flow */ import * as React from 'react'; -import { StyleSheet, Platform, Keyboard } from 'react-native'; +import { StyleSheet, Keyboard } from 'react-native'; import { PanGestureHandler, State } from 'react-native-gesture-handler'; import Animated, { Easing } from 'react-native-reanimated'; @@ -72,6 +72,9 @@ type Props = {| onIndexChange: (index: number) => mixed, navigationState: NavigationState, layout: Layout, + // Clip unfocused views to improve memory usage + // Don't enable this on iOS where this is buggy and views don't re-appear + removeClippedSubviews?: boolean, children: (props: {| // Animated value which represents the state of current index // It can include fractional digits as it represents the intermediate value @@ -444,7 +447,13 @@ export default class Pager extends React.Component> { ]); render() { - const { layout, navigationState, swipeEnabled, children } = this.props; + const { + layout, + navigationState, + swipeEnabled, + children, + removeClippedSubviews, + } = this.props; // Make sure that the translation doesn't exceed the bounds to prevent overscrolling const translateX = min( @@ -479,11 +488,7 @@ export default class Pager extends React.Component> { failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]} > = {| tabBarPosition: 'top' | 'bottom', initialLayout?: { width?: number, height?: number }, lazy: boolean, + removeClippedSubviews?: boolean, sceneContainerStyle?: ViewStyleProp, style?: ViewStyleProp, |}; @@ -51,6 +52,7 @@ export default class TabView extends React.Component< keyboardDismissMode: 'on-drag', swipeEnabled: true, lazy: false, + removeClippedSubviews: false, }; state = { @@ -87,6 +89,7 @@ export default class TabView extends React.Component< onSwipeEnd, navigationState, lazy, + removeClippedSubviews, keyboardDismissMode, swipeEnabled, swipeDistanceThreshold, @@ -112,6 +115,7 @@ export default class TabView extends React.Component< onSwipeStart={onSwipeStart} onSwipeEnd={onSwipeEnd} onIndexChange={this._jumpToIndex} + removeClippedSubviews={removeClippedSubviews} > {({ position, render, addListener, removeListener, jumpTo }) => { // All of the props here must not change between re-renders