Content Swiper for React Native is released

Check out our content swiper component for #reactnative

  • When we were implementing the Cheapp application we were looking for nice component for viewing images.
  • In our app we had upload indicator etc. built into our image viewer, so this component we released is pretty much built from the scratch to make it bit simpler and also to make it bit more customizable so it hopefully fits better for other peoples needs too.
  • Package includes Slide, SlideZoom, RotateY and Stack animations.
  • index=0 means that image is active and you can use those parameters to define enter/exit animations for your items as you like.
  • Here’s example of normal slide animation, but other animations are pretty much the same too.

Content Swiper component for React Native is out now
Continue reading “Content Swiper for React Native is released”

All You Need To Know About CSS-in-JS – Hacker Noon

  • CSS-in-JS attached a style tag on top of the DOM while inline styles just attached the properties to the DOM node.Why does this matter?Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors aren’t possible, styling the html and body tags isn’t supported etc.With CSS-in-JS, you…
  • Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!Brilliant article going in depth on how they’re different.“Just write the darn CSS in CSS and be done with it.”Yes — while that’s the case for how it’s been done for a long-long time — the challenge is modern web is…
  • Shout-out to Vue for solving this problem beautifully even tho Vues styles have no access to components state.Here’s Bob Ross painting rocks to cool down the tension 😄What are the benefits of using CSS-in-JS?
  • CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.“True rules isolation” — Scoped selectors are not enough.
  • JSS generates unique class names by default when it compiles JSON representation to CSS.Vendor Prefixing —The CSS rules are automatically vendor prefixed, so you don’t have to think about it.Code sharing — Easily share constants and functions between JS and CSS.Only the styles which are currently in use on your screen are…

TL;DR: Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). You…
Continue reading “All You Need To Know About CSS-in-JS – Hacker Noon”

Playing with React Native Animations – Hacker Noon

Play with React Native animations:  #ReactJS #JavaScript

  • For the delay we’re using the delay that was passed to the component.
  • We want to actually use these files in our app – to do so replace index.ios.js and index.android.js with the following.
  • We’ll keep this very simple and create 10 data elements with a width between 0 and the screen width – this will all take place in app/index.js
  • In app/AnimatedBar.js we’ll just set some static styles and apply them to our view.
  • Then create an app/index.js and app/AnimatedBar.js and copy and paste the following into them to get started.

For my first post of the year I wanted to keep it light and experiment a little bit with the React Native Animated API. We’ll create a few bars that animate in and constantly change their size. Here…
Continue reading “Playing with React Native Animations – Hacker Noon”