Building Medium’s claps animation using React Native

Building Medium's claps animation using #reactnative

  • This is a quick tutorial on composing animations with React Native.
  • This tutorial is made for beginners.
  • Just read the React Native’s Animation documentation and Animated API’s documentation once before watching this tutorial.

This is a quick tutorial on composing animations with React Native. This tutorial is made for beginners. Just read the React Native’s Animation documentation and Animated API’s documentation once before watching this tutorial.
Continue reading “Building Medium’s claps animation using React Native”

Boost Your User Experience with Lottie for React Native

Check it out:   #reactsharing #UX #Lottie #reactnative #tuts

  • Boost Your User Experience with Lottie for React NativeThis is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective.What is it all about Lottie?Lottie is a library for mobile devices that offers for the team a…
  • And we can always do GIF animations, right?But, as an experienced React Native and mobile developer, I can claim that none of these choices are able to offer you the same look feel that Lottie can.
  • The performance, all the available resources and the proud feeling your team‘s designers will reach with Lottie is the main reason I’m now writing this post.How to Get Started with Lottie for React Native?Either: npm i –save lottie-react-nativeOr: yarn add lottie-react-nativeAfter this, we need to link Lottie on our RN project:react-native…
  • It’s a simple check mark for use cases when the app has successfully completed a user’s action: like really that animation: it’s simple, self explanatory and it also gives a brief glimpse of what can be done with After Effects for Lottie.
  • Also, on Android devices some animations may freeze or be malformed from the original one.So, try to find a balance between using of Animated API and Lottie.

This is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective. Lottie is a library for mobile…
Continue reading “Boost Your User Experience with Lottie for React Native”

Best React.js Books You Must Read

List of #ReactJS books:  #JavaScript #Coding

  • What You Will Learn Create components to define parts of your UI Combine components into other components to build more complex UIs Use JSX to specify visuals without writing full-fledged JavaScript Work with React’s way of styling content Optimize your React workflow using tools such as Node, Babel, webpack, and…
  • Set up React and write your first “Hello world” web app Build a data table component that lets you edit, sort, search, and export its contents Use the JSX syntax extension as an alternative to function calls Set up a lean, low-level build process that helps you focus on React…
  • The React.js JavaScript library supercharges view-heavy web applications by improving data flow between UI components.
  • This book explores the React library in depth, as well as detailing additional tools and libraries in the React ecosystem, enabling you to create complete, complex applications.
  • Peek under the hood to understand how React runs in the browser Use component trees to manage data and reduce the time you spend debugging applications Explore React’s component lifecycle and use it to load data and improve UI performance Use a routing solution for browser history, bookmarks, and other…

Hands on book to build your first own application in plain React, i will recommend you a good, beginner friendly book about ReactJs.
Continue reading “Best React.js Books You Must Read”

Why I decided to move from Android to React Native – CloudBoost

Why I decided to move from Android to #reactnative

  • There were several reasons why I chose React Native as my new framework and I want to share with you which were these reasons :Frequently, I use some applications which are built with React Native such as Booking, Airbnb, Facebook and Instagram.
  • Their animations, performance and UI are almost native and It is difficult to feel and see difference between Android Native and React application.Another thing I saw was that big companies are starting implement and get involved on React Native.
  • But I could not say the same of React Native here is an example.I made a retrospective about all applications I have made so far in order to found which of them could not be built on React Native.
  • Common features I am talking about List, Sign in, Social Logins, Video player, Audio player, Image render, Forms, Tabs, Details views, Navigation and Animations.Write one and run everywhere, it is well know that if you write a React Native you can run on Android and iOS.
  • It’s also easy to build part of your app in React Native, and part of your app using native code directly — that’s how the Facebook app works.Sooner or later as Android Developer you will have to learn Kotlin.In conclusion, React Native is a framework cross-platform that has been well built and…

I have been an Android Developer for 4 years. During this time I have had the opportunity to development several Android applications. But since 2 months ago I started coding a new application called…
Continue reading “Why I decided to move from Android to React Native – CloudBoost”

React Native Fiber — a starter kit focused on animations

  • React Native Fiber — a starter kit focused on animationsFiber is an iOS and Android React Native theme heavily focused on animations.
  • Inspired by Fiber from Framer.I’m a strong believer that premium starter kits written in React Native are the fastest way to bootstrap a new project that works on both iOS and Android.
  • Next, I really wanted to provide a kit that is heavily focused on React Native animations and implemented: Fiber.
  • This new starter kit is the implementation of the Fiber UI kit from Framer.Fiber has been written using es6 and flow annotations for type checking.
  • The visual design can easily be customized and all aspects of the app are implemented: from navigation to data management.

I’m a strong believer that premium starter kits written in React Native are the fastest way to bootstrap a new project that works on both iOS and Android. And I’ve always been looking to implement a…
Continue reading “React Native Fiber — a starter kit focused on animations”

Real World React Native Animations from @browniefed on @eggheadio

Real World React Native Animations - #reactnative course by @browniefed

  • In this course we’ll explore how to create many popular animated concepts in applications across web and mobile applications.
  • We’ll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.
  • This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.
  • The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

In this course we’ll explore how to create many popular animated concepts in applications across web and mobile applications. We’ll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.
This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.
The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

Continue reading “Real World React Native Animations from @browniefed on @eggheadio”

I’m impressed by . The API is powerful and the implementation fast. It avoids unneeded rende…

  • The goal of this repo is to provide an implementation of the Animated library that is currently provided by React Native that can also be used by React in a web context.
  • At some point, React Native will itself depend on this library.
  • Additionally, it would be ideal if this library would be compatible with future potential “targets” of React where animation makes sense.
  • Right now the main export of this library is essentially just what is in the namespace in React Native, minus the , , and namespace.
  • Ideally, I’d like to make it so that , , and are exported, and just do the “right thing” depending on whether or not they are being used in the context of React Native or React Web.

animated – Declarative Animations Library for React and React Native
Continue reading “I’m impressed by . The API is powerful and the implementation fast. It avoids unneeded rende…”