fix(ios): parent scroll view not able to scroll

[intergalacticspacehighway]

Summary

Fixes - #722

The default iOS's ScrollView allows nested ScrollView. i.e. a child scroll view doesn't prevent scrolling of the parent scroll view. It's done internally but I couldn't find any documentation on how it's being done, the delegates used by ScrollView doesn't seem to be public. Since we're overriding shouldRecognizeSimultaneouslyWithGestureRecognizer and returning NO, the parent scroll view is not able to scroll anymore. I set it to NO because that is the default behaviour in most cases but looks like to support Parent scroll views we need to return YES when the other recognizer is a ScrollView. This surely needs some more testing though.

Test Plan

In the below code snippet, the parent scroll view should be able to scroll.

import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { TabBar, TabView } from 'react-native-tab-view';

export class Navigation extends Component {
  state = {
    index: 0,
    routes: [
      { key: 'day', title: 'Day' },
      { key: 'week', title: 'Week' },
      { key: 'month', title: 'Month' },
    ],
  };

  _renderTab = (tab) => {
    return <View style={{ backgroundColor: 'pink' }}></View>;
  };

  _renderTabBar = (props) => {
    return (
      <TabBar
        {...props}
        renderLabel={({ route }) => (
          <View>
            <Text style={{}}>{route.title}</Text>
          </View>
        )}
      />
    );
  };

  _renderScene = ({ route, jumpTo }) => {
    switch (route.key) {
      case 'day':
        return this._renderTab('day');
      case 'week':
        return this._renderTab('week');
      case 'month':
        return this._renderTab('month');
    }
  };

  render() {
    return (
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, marginTop: 44 }}
        nestedScrollEnabled={true}
        scrollEnabled={true}
      >
        <View style={{ flex: 1 }}>
          <TabView
            navigationState={this.state}
            onIndexChange={(index) => {
              this.setState({ index });
            }}
            renderScene={this._renderScene}
            renderTabBar={this._renderTabBar}
          />
        </View>
      </ScrollView>
    );
  }
}

What's required for testing (prerequisites)?

• Just copy/paste the above snippet in App.tsx

What are the steps to reproduce (after prerequisites)?

• Before the native changes in the PR, the parent scroll view won't work. Adding the native changes from the PR should fix it.

Compatibility

OS	Implemented
iOS	✅
Android	❌

Checklist

• I have tested this on a device and a simulator
• I added the documentation in README.md
• I updated the typed files (TS and Flow)

[voloshinskii]

Hi, @intergalacticspacehighway. Thank you for your PR!

Now, in our project, we still have several issues with that fix

• In modal presentationStack PagerView breaks modal swipe-out
• Is there any reason to block other recognizers when self.scrollEnabled equals false?

[voloshinskii]

Suggested change

	if (!self.scrollEnabled) {
	return YES;
	}

[voloshinskii]

I guess, we should always recognize simultaneously in that case

[intergalacticspacehighway]

simultaneous by default returns false. So I wanted to preserve the original behaviour and allow recognize only when it's RN screen's triggered pop gesture. But i think your suggestion might also make sense e.g. current gesture is blocked so allow the other 🤔. Does this change fixes your issues?

[troZee]

Hey 👋
It seems you would like to achieve the same effect as in this library https://github.com/PedroBern/react-native-collapsible-tab-view. I would prefer to contribute to that library since they support the parallax effect. Right now, I am closing this issue, since it is not supported in the pager view.

[interstates21]

Would be great to have it fixed though