Panel is not working with React Navigation

[ferasallaou]

Hello,

I was trying to embed a React Navigator inside Swipeable Panel so I can handle a full navigation inside the Panel, but unfortunately I was not able to achieve this. I can just see the Navigation Header, without any content no matter what content I use, even an empty component with a text inside it is not working.

I'm using the following modules

"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"rn-swipeable-panel": "^1.2.1"

Thanks

[enesozturk]

Hi. Thanks for using rn-swipeable-panel. I have never tried such an example. That is why the panel does not provide this use case. It actually depends on react-navigation's base as well. I will give it a try but can not guarantee it will work. Will share the results.

[ferasallaou]

This is what I'm trying to achieve by the way Video

[dexma-dev]

@ferasallaou I am having the same issue you are seeing. Did you find a solution or workaround?

@enesozturk Did you find a way to get this working or the root cause of the issue? I would really like to use the panel this way

[ferasallaou]

@cneumaier I didn't actually, I just used a normal navigation which presents a new screen

[dexma-dev]

I searched through the code and found a starting point to the solution. I am pretty sure the root cause is the ScrollView and its content. If you add { flex: 1} to the scrollViewContentContainerStyle the content of the screen is visible, but only in the 'mini' version of the SwipeablePanel. When you enlarge the panel, the content is not visible anymore.

@enesozturk do have any idea why this is happening?

[dexma-dev]

@ferasallaou @enesozturk i found a way to solve the problem temporarily by passing the { flex: 1 } style prop to the creation of the TouchableHighlight when the panel is getting large and scrollable.

To get it working to you need to add { flex: 1 } to the scrollViewContentContainerStyle as is said before and to the following in the index.js file of the package:

React__default.createElement(reactNative.ScrollView, {
      onTouchStart: function onTouchStart() {
        return false;
      },
      onTouchEnd: function onTouchEnd() {
        return false;
      },
      contentContainerStyle: SwipeablePanelStyles.scrollViewContentContainerStyle
    }, this.state.canScroll ? /*#__PURE__*/React__default.createElement(reactNative.TouchableHighlight, {style: {flex: 1}}, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, this.props.children)) : this.props.children))) : null;

This fixes the problem for me, but i dont know if it has any side effects i am not aware of. I am currently implementing the rest of my logic and I will report back if i am encountering any problems.