Boss: “Can you release a new version of Android Alpha?”
Developer: “ Yeah, sure. Hmm 🤔. Hey boss, how should I do that?”
Boss: “Just run fastlane android alpha.”
Developer: “Yeah, but what about version? Shouldn’t I update it in those Gradle files?”
Boss: “No. Just run fastlane android alpha.”
Developer: “And build number? We use it as a version code on google play.”
Boss: “Just run fastlane android alpha and let’s have a coffee. ☕ I’ll tell you how it works.”

Recently I was thinking about how to use semantic release package for my React Native Apps that use Fastlane. I like the idea to absolutely not think about versioning or build numbers. And I like conventional commits.

Semantic release as a Fastlane plugin 🎉

That’s why I wrote this plugin. When you install the semantic_release plugin to your Fastlane. You’ll be able to use these actions — analyze_commits and conventional_changelog. The code is open-sourced on my GitHub. This plugin is also used for releasing the plugin itself. So you can get inspired in the Fastfile!fastlane add_plugin semantic_release

Fastlane Config of React Native App

I will share with you a simplified config of my Fastlane. First of all, we need to find out what build number is next. Because we use build number as a version code on google play. This happens before all lanes. (Read comments in the snippet.)

iOS Alpha Deploy

Let’s go step by step from the end of the workflow.

Post Deploy

• generates a changelog
• pushes a tag of the next version to the GIT repository
• sends release notes to the Slack channel

A format of the tag is always [platform]/[flavor]/[semver]/[build_number]. It uses this tag to know what version was deployed last time. You might be wondering where we got the next_version. It is generated by analyze_commits action. We’ll talk about it later. Now, let’s talk about conventional_changelog action.

Conventional Changelog Action

What do you get when you use conventional_changelog? Look at the right side of the following picture. That’s what you get as a string. The changelog grouped by types of commits.

It takes commits marked as a fix and commits marked as a feat, groups them and create this changelog in either slack or markdown format. You can set up section titles and also their order. You can set up which commits will be skipped and which will be included in the changelog. Everything is up to you!

Build

In this step, we need to take the next_version number and save it to Xcode files. We use already known Fastlane actions as increment_version_number or increment_build_number_in_plist. Easy with Fastlane!

Build — Android

Just short jump to the build of Android workflow. Maybe you are wondering how to set up the version in app/build.gradle file. We send properties to the Gradle task. Build number and next version.

Later in build.gradle I get these properties and set the default config for versionCode and versionName.

Verify

Back to iOS. That’s the action where everything starts. First of all, it ensures that GIT status is clean. Then we split run to “On CI Machine” and “On Local Machine”. Just because we want to save some minutes on CircleCI. We usually deploy both iOS and Android versions together. So we don’t have to install dependencies and check the code quality twice.

Analyze Commits Action

Returns true if the version should be released. It also provides some useful variables to the lane_context. So you have access to them everywhere in Fastlane. For example, the execution on the following picture would store 1.4.2 to the lane_context[SharedValues::RELEASE_NEXT_VERSION]. We used it before in those snippets. 😉

This action is very useful when you have set up nightly deploys with CI. If there are no changes since the last night it won’t be deployed. Or if there are only changes that do not have any impact on the app itself. For example, just updating documentation or building scripts.

How do you release your React Native app?

Please let me know what do you think about this plugin. Would it be helpful for you? Do you need to adjust some parameters of the actions? Do you need to add some action to make your release absolutely automated?

Alpha. Beta. Production. Times two — iOS and Android. Plus Codepush. Those could be versions of your React Native app. I want to share with you guys how we deploy everything automatically by using GIT flow and Conventional Commits. Inspired by semantic-release.

When do we release those versions?

• Alpha Version. Every night. For in-house testing. Based on the develop branch.
• Beta Version. Triggered by pushing to the beta branch.
• Production Version. Uploaded to Apple Store and Google Play. Triggered by pushing to master branch.

All those versions are released only when there is a reason to release it. If there is no new commit since the last version the workflow will be canceled automatically.

How does our version look like?

We use a semver. Major. Minor. Patch. It could be 1.3.4. When we release a version, we create a unique tag in the GIT. For example, android/production/1.3.4/7683 or ios/alpha/1.5.0/8754.

Why we do not store version in a package.json 🚫

If we stored the version inpackage.json file (as many people do) we wouldn’t be able to increase the version automatically. Because it is changed by CircleCI and CircleCI would have to push the change back to the repository. That would trigger a new release. Because every single push triggers a release. Not talking about how many Bump version commits we would have in the history of GIT.

How does it work with Production Release?

In this example, we push to the master branch and expect Android and the iOS app will be uploaded to the stores. We will simulate a fail of the iOS build.

Push to Master #1

The master branch was “fast forwarded” (merged) from the commit A to the commit D. The last version for both is on commit A (see tags).

Release workflow is triggered. First step. Install dependencies. No big deal. It only creates a node modules folder. The second step. Code quality check. Jest. Lint. Flow. If one of them ends up with an error, the whole workflow will be canceled.

After this step, our workflow is separated into the Android branch and iOS branch. And this is a point where the commit analysis plays a big part in the workflow.

Android
Our script (Android Analysis) finds the last tag for android/production(simply by using the git command line tool). The tag is found on the commit A. It gets the last version by parsing of the tag name. It is 1.3.4. Then, by analyzing commits, it finds out a next version number.

• Commit B. Feature (feat keyword). It means we have to increase a minor number 1.4.0. If you increase the minor number you must reset patch number (see semver documentation).
• Commit C. Fix (fix keyword). Increases patch number 1.4.1.
• Commit D. It is just an update of documentation (doc keyword). There is no change in the version number.

That’s it. We got the next version number. No manual actions! Next version 1.4.1 is higher than the current version 1.3.4. Release continues. Decided automatically. We can pass the number to the Fastlane and build a release. Once the build is ready, it continues by deploying the version to the store. After deployment, it creates a new tag on HEAD (commit D) and generates release notes. Android is done!

iOS
Our script (iOS Analysis step) finds the last tag for ios/production. It continues in the same way as the android part. It gets the next version number 1.4.1 and continues to build and deploy steps.

To make it a bit complicated, let’s say that the build of the iOS release failed. Because of our build tool is badly configurated.

What should we do now? Android is already released. If we change something and push to the master it will release Android again. We could wait on CircleCI and cancel the job manually. 🤔 Fortunately, we don’t have to. Let’s see why.

Push to master #2

We fixed the problem that caused our iOS app wasn’t released. Now we pushed the fix to the master. It will trigger the deployment workflow again. But because of our scripts, the workflow will be different this time.

Android
There is only one commit since the last version of android production (1.4.1). And that’s what was changed since the last release. Because Android was successfully released (Push to master #1). The new commit E won’t increase a version number. Because it is just updating of building tools. The workflow for Android ends with Android Analysis step.

iOS
The situation will be the same as during the push to master #1. There is only one commit more. But this commit doesn’t change the version. The last release of the iOS version is 1.3.4 on commit A. It analyses commits and finds out that the new version will be 1.4.1. It continues with the build, deploy and it will be successful this time. 🎉

Even though we pushed to the master again, the Android version wasn’t released again. We didn’t have to cancel anything manually. Everything works automatically. Just by analyzing commits.

Release Notes

It can even generate release notes by analyzing of the commits. This is our GIT history after the push to master #2.

Release notes for iOS include commit B as a new feature and commitC as a fix (patch). It will skip commit C and commit D because they don’t change anything for users.

Codepush friendly? 👍

You very likely already heard about codepush. A tool that provides us a possibility to release only javascript part. Users would get updates immediately. Nice idea. But in the real world, when we were preparing a release, it was always hard to know if we can release just a javascript or not. There were always doubts. And something extra we needed to do every release.Now, we have this release tool. It analyzes commits for us. Our developers just have to mark the commit they are working on. Let’s say they will write a keyword to the commit message. For example [codepush-ok].Then it does exactly the same as during the upload to the stores. Finds the last tag of codepush release. Analyze commits since that release. If there is one commit which is not marked as [codepush-ok] it will cancel deploy. If all commits are marked with [codepush-ok] we can release codepush version. Isn’t it easy?

How do you release React Native apps?

I’ll be happy if you leave a comment and tell me your secret about releasing. How do you deal with versioning of React Native app? Are you still doing that manually? Do you use package.json?

Recently I was looking for a React Native graph library for my Savee.io app. During the research, I realized it’s not easy to deal with graphs in React Native. And if you want to animate them? It looks almost impossible. The following gif is what I have done and will talk about in this tutorial!

Without ART library

When I was doing my research about charts in React Native, I found out that almost everyone uses the ART library. Which is really cool and powerful drawing library. Look at this pie chart that has been done by ART library for the Savee.io app.

But when you want to animate it? Well, you can. It is possible. But the animation is done by JS thread. I am always trying to find a way how to move everything to a native part, so our JS thread is not blocked by animation and can work on something else.

The column chart I am going to talk about (and you can see in the gif below) has been done by pure React Native. No ART library!

Let’s make it a bit complicated

I realized that I also need a negative value in the graph. Users of Savee.io usually create a group for a trip and track their spendings. Obviously, there are only negative values — only spendings. The following gif shows how the animation looks like for both negative and positive values.

Layout

I decided to make every single column separately as a component. So I could add a “delay” effect. You can see that the animation starts randomly for every single column when the graph is changing a position of baseline. Let’s work with the 200 height. Value’s height could be 25 and label’s height 25 as well. That makes 150 for column.

If the graph’s height is 150 then the column’s height is 300. Every column has a positive part (A) and a negative part (B). Opposite side of these parts is always hidden. The A is hidden for the negative part and the B is hidden for the positive part. It means that if we move the positive part (A) underneath of baseline to the B space, the positive column will be completely hidden. That’s what we want when the value is negative.

You can see the negative value for the last column on the picture. The value is -5. Positive column is completely moved underneath of baseline (it’s hidden) and negative column is moved to proper Y position to represent -5 value. A maximum value for this graph is 10 (first column). It means that the -5 will be in the middle of a negative part (75 / 2).

We need to do a bit of math here because we need to interpolate actual value to Y position. But I am not going to talk about this here. I believe that you can figure everything out pretty easily.

Animated Column

I used my open source library called react-native-motion and component TranslateY. Which makes animations really easy to implement. Look at the code. Easy to understand. We use TranslateY component in the same way as we would use View component. The only thing we need to do is compute Y positions for positive column, negative column, baseline, and a value label.

Check out the result in a real application. Savee.io already implemented the column chart. As I said before, everything is done by UI thread (it’s pretty fast). There is an onPress event so you can change the months. When you select the category it will change the values of a graph and recomputes Y positions. Then the react-native-motion takes care of animation.

Animated Number

The number animation is a bit problem. Because we can’t move it to UI thread. It has to be done by JS thread. I’ve seen that developers usually have the effect done by setInterval. Of course, you can use it, but I wanted to do it safer.

So I use React Native’s Animated API even for the number animation. We can add a listener to animated value and when the value is changed we just re-render the number. It’s easy and you can take advantage of the Animated API. By using an Easing for example. And what’s the best? I put the component to the react-native-motion library which is open-sourced for you guys 😉

You just have to write a couple of lines like this. Once the value is changed in your code it will take care of the rest.

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

Today’s goal is the login/logout flow which you can see on the gif!

When I was building an application it was always hard to deal with login flow. From the navigation point of view, from a user point of view, from the clean code point of view.

If the user previously signed up to the app it should try to log in automatically (1). So the user doesn’t have to do anything. If it is a new user the application should render login/signup form (2). So the user can create an account. Then we usually want to get some data (3). Prepare the app to use. And finally, we can render the app itself (authorized part of the app).

Use navigation

I usually use react-navigation as a navigation library. For me, every single step is separated from each other and written as a page/screen. So if I have a bigger onboard flow I can add or remove the step very easily. Below, you can see the code of login flow controller (guys call it Switch in react-navigation). It is very simple approach how to render particular page when the redux state was changed. This controller is always mounted. So if we want to logout user, we can just set loggedUser variable to null in redux store and this controller will render LoginScreen. Easy and clean!

So at this stage, we have a clean code and clean navigation. But the user will see just flickering screens (like on the gif below). We actually don’t know how long those screens will be visible. It can be only 100ms. So every 100ms React renders a new screen. The user could be confused here. I wanted to do it smoothly and understandable. I decided to cover all those screens by only one screen with the logo of application.

How is it done?

It is so simple that there is no need to show the code. There is a redux store variable which represents the Y position of the cover screen. If the variable is set to zero the component completely covers the application and if the variable is set to - window.height the component is out of the screen — so the user can see the application. Easy, right?

Note that we are using useNativeDriver so the animation won’t block JS thread!

Logout Animation

There could be someone who is confused by logout animation. Because I said that the cover screen is completely out of the mobile’s viewable area. So if we animated the cover screen from there it would look like on the picture below.

The header would be covered by the cover screen during the animation (right part of the picture). Which is not what we want to do. So before the animation itself, we render exactly the same header on a bottom of the cover screen. Then we have to find out where the header’s bottom position is (status bar height + height of header). Once we know the position, we can use setValue on AnimatedValue and set the position of the cover screen immediately (without animation — right part of the picture below). After this, we can animate the cover screen down as usual.

Logout is in progress

The last animation we are going to talk about is how to clarify the progress of logout process. I decided to use this animation because it looks like it is actually forgetting the user (he is disappearing).

It is simple opacity animation with some rotation on the right settings icon. The most interesting is the text. Someone could think it is done by setTimeout or by something similar. By it’s not. We actually listen to the progress of opacity value. For example, if the opacity is in the middle (value 0.5) the code will looks like this.

It is a good approach how to do that because we can use all advantages of Animated class. For example, we can use a different easing. So it won’t be linear. Another bonus here is that it will finish at the exact same time as the opacity animation.

Note that we have to do nothing during the animation, because it is done by JS thread. So we probably want to use InteractionManager here.

Check it out in the Savee.io

I wanted to build kind of playground for my animations and these articles. So I decided to build Savee — Financial Manager. During only 22 days, I have done iOS version, Android version, website presentation and wrote a How I built profitable application faster than found new job! about that. Can’t say how much I enjoy this time. You should try it as well! If you want to support these articles (and me) you can buy the Pineapple. Just $2.99 a year. Nothing for you. Big motivation for me! Thank you 🙏

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

Recently I’ve tried to get an inspiration for a next animation challenge. And here we go — created by Ivan Parfenov. I was curious if I am able to do this transition effect with React Native. You can check out a result on my expo account! Why we even need the animations like these? Read Good to great UI animation tips by Pablo Stanley.

We can see there is a couple of animations. Toolbar tile (show/hide), bottom bar (show/hide), move a selected item, hide all others, show detail items and maybe even more.

The hard thing about the transition is to synchronize all of those animations. We can’t really unmount the List Page and show the Detail Page because we need to wait till all animations are done. Also, I am a fan of having a clean code. Easy to maintenance. If you have ever tried to implement an animation to your project, the code usually gets messy. Full of helper variables, crazy calculations, etc. That’s why I would like to introduce react-native-motion.

An idea of react-native-motion

Can you see the animation of toolbar’s title? You just need to move the title a bit and animate an opacity to zero/one. No big deal! But because of that, you need to write a code like this. Even before you actually start to write UI for that component.

Now let’s take a look how we can use react-native-motion for this. I know the animations are quite often very specific. And I know React Native provides very powerful Animated API. Anyway, it would be great to have a library with basic animations.

Shared element

The biggest problem of this challenge was moving of selected list item. The item that is shared between List Page and Detail Page. How to move the item from FlatList to the top of Detail’s Page when the element is actually not absolutely positioned? It is quite easy with react-native-motion.

We specified source element of the SharedElement on List Page. Now we need to do almost the same for destination element on the Detail Page. To know the position where we want to move the shared element.

Where is the magic?

How can we move a relatively positioned element from one page to the another one? Actually, we can’t. The SharedElement works like this:

- get a position of the source element
- get position of the destination element (obviously, without this step the animation can’t be initiated)
- create a clone of the shared element (The magic!)
- render a new layer above the screen
- render the cloned element that will cover the source element (in his position)
- initiate move to the destination position
- once the destination position was reached, remove the cloned element

You can probably imagine there are 3 elements of the same React Node at the same moment. That’s because List Page is covered up by Detail Page during that moving animation. That’s why we can see all 3 elements. But we want to create an illusion that we actually moving the original source item.

You can see point A and point B. That’s a time period when the moving is performing. You can also see the SharedElement fires some useful events. In this case, we use WillStart and DidFinish events. It is up to you to set an opacity for source and destination element to 0 when a moving to destination was initiated, and back to 1 for destination element once the animation was finished.

What do you think?

There is still work on react-native-motion. It is definitely not a final and stable version of this library. But it is a good start I hope :) I would love to hear what do you think about that!

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

Hey guys! It’s been a while since I wrote an article about animation. I’ve needed to solve a problem with Ripple effect for iOS recently. Now, I'd like to share how I have done that with you guys.

I am currently looking for a new job or project. If you need a help, with either React Native or React, let me know, please ;) I will be happy to help, learn, discuss, etc. I am available to hire right now! LinkedIn or Twitter

The goal

Create a RippleFeedback component that we can use for both Android and iOS. Since the Android version is pretty easy, using TouchableNativeFeedback, we won’t talk about it. Anyway, you can see it in react-native-material-ui.

The idea 🤔

We’ll get a content for a RippleFeedback component as children. In this case it’s a Button component. Then we need to create Background Layer (BL) and Ripple Layer (RL) which is represented by rounded View component (circle). Those views will be wrapped by TouchableWithoutFeedback component, because we still need to provide events like onPress, onLongPress, etc.

When I tried this feature on Android I noticed it behaves slightly different for onPress and onLongPress. You will see later in this text.

Immediately after onLongPress is called the BL is displayed. When user releases the button BL is animated to default value and in the same time starts Ripple animation (opacity to zero and scale value to 1).

After onPress is called all of these animations happen in the same time. Opacity of BL is animated to maximum value, opacity of RL is animated to zero and RL’s scale value is animated to 1. After all of these animations are finished, BL is animated to default value (zero) and RL is reset to default values. Note that they are animated and reset. You will see why we don’t have to animate RL’s values.

Let’s code ✍️

Here’s a skeleton of code with Views rendered in default mode. You can see default animated values in constructor. RL’s scale value (scaleValue) is set up to zero because we want it to start as a really small point (actually hidden point). And its opacity (opacityRippleValue) is set up to maxOpacity which is value between 0 and 1 (in this case it is 0.3). Last value is BL’s opacity (opacityBackgroundValue) which started as a hidden layer (value is set up to zero) and after user presses it is animated to max opacity and back to zero. It makes a blink effect.

A children node is passed to this component as a content. We just need to render it inside of TouchableWithoutFeedback component.

Then we have a background layer (BL) and ripple layer (RL). BL is rendered in the same size as a container and RL is rendered as a circle with zero size by default. BL makes a blink effect and RL makes a ripple effect.

Notice an order of components. We don’t use zIndex. If we put children as a third child it would be over both layers Background and Ripple.

One more thing here — pointerEvents. For both layers BL and RL we set up this to none because we don’t want to get any events like an onPress. For container View, we set box-none which means we want to get only children events not events of container itself.

Let’s animate

First of all we need to know the point where the Ripple Effect should start.

Immediately after user presses the button, we store a point where user tapped. And as you can see, in renderRippleLayer, we use this point to set up the position of RL. In other words we put a center of circle to this point. Just note that the circle has still zero size in this moment.

We’ll start with onPress event and only with Background Layer (blink effect). You can see Animated.parallel that runs all animations from array in the same time. It will make sense once we push RL Animation to array (next example). Line 6 animates opacity from zero (default value) to max opacity. Then after the animation is finished we need to animate value back to default. We can use start’s callback which is called exactly after the animation is finished. Now, we can animate opacity of BL back to default value. Here’s how the animation looks like without Ripple Animation. Blink!

Let’s animate Ripple Layer. It’s the same onPress method. I’ve just commented what we’ve seen in previous example. Now, we animate RL’s opacity from default (maxOpacity) to zero and scale value from 0 to 1.

After is finished, we need to set those animations to default values to be ready on next press. That’s what setDefaultAnimatedValues does. We don’t have to animate the values back to defaults (we just set them). Because it’s actually hidden after animation is finished. See line 11 of previous example. We animated opacity to 0. That means it’s hidden and we can set those values immediately without animation. Ripple Effect without BL looks like this.

And that’s it. It’s not so complicated, is it? Here’s both of animations together.

There’s still onLongPress animation remaining. Anyway, it’s almost the same like onPress animation. We just need to separate them. When user presses and holds the button we’ll display BL. That means we animate BL’s opacity from zero to max opacity. It seems like user holds the BL displayed during a holding of the button.

Then we make the magic in onPressOut method. Opacity and scale of RL’s is the same like in onPress. Only difference is we slowly animate BL’s opacity back to default value. We have done this step in start’s callback. But now, we have displayed BL in onLongPress already so we animate it back to default here, together with Ripple Effect. It looks like this.

Easy peasy …

I know, I know :) I needed that to be done for Reservio application which uses react-native-material-ui. Anyway, I hope there is someone who appreciates this and maybe learn something new or just gets an inspiration. Or questions?

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

Last time, we were talking about how to animate components that are displayed on toolbar (icons and title). Now, we’re going to talk about how to animate the background.

Idea

It’s simple. And if there wasn’t this issue in React Native it would be even simpler.

We need two rounded Views that are displayed as a background of the Toolbar component. Let’s say we have Green one and White one (as we can see on the picture above). The Green one is scaled to 1 by default. And the White one is scaled to zero by default.

It would be great, if we could render them under left icon (Green one) and under search icon (White one). But we can’t. Because that issue in React Native. We can’t set scale to zero. Workaround is set scale to 0.01. But there would still be Green or White dot under the icon, because these rounded Views are pretty big. And that’s what we don’t want.

Here’s a workaround. We will put these rounded Views outside the bounds. It doesn’t follow the material design’s pattern, because it should start from the icon where a user presses, but it’s still good looking, isn’t it?

Let’s code

Here’s a code what you need to approach that animation.

If you are interested in LeftElement, CenterElement and RightElement components, we were talking about them last time. In this code, there is onLayout callback, because we need to calculate how big should the rounded Views be. It depends on size of Toolbar, because we need to cover whole Toolbar component. Moreover, we need to cover it by only half of rounded View. Because it starts from side of Toolbar, not from center. And also we calculate with size of point that I mentioned above, in Idea section.

Now, we need to call onSearchOpenRequested method to animate scale value of the White background. After that animation, we set scale value of Green background to zero, because we want it to be ready to next animation. Note that the Green background is under the White background and user can’t see it. But when we set scale value of Green background to zero, we can switch zIndexes of Green and White backgrounds, so the Green one is above the White one now. But its scale value is set to zero, so user still can’t see the Green one. When we call onSearchCloseRequested, we repeat the process for Green background. We animate its scale value from zero to one. When the animation is completed (user sees the Green one), we can set scale value of White background to zero and move it above the Green background. Now we have everything ready to call onSearchOpenRequested again.

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

Today, we will talk about animation of Material Design’s Toolbar. As you can see in the picture below, we need to animate couple of Views together.

In this part, we will design the components and learn how to animate the text and icons. There’s going to be another article that describes background animation. I think it will be more interesting part for you guys.

You can also check react-native-material-ui library, which already implements the Toolbar component. I’ve been using it for Savee.io.

Idea

We will implement LeftElement, CenterElement, and RightElement. Then we have a Toolbar as a wrapper of those three components. There are two states. The search mode is either active or inactive. So we will animate a transition between them.

The first animation is a rotation of the LeftElement (arrow icon). The second animation is an opacity of CenterElement (title). We need both of the components to be re-rendered during the animation. LeftElement is changed from menu icon to arrow icon. CenterElement is changed from Text component to TextInput component.

Let’s code

First of all, we need to create a simple static View. No state, no animation.

The LeftElement and RightElement components are almost the same. Note that the IconToggle component is included in the react-native-material-ui library. You can also check the Ripple Effect Article on this blog if you are interested in how it works.

The CenterElement component is also quite simple.

Let’s add the state

We have to add the state to the Toolbar that will control the animation. We can already use it for searching now but we want it to be more cool, right?

After we press the right icon, we set isSearchActive to true and pass it to all components via props. Then we have to pass a value of TextInput to RightElement and show clear button if it’s needed. Here’s a code for right icon. You can change the left icon in a similar way.

Let’s animate

We start with the left icon, which rotates and changes from menu to arrow. Then we animate the opacity of title. The right icon stays without animation. Sometimes, it’s better to do nothing.

Left element

We start to rotate menu icon to 90 degrees. Then we set leftElement to the arrow. It invokes re-render of the component and renders arrow instead of the menu. Then we can rotate arrow icon from 90 to 180 degrees. It would be better to have kind of micro animation over here but it’s not the goal of this article. Maybe next time?

The animation starts in componentWillReceiveProps where we check isSearchActive in props. We need to know if we animate from zero to 180 degrees or from 180 to zero.

It’s good to know about Animated’s interpolate function (line 40), which maps value to different value. It’s from number to degree in this case.

Center element

We change CenterElement in a similar way. We need to set the state in the half of the animation.

We animate the opacity from 1 to zero. Then we set a state.textInput to true. It invokes re-render and renders TextInput component instead of Text. Note that the opacity is still set to zero. So we need to animate the opacity again. From zero to one.That’s all for now. Everything is ready to implement the background animation.

Second part is here — it is about how to animate the background of toolbar.

Did you like it? Clap, Comment, Share and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn

This is a tutorial on how to make a ripple effect for Material Design’s Icon Button. We’ll use Animated API, which is a part of React Native.

You can find an IconToggle component in open-source project called react-native-material-ui. If you want to rather see it in a real app you can check out the Savee.io!

The idea 🤔

We’ll make three Views. One of them as a container for IconToggle component. Another one as a container for ripple effect and last one as a container for Icon. We’ll wrap them in React Native’s TouchableWithoutFeedback component that fires onPressIn and onPressOut events.

Why do we need both of these events? Because there are two different animations. A scale animation and an opacity animation. They may run together, of course. So, is the onPressIn event enough? No. Because there could be a situation when the user presses the button for a longer time. Then we need scale animation to run first and wait for onPressOut event that runs opacity animation. It’s exactly how the icon button’s ripple effect works. I simulated that with the red star icon in the last example above.

Let’s code ✍️

First of all, we’ll create a blank page for this example. Then we’ll create IconToggle component and the ripple effect animation. Finally, we’ll make some correlation.

Now, we have a view with Toolbar which is known from Material Design by Google. The Toolbar is not a goal of this tutorial, so we took it from react-native-material-ui library. Then, we put the IconToggle components and implement it in the following Gist.

Again, we took Icon component from react-native-material-ui. Now, the animation.

Let’s animate 😎

On lines 14 and 15 we created two Animated.Values. One of them for scale animation and second for opacity animation. We pass them to Animated.View via its props. The scale animation begins inside of onPressedIn function, that is fired after the user presses icon. It starts from 0.01 (not zero) because there is an issue in React Native. Later, when the user releases the button, the opacity animation will start. It doesn’t matter if the scale animation is still running or not. After the opacity animation is done, we need Animated.Values to be set to init values (line 34). That’s it. That’s the whole ripple effect.

In this code, we just added a color for icon and ripple effect. Look at line 12 and 18. We would like to use a native thread for Android platform (edit 2018: now you can also use the native thread for iOS as well) because then the animation doesn’t block the JS thread. In a real application we’ll probably fire onPress callback and there will be another code to run. We don’t want to block it, so it’s better to use native thread for animation.

Last words  

You can find the whole code on my Github account. Note that it’s not ready for production. For this purpose, you can use react-native-material-ui that I’m developing as an open source library and using it to build the financial app called Savee.io.

Did you like it? Clap and Follow me! 👏

Actually you don’t have to do anything of that. But it will help me a lot. It’s a big motivation to the next work. Next articles like this for you guys.

About me 👦

I am an author of Savee.io (which I also use as a playground for my animations 🤷‍). I open-sourced react-native-material-ui and react-native-motion libraries. Writing about them in this blog.

If you need a help with your React Native app (animations, performance, etc.), let me know, please ;) I will be happy to discuss it.

👦 Website
✍️ Medium
🐦 Twitter
📚 Github
🚧 LinkedIn