search

meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.3k stars 2.28k forks source link

Ideas for new examples #257

Open bd-arc opened 6 years ago

bd-arc commented 6 years ago

Default layout

Adopt, Don't Shop, by Tim Pleiko-Izik 🚀 for Awesomed react-native-snap-carousel example ideas

Travel, by Chris Yang for New Beee react-native-snap-carousel example ideas

Travel, by Chris Yang react-native-snap-carousel example ideas

Data Visualisation App #2, by Rifayet Uday react-native-snap-carousel example ideas

Travel App for iOS, by Serge Vasil react-native-snap-carousel example ideas

Hangout App, by Rifayet Uday react-native-snap-carousel example ideas

Citadela, by Vilém Ries react-native-snap-carousel example ideas

Cinema app animation, by Adrian Reznicek for PLATFORM

Invision Projects - Spaces iOS, by Charles Patterson for InVision

I'm Back and Two invitations, by Leo Leung

ToFind - Concept controller, by Leo Leung

Animation idea: animate item height on onSnapToItem

Default layout with small slides

Food Application, by Chris Yang for New Beee Animated demo react-native-snap-carousel example ideas

Food Application, by Chris Yang for New Beee react-native-snap-carousel example ideas

Cisco - Latest events, by Alim Maasoglu for Norde react-native-snap-carousel example ideas

Fitesta App, by Rifayet Uday react-native-snap-carousel example ideas

Analytics App, by Rifayet Uday react-native-snap-carousel example ideas

Fitnefy App, by Rifayet Uday react-native-snap-carousel example ideas

Travel, by Chris Yang for New Beee react-native-snap-carousel example ideas

inactiveSlideShift

Poster Gallery, by Jakub Nespor for STRV react-native-snap-carousel example ideas

Media, by MAXVISION react-native-snap-carousel example ideas

'Stack' layout

Event-cards-iOS-interaction, by Divan Raj react-native-snap-carousel example ideas

Painting add to cart Interaction, by Johny vinoâ„¢ react-native-snap-carousel example ideas

See also #195

Tinder layout

Social App, by MAXVISION react-native-snap-carousel example ideas

Travel, by Chris Yang for New Beee react-native-snap-carousel example ideas

mobile application, by uixNinja react-native-snap-carousel example ideas

Cinema App Concept, by Anton Skvortsov for Norde

Custom interpolations

Music Player Interaction, by Asif Adnan Uday See #275 react-native-snap-carousel wheel

SiFi Mobile, by Rifayet Uday react-native-snap-carousel example ideas

Style Exploration, by Chris Yang for New Beee Animated demo react-native-snap-carousel example ideas

Flo App, by MAXVISION

Edmé Mobile // Blog, by Andrew Baygulov for Revølve

Others

fotoflo commented 6 years ago

Here are some thoughts on how to make examples easier to use.

  1. Put them in snacks and or update installation instructions

    • Actually i couldn't get it installed easily. The instructions are simply to use npm install, but ive already installed the main repo and it's not a subdirectory.... so how do you really install it?

  2. Pair it down or make multiple versions.

    • the current example seems to do too much. There are two main components and there's lots of case handling in them in order to remain two components. This means that in order to use the example, you should read and comprehend the whole thing. Most users will only have one case, and they want a copy/paste solution, so they can get it working in their app as quickly as possible. so instead of handling so many cases and building an component with a lot of componentry in it, try simplifying as much as possible, and if you want multiple looks and feels, make multiple components.

    • Make sure the event methods are exposed in the item component. Its probably also good to show how to both keep this component in the same file, and to pass the handlers as props, if youre making multiple examples.

MichelDiz commented 6 years ago

Please add an example of Infinite Scroll. Especially in the case of Tinder, technically it would be an infinite load. Until the resource queue ends.

cheers

bd-arc commented 6 years ago

@fotoflo Those are valid points. I had similar thoughts and they led to the decision that a complete overhaul of the example app was needed ;-)

@MichelDiz I'll see what I can do about it :-)

Note that I don't have time at the moment to work on it, but it seats at the top of my to-do list.

kylebarron commented 4 years ago

I'm not skilled enough at this point to provide new examples, but I was having trouble running the existing examples. I ported the code to a new react-native init project, and got the example working with react-native 0.61.5 here: https://github.com/kylebarron/react-native-snap-carousel-example

I could submit a PR for it if you'd like

bd-arc commented 4 years ago

Thank you for the offer @kylebarron! I would definitely appreciate it :-)

dohooo commented 2 years ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

parveenBanuS commented 1 year ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

but i was deprecated in my project kindly fix that,