fix: Tab view height auto expand

[wael-zuaiter]

Motivation

TabView's height does not expand anymore to the content size in version 3

A different approach would be to refactor SceneView component to be a functional component

Resolves: #1178

[daniel112]

Providing more context:
Value passed in on sceneContainerStyle is being overridden with absolute styles

example without sceneContainerStyle:

        <TabView
          navigationState={{index, routes}}
          renderScene={renderScene}
          onIndexChange={setIndex}
        />
 // style output on SceneView: {"style": [undefined, {"bottom": 0, "height": undefined, "left": 0, "position": "absolute", "right": 0, "top": 0, "width": undefined}]}

example with sceneContainerStyle:

        <TabView
          sceneContainerStyle={{
            width: 500,
            height: 500,
          }}
          navigationState={{index, routes}}
          renderScene={renderScene}
          onIndexChange={setIndex}
        />
 // style output on SceneView: {"style": [{"height": 500, "width": 500}, {"bottom": 0, "height": undefined, "left": 0, "position": "absolute", "right": 0, "top": 0, "width": undefined}]}

Not sure where that default style value is coming from tbh

[alantoa]

I try you project,TabView in SectionList Component, isn't fix my problem.

[daniel112]

I try you project,TabView in SectionList Component, isn't fix my problem.

Try this branch https://github.com/knockaway/react-native-tab-view/tree/forked-3.0.2

[vinceprofeta]

Is there an issue with @daniel112 solution? Can we get this merged?

[satya164]

How does renaming the prop from style to sceneContainerStyle address the issue?

[daniel112]

#1198 (comment)

@satya164

But also check this comment: #1198 (comment)

Otherwise this PR actually introduces a different bug

[satya164]

@daniel112 that doesn't explain why changing the prop name is necessary.

[satya164]

anyway, this PR doesn't explain any of the changes and doesn't provide any demos of what it fixes, so I'm leaning towards closing it. if someone can open a new PR providing a better explanation and demos etc. then I'll review that.

[daniel112]

@satya164 because passing custom styles into "sceneContainerStyles" cannot actually override the position or size (height/width) styles

I agree this PR is still missing some changes.
I can submit a PR of my branch from above with examples.
some people seem to have found it useful

[satya164]

because passing custom styles into "sceneContainerStyles" cannot actually override the position or size (height/width) styles

Still don't understand how just changing the name from style to containerStyle changes any behavior

[bhattanmol101]

Really waiting for the fix asap can't update react-native due to this need version 0.66.0

[pistou]

because passing custom styles into "sceneContainerStyles" cannot actually override the position or size (height/width) styles

Still don't understand how just changing the name from style to containerStyle changes any behavior

Whether you understand or not, the fact is it works. Merge it already, instead of ego fighting against it.

[yfunk]

Whether you understand or not, the fact is it works. Merge it already, instead of ego fighting against it.

I think you should really reconsider your tone when you expect people to do free work for you in the future.
Besides, merging code you don't understand into a project of this size sounds like a pretty dumb idea.

If you really need this feature just fork the project or use patch-package to patch it locally or even consider opening a new PR that addresses the concerns with this one.

But don't be that person who tries to boss around OSS maintainers.

[j-cheung]

I understand!

Changing the prop name from style to containerStyle fixes the issue because, for some reason, the style was passing in the properties of StyleSheet.absoluteFill.

example console.log in render function of SceneView: sceneview style: [undefined, {"bottom": 0, "height": undefined, "left": 0, "position": "absolute", "right": 0, "top": 0, "width": undefined}]

diff --git a/node_modules/react-native-tab-view/src/SceneView.tsx b/node_modules/react-native-tab-view/src/SceneView.tsx
index 4648bf7..20ab78a 100644
--- a/node_modules/react-native-tab-view/src/SceneView.tsx
+++ b/node_modules/react-native-tab-view/src/SceneView.tsx
@@ -14,7 +14,7 @@ type Props<T extends Route> = SceneRendererProps &
     lazyPreloadDistance: number;
     index: number;
     children: (props: { loading: boolean }) => React.ReactNode;
-    style?: StyleProp<ViewStyle>;
+    sceneContainerStyle?: StyleProp<ViewStyle>;
   };
 
 type State = {
@@ -102,7 +102,7 @@ export default class SceneView<T extends Route> extends React.Component<
   };
 
   render() {
-    const { navigationState, index, layout, style } = this.props;
+    const { navigationState, index, layout, sceneContainerStyle } = this.props;
     const { loading } = this.state;
 
     const focused = navigationState.index === index;
@@ -120,7 +120,7 @@ export default class SceneView<T extends Route> extends React.Component<
             : focused
             ? StyleSheet.absoluteFill
             : null,
-          style,
+            sceneContainerStyle ? sceneContainerStyle : StyleSheet.absoluteFill,
         ]}
       >
         {

i have applied the patch above to workaround it for now

but doesn't take into account #1198 (comment)

[bhattanmol101]

Changing the name fixes the tab height issue not sure why but it does work.

[ildfreelancer]

@satya164 I think the root of this issue because

For ios:
This creates Animated Component of ViewPager from Animated.createAnimatedComponent

react-native-tab-view/src/PagerViewAdapter.tsx

Line 15 in 629160a

const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);

const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);

and take a look closer at version react-native-pager-view 5.4.24 which this package is using
https://github.com/callstack/react-native-pager-view/blob/931b19356b1b50183774b4c37610764615b8946a/src/utils.tsx

export const childrenWithOverriddenStyle = (children?: ReactNode) => {
  // Override styles so that each page will fill the parent. Native component
  // will handle positioning of elements, so it's not important to offset
  // them correctly.
  return Children.map(children, (child) => {
    const { props } = child as ReactElement;
    const newProps = {
      ...props,
      style: [
        props.style,
        {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          width: undefined,
          height: undefined,
        },
      ],
      collapsable: false,
    };
    return React.cloneElement(child as ReactElement, newProps);
  });
};

You can see that they are overriding style props, and this style will be passed into children props by render function

Therefore, this PR changes style to different name will actually work.

Other than this fix, we can fix the utils above from react-native-pager-view.