npmpackage.info

Gathering detailed insights and metrics for react-native-swiper

Other packages similar to react-native-swiper

react-native-swiper-flatlist

3.2.5

React native swiper flatlist component

react-native-image-swiper

0.0.8

A Simple Images Slider using [react-native-swiper](https://github.com/leecade/react-native-swiper)

react-native-swiper-flatlist-speedbox

5.0.0

React native swiper flatlist component

swiper

11.1.15

Most modern mobile touch slider and framework with hardware accelerated transitions

Gathering detailed insights and metrics for react-native-swiper

react-native-swiper

The best Swiper component for React Native.

1.6.0

10,427

MIT

JavaScript

18,717,178 2.4

Installations

npm install react-native-swiper

Pull Requests

Open

104

Total

369

Closed

144

Merged

121

Issues

Open

682

Total

999

Closed

317

Releases

v1.6.0

Published on 09 Jul 2019

v1.6.0-dev

Published on 26 Jun 2019

1.5.14

Published on 26 Nov 2018

1.5.13

Published on 02 Oct 2017

1.5.12

Published on 11 Sept 2017

Fix index prop on iOS

1.5.10

Published on 14 Aug 2017

View all 21 releases

Developer

leecade

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

12.10.0

NPM Version

6.13.7 Statistics

10,427 Stars

364 Commits

2,340 Forks

148 Watching

67 Branches

76 Contributors

Updated on 25 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

18,717,178

Last day

22.5%

18,140

Compared to previous day

Last week

15.9%

84,602

Compared to previous week

Last month

7.3%

318,416

Compared to previous month

Last year

9.4%

3,549,296

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

prop-types

Dev Dependencies

babel-eslint rimraf snazzy standard updtr

Versions

react-native-swiper

The best Swiper component for React Native.

react-native-swiper

Roadmap

see: ROADMAP.md

Changelogs

[1.6.0-rc]
- Dependency
  - Remove ViewPagerAndroid, use ScrollView #1009
- Test Integration
  - Setup e2e test
- TypeScript
  - correct the wrong types #1000
  - Add missing scrollBy TypeScript definition #931
- New Feature
  - add scrollTo #831
  - Added prop to disable the PrevButton #749
  - Optionally render page #1004
- Bug Fix
  - ES6 and CommonJS compatibility #717
  - Solves the issue of state messing up when parent component calls setState #939
  - replay when autoplay is setted to true #1002
  - fix broken examples and migrate to react-native 0.60.x
  - fix bad jumping on ios when loadMinimal set true
  - fix fliker when loop and loadMinimal are enabled #1062

[1.5.6]
- Fix #16, #36, #371, #410, #411, #422, #468 Fix landscape orientation auto resize! (thanks @ahmed3mar, @timmywil)
- Add containerStyle prop to customize the view container.
[1.5.5]
- Update: using PropTypes from prop-types and Change View.propTypes to ViewPropTypes

[1.5.4]
- Added easily accessible pagination point manipulation: use dotColor / activeDotColor and dotStyle / activeDotStyle (thanks @denizs)
- Added scrollEnabled prop to documentation (thanks @ibandominguez)
[1.5.3]
- Add loadMinimalLoader prop to customize <ActivityIndicator /> (thanks @Exilz)
- Disable autoplay timer when prop changes to false (thanks @dizlexik)
- Special thanks to @hypatiah for fixed some grammatical errors in README
[1.5.2]
- Add yarn lock
- Fix jitter when quickly swiping back and forth between pages (iOS) (thanks @nemophrost)
- The first webview always reloaded when injecting the rest of the children (thanks @eosterberg)

see more: CHANGELOG.md

Show Cases

Try these cases by yourself very easy, Just open examples/ios/swiper.xcodeproj in Xcode, then press Cmd + R; you may edit examples/index.ios.js for switch cases.

examples/components/SwiperNumber

examples/components/LoadMinimal

Installation

v1.5.14

1$ npm i react-native-swiper --save

v1.6.0-rc

npm i --save react-native-swiper@next

Basic Usage

Install react-native first

1$ npm i react-native-cli -g

Initialization of a react-native project

1$ react-native init myproject

Then, edit myproject/index.ios.js, like this:

1import React, { Component } from 'react'
2import { AppRegistry, StyleSheet, Text, View } from 'react-native'
3
4import Swiper from 'react-native-swiper'
5
6const styles = StyleSheet.create({
7  wrapper: {},
8  slide1: {
9    flex: 1,
10    justifyContent: 'center',
11    alignItems: 'center',
12    backgroundColor: '#9DD6EB'
13  },
14  slide2: {
15    flex: 1,
16    justifyContent: 'center',
17    alignItems: 'center',
18    backgroundColor: '#97CAE5'
19  },
20  slide3: {
21    flex: 1,
22    justifyContent: 'center',
23    alignItems: 'center',
24    backgroundColor: '#92BBD9'
25  },
26  text: {
27    color: '#fff',
28    fontSize: 30,
29    fontWeight: 'bold'
30  }
31})
32
33export default class SwiperComponent extends Component {
34  render() {
35    return (
36      <Swiper style={styles.wrapper} showsButtons={true}>
37        <View style={styles.slide1}>
38          <Text style={styles.text}>Hello Swiper</Text>
39        </View>
40        <View style={styles.slide2}>
41          <Text style={styles.text}>Beautiful</Text>
42        </View>
43        <View style={styles.slide3}>
44          <Text style={styles.text}>And simple</Text>
45        </View>
46      </Swiper>
47    )
48  }
49}
50
51AppRegistry.registerComponent('myproject', () => SwiperComponent)

Properties

Basic

Prop	Default	Type	Description
horizontal	true	`bool`	If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
loop	true	`bool`	Set to `false` to disable continuous loop mode.
index	0	`number`	Index number of initial slide.
showsButtons	false	`bool`	Set to `true` make control buttons visible.
autoplay	false	`bool`	Set to `true` enable auto play mode.
onIndexChanged	(index) => null	`func`	Called with the new index when the user swiped

Custom basic style & content

Prop	Default	Type	Description
width	-	`number`	If no specify default enable fullscreen mode by `flex: 1`.
height	-	`number`	If no specify default fullscreen mode by `flex: 1`.
style	{...}	`style`	See default style in source.
containerStyle	{...}	`style`	See default container style in source.
loadMinimal	false	`bool`	Only load current index slide , `loadMinimalSize` slides before and after.
loadMinimalSize	1	`number`	see `loadMinimal`
loadMinimalLoader	`<ActivityIndicator />`	`element`	Custom loader to display when slides aren't loaded

Pagination

Prop	Default	Type	Description
showsPagination	true	`bool`	Set to `true` make pagination visible.
paginationStyle	{...}	`style`	Custom styles will merge with the default styles.
renderPagination	-	`function`	Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots.
dot	`<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	`element`	Allow custom the dot element.
activeDot	`<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	`element`	Allow custom the active-dot element.
dotStyle	-	`object`	Allow custom the dot element.
dotColor	-	`string`	Allow custom the dot element.
activeDotColor	-	`string`	Allow custom the active-dot element.
activeDotStyle	-	`object`	Allow custom the active-dot element.

Autoplay

Prop	Default	Type	Description
autoplay	true	`bool`	Set to `true` enable auto play mode.
autoplayTimeout	2.5	`number`	Delay between auto play transitions (in second).
autoplayDirection	true	`bool`	Cycle direction control.

Control buttons

Prop	Default	Type	Description
showsButtons	true	`bool`	Set to `true` make control buttons visible.
buttonWrapperStyle	`{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}`	`style`	Custom styles.
nextButton	`<Text style={styles.buttonText}>›</Text>`	`element`	Allow custom the next button.
prevButton	`<Text style={styles.buttonText}>‹</Text>`	`element`	Allow custom the prev button.

Props of Children

Prop	Default	Type	Description
style	{...}	`style`	Custom styles will merge with the default styles.
title	{...}	`element`	If this parameter is not specified, will not render the title.

Basic props of `<ScrollView />`

Prop	Default	Type	Description
horizontal	true	`bool`	If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
pagingEnabled	true	`bool`	If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination.
showsHorizontalScrollIndicator	false	`bool`	Set to `true` if you want to show horizontal scroll bar.
showsVerticalScrollIndicator	false	`bool`	Set to `true` if you want to show vertical scroll bar.
bounces	false	`bool`	If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce* props are true.
scrollsToTop	false	`bool`	If true, the scroll view scrolls to top when the status bar is tapped.
removeClippedSubviews	true	`bool`	If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists.
automaticallyAdjustContentInsets	false	`bool`	Set to `true` if you need adjust content insets automation.
scrollEnabled	true	`bool`	Enables/Disables swiping

@see: http://facebook.github.io/react-native/docs/scrollview.html

Supported ScrollResponder

Prop	Params	Type	Description
onScrollBeginDrag	`e` / `state` / `context`	`function`	When animation begins after letting up
onMomentumScrollEnd	`e` / `state` / `context`	`function`	Makes no sense why this occurs first during bounce
onTouchStartCapture	`e` / `state` / `context`	`function`	Immediately after `onMomentumScrollEnd`
onTouchStart	`e` / `state` / `context`	`function`	Same, but bubble phase
onTouchEnd	`e` / `state` / `context`	`function`	You could hold the touch start for a long time
onResponderRelease	`e` / `state` / `context`	`function`	When lifting up - you could pause forever before * lifting

Note: each ScrollResponder be injected with two params: state and context, you can get state and context(ref to swiper's this) from params, for example:

1var swiper = React.createClass({
2  _onMomentumScrollEnd: function (e, state, context) {
3    console.log(state, context.state)
4  },
5  render: function() {
6    return (
7      <Swiper style={styles.wrapper}
8      onMomentumScrollEnd ={this._onMomentumScrollEnd}
9     ...
10      </Swiper>
11    )
12  }
13})

More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js

Methods

scrollBy(index, animated)

Scroll by relative index.

Parameters:

Name	Type	default	Description
index	`number`	`undefined`	offset index
animated	`bool`	`true`	offset index

Examples

1$ cd examples
2$ npm i
3$ react-native run-ios

Quick start with examples.

Development

1$ cd examples
2$ yarn
3$ yarn start
4$ react-native run-ios

Then launch simulator to preview. Note that you just need to edit the source file src/index.js, the change will auto sync to examples.

After development, you should add test for your modification and make all tests passed to prevent other contributors break the feature in the future accidentally. We use detox + jest for e2e test now, you can read Detox for more detail.

Contribution

@leecade The main author.
@rajkissu The secondary contributor.

Questions

Feel free to contact me or create an issue

Inspired by nolimits4web/Swiper & Design material from Dribbble & made with ♥.

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

72 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-v8v8-6859-qxm4
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695

Score

2.4

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-native-swiper

Other packages similar to react-native-swiper

react-native-swiper

Installations

Pull Requests

104

369

144

121

Issues

682

999

317

Releases

Developer

leecade

Developer Guide

CommonJS

No

12.10.0

6.13.7

Statistics

Languages

Total Downloads

18,717,178

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

react-native-swiper

Roadmap

Changelogs

Show Cases

examples/components/Basic

examples/components/Swiper

examples/components/SwiperNumber

examples/components/Phone

examples/components/LoadMinimal

Getting Started

Installation

Basic Usage

Properties

Basic

Custom basic style & content

Pagination

Autoplay

Control buttons

Props of Children

Basic props of <ScrollView />

Supported ScrollResponder

Methods

scrollBy(index, animated)

Examples

Development

Contribution

Questions

10

9

6

0

0

0

0

0

0

0

2.4

/10

Basic props of `<ScrollView />`