Pager
Pager provides views that can be swiped horizontally -- a pattern you commonly find on mobile devices. It works well when combined with tabs. Note that, by default, the Pager does not respond to mouse events so responsive websites should employ buttons (tabs, arrow buttons, etc.) to aid navigation.
Because Pager
uses react-gesture-responder you can
delegate between it and other gesture based components. This means you can do
things like embed gesture views within eachother.
Full instructions can be found on react-page-controller.
Basic usage
Try swiping the views below on a touch-based device.
/** @jsx jsx */ function PagerExample() { const [page, setPage] = React.useState(0); const theme = useTheme(); return ( <DarkMode> <Pager css={{ "& .Gesture-view__pane > *": { padding: "100px", display: "flex", justifyContent: "center", boxSizing: "border-box", width: "100%", flex: 1, alignItems: "center" } }} value={page} onRequestChange={i => setPage(i)} > <div css={{ background: "#4a9eda" }}> <Button variant="outline" onPress={() => setPage(1)}> Next </Button> </div> <div css={{ background: "#7f8a93" }}> <Button variant="outline" onPress={() => setPage(2)}> Next </Button> </div> <div css={{ background: "#9966e0" }}> <Button variant="outline" onPress={() => setPage(3)}> Next </Button> </div> <div css={{ background: "#e066ad" }}> <Button variant="outline" onPress={() => setPage(4)}> Next </Button> </div> <div css={{ background: "#d7c938" }}> <Button variant="outline" onPress={() => setPage(0)}> Back to start </Button> </div> </Pager> </DarkMode> ); }
Show Code
API
ForwardRefExoticComponent
value*number
enableMouseboolean
enableGesturesboolean
focusOnChangeboolean
enableScrollLockboolean
onRequestChange*(value: number) => void
animationConfigSpringConfig
lazyLoadboolean
onSetLazy(suggestedIndex: number) => number[]
onTerminationRequest(state: StateType, e?: ResponderEvent) => boolean
onMoveShouldSet(state: StateType, e: ResponderEvent, suggested: boolean) => boolean
Optionally override onMoveShouldSet defaults
GestureView
value*number
enableMouseboolean
enableGesturesboolean
focusOnChangeboolean
enableScrollLockboolean
onRequestChange*(value: number) => void
animationConfigSpringConfig
lazyLoadboolean
onSetLazy(suggestedIndex: number) => number[]
onTerminationRequest(state: StateType, e?: ResponderEvent) => boolean
onMoveShouldSet(state: StateType, e: ResponderEvent, suggested: boolean) => boolean
Optionally override onMoveShouldSet defaults