abbasmoosavi / react-native-best-viewpager Goto Github PK

Currently docs suggest creating separate methods in class component to render specific parts - e.g.:

 class ViewPagerPage extends Component {
    ...
    _renderDotIndicator() {
        return <PagerDotIndicator pageCount={3} />;
    }

It would work, but that way basically you're defining functional component _renderDotIndicator as method of ViewPagerPage. That's not really "React way" of splitting your code, you should rather define separate components like:

const DotIndicator = () > (<PagerDotIndicator pageCount={3} />)

In most cases it would be just about keeping code clean and following best React practises, but sometimes there might be some serious implications - e.g. if you'll try to use ref inside one of those methods ( _renderDotIndicator, _renderTitleIndicator, _renderTabIndicator) it work (as functional components have to be wrapped with React.forwardRef() before they can use ref).

How can I change indicator text color and remove border style?

HI,

I have this error only with android

this happens when is evaluating this line:
const { width, x: curItemOffsetX } = curItemLayoutInfo.layout;
in your file node_modules/react-native-best-viewpager/viewpager/indicator/PagerTitleIndicator.js

Could you help me please?

"dependencies": {
"@invertase/react-native-apple-authentication": "^1.1.2",
"@react-native-community/cameraroll": "^1.5.2",
"@react-native-community/datetimepicker": "^3.0.4",
"@react-native-community/masked-view": "^0.1.6",
"@react-native-community/netinfo": "^5.5.1",
"@react-native-community/push-notification-ios": "^1.1.1",
"@react-native-community/viewpager": "^3.3.0",
"@reduxjs/toolkit": "^1.4.0",
"@skele/components": "^1.0.0-alpha.40",
"@types/react-native-drawer": "^2.5.3",
"@types/react-native-modal-dropdown": "^0.7.0",
"@types/react-native-orientation": "^5.0.1",
"@types/react-native-share": "^3.1.0",
"@types/react-redux": "^7.1.7",
"@types/url-parse": "^1.4.3",
"accordion-collapse-react-native": "^0.2.10",
"axios": "^0.19.2",
"color": "^3.1.2",
"expo": "~38.0.1",
"expo-av": "^8.1.0",
"expo-blur": "^8.1.0",
"expo-calendar": "^8.1.0",
"expo-camera": "^8.2.0",
"expo-facebook": "^9.0.0",
"expo-file-system": "^8.1.0",
"expo-font": "^8.1.1",
"expo-image-picker": "^8.1.0",
"expo-in-app-purchases": "^9.1.0",
"expo-keep-awake": "^8.1.0",
"expo-linking": "^1.0.3",
"expo-location": "^8.1.0",
"expo-permissions": "^8.1.0",
"expo-splash-screen": "^0.2.3",
"expo-status-bar": "^1.0.0",
"expo-store-review": "^2.1.0",
"expo-updates": "^0.1.3",
"expo-web-browser": "^8.1.0",
"iap": "^1.1.1",
"jetifier": "^1.6.5",
"kumulos-react-native": "^5.4.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"native-base": "^2.13.12",
"npm-force-resolutions": "0.0.3",
"patch-package": "^6.2.2",
"qs": "^6.9.3",
"react": "~16.13.1",
"react-content-loader": "^5.1.0",
"react-dom": "~16.11.0",
"react-native": "~0.63.3",
"react-native-action-sheet": "^2.2.0",
"react-native-add-calendar-event": "^3.0.2",
"react-native-animatable": "^1.3.3",
"react-native-best-viewpager": "^1.0.4",
"react-native-cached-image": "^1.4.3",
"react-native-debounce-input": "^1.0.5",
"react-native-device-info": "^5.6.3",
"react-native-dropdown-picker": "^3.0.4",
"react-native-elements": "^1.2.7",
"react-native-fast-image": "^8.3.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-google-places-autocomplete": "^1.4.1",
"react-native-iap": "^5.0.1",
"react-native-image-header-scroll-view": "^0.10.3",
"react-native-image-placeholder": "^1.0.14",
"react-native-jw-media-player": "^0.1.52",
"react-native-keep-awake": "^4.0.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-maps": "0.27.1",
"react-native-modal": "^11.5.6",
"react-native-modal-datetime-picker": "^9.1.0",
"react-native-modal-dropdown": "^0.7.0",
"react-native-navbar": "^2.1.0",
"react-native-orientation": "^3.1.3",
"react-native-push-notification": "^3.1.9",
"react-native-ratings": "^6.5.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area": "^0.5.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.2.0",
"react-native-section-list-get-item-layout": "^2.2.3",
"react-native-share": "^2.0.0",
"react-native-side-menu": "^1.1.3",
"react-native-slider": "^0.11.0",
"react-native-status-bar-height": "^2.5.0",
"react-native-super-grid": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-swipe-gestures": "^1.0.5",
"react-native-swipe-list-view": "^3.2.5",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^2.14.0",
"react-native-text-size": "^4.0.0-rc.1",
"react-native-unimodules": "^0.11.0",
"react-native-uuid-generator": "^6.1.1",
"react-native-video-cache": "^1.0.0",
"react-native-web": "~0.11.7",
"react-native-webview": "^8.1.1",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.0",
"react-navigation-tabs": "^2.10.1",
"react-redux": "^7.2.0",
"react-video-seek-slider": "^2.1.2",
"redux": "^4.0.5",
"redux-axios-middleware": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0",
"styled-components": "^5.1.0",
"url": "^0.11.0",
"url-parse": "^1.4.7",
"util": "^0.12.2"
},

Hi all,

I am currently working with your great lib on a project but I've a little issue.

My project is structured like this:
A flatlist lists a selection of article. When I click on an item, I'm going to your viewpager which let me swipe between the different detail of every articles in the list.

What I would like to have is the ability to swipe bake from the viewpager to the previous list. Indeed, when I use your lib, I loose the ability of swiping back which is the main way to navigate on iOS.

My reflexion is:
If it is possible to reduce the width of the panresponder, it would let a little column on the left to grab the swipe back action.

And now my question is:
Is it possible to set the pan responder size?

Thanks for your work, hope to have a quick answer ;-)

@abbasmoosavi Can we add swipe and on tap functionality?

Is there a way to change the position of the page indicator? I need to put it before ViewPager, but I can't find a prop for that.

Since the ViewPager uses a ScrollView on iOS but doesn't provide access to its keyboardShouldPersistTap prop, I get the typical problem:
I have a TextInput in the ViewPager and when it is focussed and I tap somewhere outside the TextInput, the TextInput is blurred, but otherwise the tap is ignored. So I can't immediately tap on e.g. a button.

@react-native-community/[email protected]: This library is no longer supported. Please use react-native-pager-view instead

When ViewPager is inside a vertical scroll view then manual left and right slide not working. The focus going to parent scroll view.

Below is the warning message I'm getting when running my app.

Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: IndicatorViewPager

It's there a way to get the current selected page?
thanks in advance!

Maybe you can try to add react-native-viewpager as peerDependencies here:
https://github.com/abbasmoosavi/react-native-best-viewpager/blob/master/package.json#L39

callstack/react-native-pager-view#72 (comment)