1.0.0 • Published 4 years ago
reactnativeswipesuite v1.0.0
React Native Swipe Suite
A npm module for all your swiping needs
Swipe Suite contains multiple swiping components with unique purposes and animations. Below is a list of all components, their uses, and examples of how to use them.
HorizontalSwiper
- Allows you to swipe through child components cyclically left and right
- Simple with no animation
- requires use of full screen width
- has onSwipeRight, onSwipeLeft, and isLoading props
HorizontalSwiperWithFall
- Same as Horizontal Swiper with added animation
- Swiped components fall away like cards being discarded
HorizontalSwiperWithShrink
- Same as Horizontal Swiper with added animation
- Swiped components shrink as they move away from the center, giving the illusion of fading into the background
StackOfCards
- allows you to swipe through child components as if they are a stack of cards. This is similar to Tinders swipe system
- Requires full screen width
- has onSwipeRight, onSwipeLeft, and isLoading props
- is currently cyclical, but you can stop this by changing child components.
HandOfCards
- Allows you to swipe through child components cyclically as if they are a hand of cards.
- Requires full screen width
- has onSwipeRight, onSwipeLeft, and isLoading props
- works best with 5 child components, but can do as few as two
- VerticalSwiper
- Allows you to swipe through child components cyclically up and down
- Requires full screen height
- has onSwipeUp, onSwipeDown, and isLoading props
###HorizontalSwiper
<HorizontalSwiper
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
</HorizontalSwiper>
###HorizontalSwiperWithFall
<HorizontalSwiperWithFall
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
</HorizontalSwiperWithFall>
###HorizontalSwiperWithShrink
<HorizontalSwiperWithShrink
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
</HorizontalSwiperWithShrink>
###StackOfCards
<StackOfCards
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center'
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
</StackOfCards>
###HandOfCards
<View style={{flex:1,backgroundColor:'black'}}>
<HandOfCards
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center',
margin:10,
borderRadius:20
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center',
margin:10,
borderRadius:20
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center',
margin:10,
borderRadius:20
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'skyblue',
alignItems:'center',
justifyContent:'center',
margin:10,
borderRadius:20
}}>
<Text style={{fontSize:50,color:'white'}}>
Fourth
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'violet',
alignItems:'center',
justifyContent:'center',
margin:10,
borderRadius:20
}}>
<Text style={{fontSize:50,color:'white'}}>
Fifth
</Text>
</View>
</HandOfCards>
</View>
###VerticalSwiper
<VerticalSwiper
isLoading={false}
onSwipeRight={()=>{console.log('right swipe')}}
onSwipeLeft={()=>{console.log('left swipe')}}
>
<View style={{
flex:1,
backgroundColor:'crimson',
alignItems:'center',
justifyContent:'center',
}}>
<Text style={{fontSize:50,color:'white'}}>
First
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'teal',
alignItems:'center',
justifyContent:'center',
}}>
<Text style={{fontSize:50,color:'white'}}>
Second
</Text>
</View>
<View style={{
flex:1,
backgroundColor:'tomato',
alignItems:'center',
justifyContent:'center',
}}>
<Text style={{fontSize:50,color:'white'}}>
Third
</Text>
</View>
</VerticalSwiper>
1.0.0
4 years ago