Update on Async Rendering

  • This example shows a component with calls inside of : – – The simplest refactor for this type of component is to move state initialization to the constructor or to a property initializer, like so: – – Here is an example of a component that uses to fetch external data:…
  • Rather than passing a subscribable prop as we did in the example above, we could use to pass in the subscribed value: – – Here is an example of a component that uses the legacy lifecycle to update based on new values: – – Although the above code is not…
  • (That lifecycle is called when a component is created and each time it receives new props): – – You may notice in the example above that is mirrored in state (as ).
  • You can also use the new lifecycle to clear stale data before rendering the new props: – – Here is an example of a component that reads a property from the DOM before an update in order to maintain scroll position within a list: – – In the above example,…
  • This package polyfills components so that the new and lifecycles will also work with older versions of React (0.14.9+).

Continue reading “Update on Async Rendering”

Update on Async Rendering

  • This example shows a component with calls inside of : – – The simplest refactor for this type of component is to move state initialization to the constructor or to a property initializer, like so: – – Here is an example of a component that uses to fetch external data:…
  • Rather than passing a subscribable prop as we did in the example above, we could use to pass in the subscribed value: – – Here is an example of a component that uses the legacy lifecycle to update based on new values: – – Although the above code is not…
  • (That lifecycle is called when a component is created and each time it receives new props): – – Here is an example of a component that calls an external function when its internal state changes: – – Sometimes people use out of a misplaced fear that by the time fires,…
  • You can also use the new lifecycle to clear stale data before rendering the new props: – – Here is an example of a component that reads a property from the DOM before an update in order to maintain scroll position within a list: – – In the above example,…
  • This package polyfills components so that the new and lifecycles will also work with older versions of React (0.14.9+).

Continue reading “Update on Async Rendering”

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”