All Projects → bobby-hewitt → react-native-3d-swiper

bobby-hewitt / react-native-3d-swiper

Licence: other
A performant, javascript-only 3d swiper for react-native

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-3d-swiper

Animated Styled Components
React Animated Styled Components
Stars: ✭ 142 (+294.44%)
Mutual labels:  animated
Svg Gauge
Minimalistic, animated SVG gauge. Zero dependencies
Stars: ✭ 188 (+422.22%)
Mutual labels:  animated
gephi twitter media downloader
A small script designed to take either a .csv of Tweet ids, or the export from Gephi's TwitterStreamingImporter Plugin and download related Tweet media.
Stars: ✭ 41 (+13.89%)
Mutual labels:  animated
Terminalizer
🦄 Record your terminal and generate animated gif images or share a web player
Stars: ✭ 12,165 (+33691.67%)
Mutual labels:  animated
Alive Progress
A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!
Stars: ✭ 2,940 (+8066.67%)
Mutual labels:  animated
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: ✭ 222 (+516.67%)
Mutual labels:  animated
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (+280.56%)
Mutual labels:  animated
react-native-segment-control
Swipeable SegmentedControl component for React Native apps
Stars: ✭ 21 (-41.67%)
Mutual labels:  animated
React Native Confetti Cannon
React Native confetti explosion and fall like iOS does.
Stars: ✭ 149 (+313.89%)
Mutual labels:  animated
react-native-scrollable-animated-header
🤯 React Native Animated Header with ScrollView
Stars: ✭ 112 (+211.11%)
Mutual labels:  animated
Votemapswitzerland
A Swiss version of the famous visualization «Land doesn't vote, people do.»
Stars: ✭ 150 (+316.67%)
Mutual labels:  animated
Komorebi
A beautiful and customizable wallpapers manager for Linux
Stars: ✭ 2,472 (+6766.67%)
Mutual labels:  animated
Cv
🎓 Best in Class modern CV, Resume and Portfolio website template. All-in-One-Page site with simply customizable builder.
Stars: ✭ 232 (+544.44%)
Mutual labels:  animated
Zhnbilibili
👌 swift精仿bilibili(4.31.1版本)
Stars: ✭ 142 (+294.44%)
Mutual labels:  animated
flip view
A Flutter app with flip animation to view profiles of friends. 🌟
Stars: ✭ 69 (+91.67%)
Mutual labels:  animated
React Native Async Image Animated
Simple cross-platform asynchronous image component for React Native 🙌🏻 with a progressive and placeholder image support. Placeholder color otherwise with a few animation options.
Stars: ✭ 141 (+291.67%)
Mutual labels:  animated
React Svg Buttons
React configurable animated svg buttons
Stars: ✭ 209 (+480.56%)
Mutual labels:  animated
WatermelonMessenger
React Native App using react, redux, sagas, hooks, react navigation v5
Stars: ✭ 63 (+75%)
Mutual labels:  animated
react-native-animated-flatlist
Animated Flatlist for React-Native
Stars: ✭ 56 (+55.56%)
Mutual labels:  animated
react-native-rough
⚛️✍️Rough.js bindings for that hand-drawn feel.
Stars: ✭ 106 (+194.44%)
Mutual labels:  animated

react-native-3d-swiper

A javascript only performant, customisable 3d swiper for react-native.

screenshot

Getting Started

import RNSwiper from 'react-native-3d-swiper'

onSwipeUp(index){
  //parameter returned is the index of active child
  console.log(index)
}

onSwipeDown(index){
  //parameter returned is the index of active child
  console.log(index)
}

onPress(index){
  //parameter returned is the index of active child
  console.log(index)
}

<View
 <RNSwiper
      minimumScale={0.7}  //scale of out of focus components
      minimumOpacity={0.9} // opacity of out of focus components
      overlap={60}  // the degree to which components overlap.  
      cardWidth={400} // the width of each component
      duration={100} // animation duration on swipe
      swipeThreshold={100}// minimum distance to swipe to trigger change in state 
      onSwipeUp={this.onSwipeUp}
      onSwipeDown={this.onSwipeDown}
      onPress={this.onPress}
      >
        <SwipeCard color="#ebebeb" text="Hellooooo"/> {/* Takes any component as child */}
        <SwipeCard color="#998877" text="Hellooooo"/>
        <SwipeCard color="#123abc" text="Hellooooo"/>
        <SwipeCard color="#ebebeb" text="Hellooooo"/>
        <SwipeCard color="#987654" text="Hellooooo"/>
    </RNSwiper>
</View>

Installing

npm i --save react-native-3d-swiper

Contributing

TODO: Customisable animation, Lazy loading

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].