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.

1. HorizontalSwiper

   1. Allows you to swipe through child components cyclically left and right
   2. Simple with no animation
   3. requires use of full screen width
   4. has onSwipeRight, onSwipeLeft, and isLoading props

2. HorizontalSwiperWithFall

   1. Same as Horizontal Swiper with added animation
   2. Swiped components fall away like cards being discarded

3. HorizontalSwiperWithShrink

   1. Same as Horizontal Swiper with added animation
   2. Swiped components shrink as they move away from the center, giving the illusion of fading into the background

4. StackOfCards

   1. allows you to swipe through child components as if they are a stack of cards. This is similar to Tinders swipe system
   2. Requires full screen width
   3. has onSwipeRight, onSwipeLeft, and isLoading props
   4. is currently cyclical, but you can stop this by changing child components.

5. HandOfCards

   1. Allows you to swipe through child components cyclically as if they are a hand of cards.
   2. Requires full screen width
   3. has onSwipeRight, onSwipeLeft, and isLoading props
   4. works best with 5 child components, but can do as few as two

6. VerticalSwiper

   1. Allows you to swipe through child components cyclically up and down
   2. Requires full screen height
   3. 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>