Introducing Sideswipe: a cross-platform carousel for React Native

  • Ideally we want to animate based on scroll position, not index changes, which would provide a much smoother effect.Old solution for handling transitions between itemsI knew I could add an Animated.event to the FlatList and pass the animated value to the child components but the value would be the raw…
  • This means the components using the animated value would have do some math to figure out if they were the active index.
  • It also updates any time either one of the underlying animated values updates.What this means is we can divide the scroll position by the width of a child item (which is a required prop) and that will give us an animated value starting at 0 and ending at the length…
  • Now child components can animate based on their index instead of scroll position but the animation will still be based on scroll position under the hood.
  • Here’s what that looks like in code:Using Animated.divide to get animated value for carousel itemsNow each carousel item gets an animated value they can use to create entrance and exit animations based on their index in the list, not the scroll position of the underlying FlatList, this provides a much…

Recently I found myself in need of a flexible carousel solution that could support some pretty tough requirements, mainly: My first attempt was to utilize open-source and use something someone else…
Continue reading “Introducing Sideswipe: a cross-platform carousel for React Native”

Why You Can’t Ignore React Native in 2017

Why you can’t ignore React Native in 2017:  #ReactJS #JavaScript

  • Using a native API and wrapping it into React components the framework allows you to develop applications that are barely distinguished from their native counterparts.
  • Essentially, you can take the boilerplate that you would normally use for building web applications with React, replace “React” with “React Native”, change the way application is mounting and swap the routing with React Native navigator.
  • If you need to install a package with a native API under the hood (i.e. the code written in Java or ObjC or even both), you will need to use a special tool called rnpm (it was a separate tool at the time we were using it but was eventually merged into React Native).
  • If you encounter a bug in a React Native package and you don’t have the experience in native development, you are definitely going to need some help from mobile developers who usually don’t know anything about React and React Native as well.
  • React Native is a good choice for your next application, if:

    What is more, React Native can be an ultimate tool for those who:

    If that’s the case, you will be definitely more efficient using React Native than the native platform.

Technical stories based on our experience
Continue reading “Why You Can’t Ignore React Native in 2017”