react-native-scrollable-tab-view
react-native-scrollable-tab-view copied to clipboard
ptomasroos
Possible enhancement? Using @react-native-community/viewpager on iOS
- [x] I have searched existing issues
- [x] I am using the latest scrollable tab view version
This isn't an issue so-to-say, but more of a start of a discussion around using https://github.com/react-native-community/react-native-viewpager on iOS as well as Android, instead of ScrollView. I'm unaware as to if there's been a reason historically for not using this (and if so, then please close this!) or perhaps there's just not been the time and it's on the list of things to do! 😄
I'm aware that this project has only been using react-native-community's ViewPager since v1.0.0, and previously ViewPagerAndroid was used (explaining the OS split), but if we're able to use ViewPager on both that could bring benefits to the project. It'd be great to discuss this!
Steps to Reproduce
As this isn't an issue as such, there are no replication steps. However, if it's decided to move forward with this, I'm happy to bring my patch file into a fork of this repo and open a PR for review!
Expected Behavior
That both platforms use ViewPager, now it isn't only for Android 🤖
Actual Behavior
iOS still uses ScrollView, and Android keeps all the fun 😢
I have the same problem
ExceptionsManager.js:44 Invariant Violation: Tried to register two views with the same name RNCViewPager
Well, I would rather say that we would prefer to move to ScrollView's :) Then we can at least nest the ScrollableTabView it which many people are talking about as a needed feature.
maybe it is better to move android side implement to ScrollView，but can't it just use iOS side's code of ScrollView directly in android side ?
I am facing a problem in my ios implementation of this lib, and I think it is because of it using a ScrollView on ios since I didn't encounter it on android. My implementation is as follows : at the top of first tab, I have a TextInput, followed by a vertical SectionList. If the input if focused, then I cannot scroll the vertical list without dismissing the keyboard first. If I do try to scroll the SectionList while keyboard is visible (aka drag it vertically on a short distance) the list does not scroll, the keyboard is dismissed, then reenabled automatically. I tried adding keyboardShouldPersistTaps="always" and keyboardDismissMode="none" to the main ScrollView of the lib's ScrollView, to no avail. I then tried to remove the horizontal prop from the Scrollview, and the problem disappeared. However, I do not want my tabs to be stacked vertically so this not a solution. Maybe this is a problem with RN ScrollView when horizontal prop is set, but the problem disappears on android, so I am wondering if using the ViewPager on iOS could be the solution for me? Anyway, tomorrow I'm going to try to go for the ViewPager for both ios and android and see how it goes. I'll report here if anything interesting comes out of it
Ok, I tried and it works. I have a new problem though, my main container is a KeyboardAvoidingView, and ViewPager on ios doesn't like being wrapped in it: every time an input is focused, it blurs immediately. I spotted this issue on the @react-native-community/viewpager repo: https://github.com/react-native-community/react-native-viewpager/issues/155 but no real answer
Well, I found out that I do not need to wrap my whole app in KeyboardAvoidingView, so I can work out a solution to not wrap the ScrollableTabView either. Anyway, here is my fork using viewpager for ios and android if you want to give it a try. https://github.com/badaz/react-native-scrollable-tab-view?organization=badaz&organization=badaz
I won't have the the time to do it before going on holidays but I'll definitely send one afterwards if it has not been taken care of when I return
Ok @ptomasroos , I'm trying to write a PR, but the deps of the lib are so old, it's such a pain to make the examples work. For one, on Android, the oldest version of @react-native-community/viewpager (1.0) uses react-native ^0.57.0. In the Example, you're using RN 0.48.4, which is quite old already, and the lib itself requires react-native >= 0.20 !! (I'm pretty sure nobody uses it anymore, or else it is time for them to upgrade). Anyway, on Android I'm getting building error after building error, and when I finally manage to build and launch, I'm getting Java errors triggered during the app runtime... I think the lib should be actualized to more recent deps, why not RN >= 0.60 since it is the way every lib is going now, and users who want to make it work with older versions would just not benefit from the mutualized viewpager, what do you think?
I can definitely agree that no one is using rn 0.20. The reason why it hasn’t been updated is just because I’m currently not working with react native at this moment.
Hence spending less time evolving the library and time to upgrade the examples to latest versions.
Sorry for that! But I do not mind at all if you were to send a pr containing a update to modern versions. It would highly be appropriated!
@badaz I was having problems with needing to double tap Touchable elements within the ScrollableTabView to fire onPress handlers. It was happening on both iOS and Android - I figured it was due to the nested ScrollView not specifying keyboardShouldPersistTaps. Your fork and commit seems to resolve the issue, so thanks for that.
Really hoping this can be considered for inclusion in a release sometime soon @ptomasroos. I realise you're busy, but this is a great library that tons of people are using and it's starting to feel a little unmaintained with no release since 2019. Would you have any other potential maintainers in mind who could help?
@lukeburden I have this same issue on Android, Do you have any suggestions to add 'keyboardShouldPersistTaps' to ScrollView Prop list?
Just fixed the double tap issue by passing this prop to 'ScrollableTabView'
contentProps={{keyboardShouldPersistTaps: 'always'}}
@rajitha302 I'd suggest reading the changes @badaz made in his fork, then forking it yourself if you like it so you have a stable repo yourself and then using it as your dependency.