Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-native-sideswipe
Advanced tools
cross-platform react native carousel with sensible defaults
A simple, cross-platform React Native swipeable carousel with sensible defaults
Most solutions I found were very focused on mobile and adopt a paging pattern which limits what you can do on tablet and when you want the child to page when its smaller than the viewport.
On top of that most solutions were either one-size-fits-all or not really polished.
Nothing. It's just a tiny simple carousel with a pretty flexible API. If you need more check out another solution, if you need less you might not need a carousel because this whole thing is ~200 lines. 😎
<Carousel />
Carousel component used to render carousel items via renderItem
prop.
type CarouselProps = {
// applied to the content container within FlatList
// |------------ [ style ]--------------------------|
// | |---------- [ flatListStyle ] ---------------| |
// | | |-------- [ contentContainerStyle ] -----| | |
contentContainerStyle?: Styles,
// This will equal the padding added to both left and right of itemWidth
// e.g. const contentOffset = (viewport.width - itemWidth) / 2
contentOffset?: number,
// data for FlatList
data: Array<*>,
// used to set the unique key of each item in the carousel
extractKey?: (item: *, index: number) => string,
// applied to the content container within the content container
// |------------ [ style ]--------------------------|
// | |---------- [ flatListStyle ] ---------------| |
// | | |-------- [ contentContainerStyle ] -----| | |
flatListStyle?: Styles,
// active index of the carousel
index?: number,
// This is the total width of everything that should be centered when in view
// tip: be sure to include any margin added to the left and right of the item
itemWidth?: number,
// function called when the end of the carousel is reached
onEndReached: () => void,
// number between 0 - 1 used to determine when to call onEndReached
onEndReachedThreshold: number,
// fired when the active index for the carousel changes
onIndexChange?: number => void,
// offset from center of carousel item used for determining index
threshold?: number,
/**
* drag distance examples with different thresholds
*
* with item width of 200 and no threshold
* ---------------> <-----------------
* 0 ------- -index/+index ------- 200
*
* with item width of 200 and 50 threshold
* ----------> <------------
* 0 -- -index -- 100 -- +index -- 200
*
* with item width of 200 and 75 threshold
* --------> <----------
* 0 - -index --- 100 --- +index - 200
*
* with item width of 200 and 90 threshold
* -----> <------
* 0 -index ----- 100 ----- +index 200
*/
// to determine the index use the velocity of the gesture.
useVelocityForIndex?: boolean,
// render item method, similar to FlatList with some enhancements
renderItem: CarouselRenderProps =>
| Array<React$Element<*> | boolean>
| React$Element<*>
| null,
// should we capture touch event
shouldCapture?: GestureState => boolean,
// should we release touch event to another view
shouldRelease?: GestureState => boolean,
// style for the FlatList wrapper View
// |------------ [ style ]--------------------------|
// | |---------- [ flatListStyle ] ---------------| |
// | | |-------- [ contentContainerStyle ] -----| | |
style?: Styles,
// should we use native driver for animation
useNativeDriver?: boolean,
}
type CarouselRenderProps = {
// index of item in data collection
itemIndex: number,
// active index of the carousel
currentIndex: number,
// total count of items in data collection
itemCount: number,
// item passed from FlatList
item: *,
// animated value tracking current index
animatedValue: Animated.Value
}
yarn add react-native-sideswipe
import { Dimensions } from 'react-native';
import SideSwipe from 'react-native-sideswipe';
import CustomComponent from '...'
import data from '...'
export default class SweetCarousel extends Component {
state = {
currentIndex: 0,
};
render = () => {
// center items on screen
const { width } = Dimensions.get('window');
const contentOffset = (width - CustomComponent.WIDTH) / 2;
return (
<SideSwipe
index={this.state.currentIndex}
itemWidth={CustomComponent.WIDTH}
style={{ width }}
data={data}
contentOffset={contentOffset}
onIndexChange={index =>
this.setState(() => ({ currentIndex: index }))
}
renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (
<CustomComponent
{...item}
index={itemIndex}
currentIndex={currentIndex}
animatedValue={animatedValue}
/>
)}
/>
);
};
}
Thanks goes to these wonderful people (emoji key):
Kurtis Kemple 💻 📖 📝 | Jason Brown 💻 🤔 | Akshay Kadam 📖 | Santosh Venkatraman 💻 | Narendra N Shetty 🤔 | Zachary Gibson 🤔 | Chris Geirman 🐛 📖 🤔 |
---|---|---|---|---|---|---|
Dan Sipple 🐛 💻 | Brian B. Canin 💻 👀 | Michael Sevestre 🐛 🤔 ⚠️ | Soheil Jadidian 🐛 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
FAQs
cross-platform react native carousel with sensible defaults
The npm package react-native-sideswipe receives a total of 301 weekly downloads. As such, react-native-sideswipe popularity was classified as not popular.
We found that react-native-sideswipe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.