abbasmoosavi / react-native-best-viewpager Goto Github PK
View Code? Open in Web Editor NEWView pager for react native projects, use for android and ios
View pager for react native projects, use for android and ios
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
"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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.