-
-
Save garrettmac/bccb7cd2fc02162a2964e9380d750f6b to your computer and use it in GitHub Desktop.
a |
<Pagination
dotThemeLight //<--use with backgroundColor:"grey"
listRef={this.refs}//to allow React Native Pagination to scroll to item when clicked (so add "ref={r=>this.refs=r}" to your list)
paginationVisibleItems={this.state.viewableItems}//needs to track what the user sees
paginationItems={this.state.items}//pass the same list as data
paginationItemPadSize={3} //num of items to pad above and below your visable items
more params you can play with
hideEmptyDots
pagingEnabled
dotSwapAxis
dotPositionSwap
disableDotOnPressNavigation
dotOnPress={(item)=>alert(JSON.stringify(item))}
startDotOnPress={(item)=>alert("pressed startDotOnPress")}
endDotOnPress={(item)=>alert("pressed endDotOnPress")}
startDotIconFamily="Ionicons"
startDotIconName="ios-arrow-back"
endDotIconFamily="Ionicons"
endDotIconName="ios-arrow-forward"
dotIconNameActive={"contacts"}
dotTextColor={"red"}
dotTextColorActive={"green"}
dotTextColorNotActive={"red"}
dotTextColorEmpty={"blue"}
dotIconColorActive={"green"}
dotIconColorNotActive={"red"}
dotIconColorEmpty={"blue"}
/>
iconFamily -> iconSet
hideEmptyDots -> showEmptyDots
dotThemeLight => lightTheme
paginationContainerStyle
The best Pagination component for React Native.
React Native Pagination
Roadmap
Horizontal
Vertical
Getting Started
Installation
react-native
firstExample
or clone the repo and play with the example project
$ git clone https://github.com/garrettmac/react-native-pagination $ cd react-native-pagination/ReactNativePaginationExample $ yarn install $ react-native link $ react-native run-ios
one liner
Development
in your project
$ yarn add react-native-pagination $ react-native link #this makes sure react-native-vector-icons load correctly $ react-native run-ios
Basic Usage
myApp/index.ios.js
, use:Currently only supported for FlatList's
Properties
All properties took text editors auto completion into consideration and follow the basic structure
[
prefix
][body
][suffix
] where[
component name
][component attribute
][continued component attribute / component change
] to provide users with the full list of options when working withprefix
's without having to revisit the official docs.Most Common Component Prefix Options:
dot
,startDot
,endDot
Most Common Component Body Options:
Icon
,Font
,Style
,Color
Most Common Component Suffix Options:
Hide
,Size
,IconFamily
,orNotActive
,Active
Empty
Resulting props like
dotIconHide
,startDotIconHide
, orstartFontSize
,endDotStyle
ect.Basic
Basic Props
[]
array
[]
array
onViewableItemsChanged
callback function (see example)false
bool
dotThemeLight
prop (setting it totrue
) the pagination dots swaps to a a light theme. By default they are dark.false
bool
LayoutAnimation.Presets.easeInEaseOut
Animation
{}
style
false
bool
FlatList
) that gives you that paging effect that stops the scroll on every new page.false
bool
3
number
Basic Styles
paginationStyle
when horizontal{height, alignItems:"center" , justifyContent: 'space-between', position:"absolute", top:0, margin:0, bottom:0, right:0, bottom:0, padding:0, flex:1, }
style
paginationStyle
when not horizontal{width, alignItems:"center", justifyContent: 'space-between', position:"absolute", margin:0, bottom:10, left:0, right:0, padding:0, flex:1,}
style
{}
style object
{}
style object
{}
style object
{}
style object
Start/End Dots
Start/End Dot Basic Props
startDotIconName
(whenhorizontal
)”chevron-left”
icon name
startDotIconName
(whenvertical
)”chevron-up”
icon name
endDotIconName
(whenhorizontal
)”chevron-right”
icon name
endDotIconName
(whenvertical
)”chevron-down”
icon name
startDotIconSize
15
number
endDotIconSize
15
number
startDotIconFamily
/endDotIconFamily
MaterialCommunityIcons
string
of font family nameEntypo
,EvilIcons
,FontAwesome
,Foundation
,Ionicons
,MaterialIcons
,MaterialCommunityIcons
,Octicons
,Zocial
,SimpleLineIcons
(available in react-native-vector-icons package)Start/End Dot Text
11
number
11
number
Pagination Dots
These are the list of dots that represent each item in your paginationItems
Pagination Dots Basic Props
dotIconFamily
”MaterialCommunityIcons”
string
of font family nameEntypo
,EvilIcons
,FontAwesome
,Foundation
,Ionicons
,MaterialIcons
,MaterialCommunityIcons
,Octicons
,Zocial
,SimpleLineIcons
(available in react-native-vector-icons package)”close”
icon name
”checkbox-blank-circle”
icon name
”checkbox-blank-circle-outline”
icon name
15
number
10
number
”rgba(0,0,0,.5)”
color
”rgba(0,0,0,.3)”
color
”rgba(0,0,0,.2)”
color
when using dotThemeLight
”rgba(255,255,255,.4)”
color
”rgba(255,255,255,.5)”
color
”rgba(255,255,255,.2)”
color
Dot Text
by default it displays
index+1
, if you'd like display text add thepaginationDotText
property to each one of your items before passing it into thePagination
Component. Example:
Pagination Dots
number
number
number
”rgba(0,0,0,.5)”
color
”rgba(0,0,0,.3)”
color
”rgba(0,0,0,.2)”
color
when using dotThemeLight
”rgba(255,255,255,.4)”
color
”rgba(255,255,255,.5)”
color
”rgba(255,255,255,.2)”
color
Advanced Positioning
dotSwapAxis
(all pagination dots)/startDotSwapAxis
/endDotSwapAxis
bool
dotPositionSwap
(all pagination dots)/startDotPositionSwap
/endDotPositionSwap
bool
flexDirection
default style property.Wanna move anything to the left, right, top, or bottom of something? Then use
dotSwapAxis
in combination until you find the right mixstartDotPositionSwap
.Visibility
dotIconHide
/startDotIconHide
/endDotIconHide
bool
dotIconHide
/startDotIconHide
/endDotIconHide
bool
dotTextHide
/startDotTextHide
/endDotTextHide
bool
dotEmptyHide
bool
Methods
dotOnPress
/startDotOnPress
/endDotOnPress
disableDotOnPressNavigation
to turn off), if you'd like a callback you can pass in thedotOnPress
callback functionOther
debugMode
bool
Components
Pagination
paginationItems
,paginationVisibleItems
Dot
Icon
name
iconFamily
,size
,color
iconFamily
optionIssues
Feel free to contact me or create an issue