Skip to content

Commit

Permalink
feat: add optional screens per navigator (#636)
Browse files Browse the repository at this point in the history
Added enabled prop to give an option of enabling/disabling native RNScreens components per ScreenContainer and Screen (Screen must have the same value of enabled as its parent ScreenContainer).
  • Loading branch information
WoLewicki authored Sep 16, 2020
1 parent 342266f commit 33e875d
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 11 deletions.
13 changes: 11 additions & 2 deletions src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ declare module 'react-native-screens' {
onComponentRef?: (view: any) => void;
children?: React.ReactNode;

/**
* @description All children screens should have the same value of their "enabled" prop as their container.
*/
enabled?: boolean;
/**
* @description A callback that gets called when the current screen will appear. This is called as soon as the transition begins.
*/
Expand Down Expand Up @@ -81,7 +85,7 @@ declare module 'react-native-screens' {
* @type "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
* @type "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
*/
stackPresentation: StackPresentationTypes;
stackPresentation?: StackPresentationTypes;
/**
* @description Allows for the customization of how the given screen should appear/dissapear when pushed or popped at the top of the stack. The following values are currently supported:
* @type "default" – uses a platform default animation
Expand All @@ -102,7 +106,12 @@ declare module 'react-native-screens' {
gestureEnabled?: boolean;
}

export type ScreenContainerProps = ViewProps;
export interface ScreenContainerProps extends ViewProps {
/**
* @description A prop that gives users an option to switch between using Screens for the navigator (container). All children screens should have the same value of their "enabled" prop as their container.
*/
enabled?: boolean;
}

export interface ScreenStackProps extends ViewProps {
transitioning?: number;
Expand Down
7 changes: 5 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,14 @@ export function screensEnabled() {

export class NativeScreen extends React.Component {
render() {
const { active, style, ...rest } = this.props;
const { active, style, enabled = true, ...rest } = this.props;

return (
<View
style={[style, ENABLE_SCREENS && !active ? { display: 'none' } : null]}
style={[
style,
ENABLE_SCREENS && enabled && !active ? { display: 'none' } : null,
]}
{...rest}
/>
);
Expand Down
19 changes: 12 additions & 7 deletions src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,29 +92,32 @@ class Screen extends React.Component {
};

render() {
if (!ENABLE_SCREENS) {
const { enabled = true } = this.props;

if (!ENABLE_SCREENS || !enabled) {
// 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

/* eslint-disable no-unused-vars */
const { active, onComponentRef, ...props } = this.props;
const { active, enabled, onComponentRef, ...rest } = this.props;

return <Animated.View {...props} ref={this.setRef} />;
return <Animated.View {...rest} ref={this.setRef} />;
} else {
AnimatedNativeScreen =
AnimatedNativeScreen ||
Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);

// When using RN from master version is 0.0.0
if (version.minor >= 57 || version.minor === 0) {
return <AnimatedNativeScreen {...this.props} ref={this.setRef} />;
const { enabled, ...rest } = this.props;
return <AnimatedNativeScreen {...rest} ref={this.setRef} />;
} else {
// On RN version below 0.57 we need to wrap screen's children with an
// additional View because of a bug fixed in react-native/pull/20658 which
// was preventing a view from having both styles and some other props being
// "animated" (using Animated native driver)
const { style, children, ...rest } = this.props;
const { style, children, enabled, ...rest } = this.props;
return (
<AnimatedNativeScreen
{...rest}
Expand All @@ -130,8 +133,10 @@ class Screen extends React.Component {

class ScreenContainer extends React.Component {
render() {
if (!ENABLE_SCREENS) {
return <View {...this.props} />;
const { enabled = true, ...rest } = this.props;

if (!ENABLE_SCREENS || !enabled) {
return <View {...rest} />;
} else {
return <ScreensNativeModules.NativeScreenContainer {...this.props} />;
}
Expand Down

0 comments on commit 33e875d

Please sign in to comment.