Using an After Effects animation in your iOS, Android or React Native app

Animations greatly improve overall user experience! This tutorial explains how to export and use an Adobe After Effects animation in your iOS, Android or React Native project, with Bodymovin and Lottie.

Animating your logo with After Effects

The first part is creating the animation with Adobe After Effects. After Effects is a powerful tool that is used to create digital visual effects and motion graphics. Starting with After Effect is fairly easy. Animating a logo for example will take you a few hours. Read my last blog post and go for it: Adobe After Effects: how to get started?

Continue reading about Using an After Effects animation in your iOS, Android or React Native app

Tags: , , , , , , , , , , , ,

Hackday React Native for Android

When React Native for Android came out I was excited to investigate it more at one of Liips monthly innovation days. Liip already developed a React Native app for iOS and we wanted to know how it works for Android. We were: Andrey, Germain, Lukasz and me. Germain is currently working on a cross platform app written with Xamarin.

For this hackday we tried to port an existing React Native iOS app to Android.

TL;DR: We are waiting for WebViews to be supported. See the pull request for changes. We didn’t need to dive deep into Android APIs like XML Layouts for views.

Continue reading about Hackday React Native for Android

Tags: , ,

React Native hackday

Yesterday we had a hackday on React Native. The goal was to find out how it feels to develop native iOS apps with Javascript and how much we have to learn to get started. GermainPedro and Adrian (myself) participated. Our combined knowledge of Javascript frameworks listed projects like Angular JS, Backbone, Exosjs, Ember, ReactJS and jQuery. Germain did a bit of Swift but basically we are web developers without iOS experience.

We started with setting up the sample app from the tutorial and played a bit with changing content and reloading the app. Live reloading worked for all three of us only for a few changes before it stopped reloading, we have to investigate further what the cause of that is. After setting up Apple Developer accounts we deployed the sample app on our phones which worked well. We liked how easy it was to get started thanks to the react-native-cli tool.

Since I already hacked on an example project with React Native before, I gave a short introduction of React, JSX and StyleSheets. We all got the UIExplorer example running which is great to see what React Native can do and to use as a reference when creating own applications. The examples felt great and well… native.

A hackday wouldn’t be called a hackday without hacking so we thought of something we could work on. We wanted to try to get a sliding menu and maybe hack a bit on the Guess the Liiper sample app. When sharing the Guess the Liiper code we had some issues with setting up the .gitignore file correctly for an XCode project and updating the react-library to the latest version. Pedro and Germain investigated the sliding menu and how to add images while I fixed the Guess the Liiper app to be actually usable. We found the react-native-slide-menu, integrated it into the sample app and used a background image for the content. When requiring the image we had some issues but that seems to be known. We ended up with a working app, see the source code. We went through the source code of Guess the Liiper and thought of how to create a circular progress bar like this. React-native-svg might be useful to create this.

React Native sliding menu sample app

Findings

Working with React Native is… reactive! It felt like developing for the web and we didn’t have to spend much time getting into it. With the tutorial, UIExplorer app and the sample app it was easy to get started. The Chrome Debugger and tooling like the great Chrome React extension was for us the usual way to debug javascript apps. When thinking about what to implement we found that many components already exist – mostly in a beta stage but the community is very active.

We had to get used to Xcode, digging into the native tools is necessary of course but finding things in Xcode wasn’t the most intuitive experience for us. With our existing knowledge we think we can get quite far to develop apps, especially for quickly prototyping. Probably it needs more iOS and Swift knowledge for specific functionality like applying filters to images, microphone and camera access etc.

When working on styling we noticed that it would be great to have live editing like in Chrome Developer Tools which we are used to. Since we don’t have any iOS development experience we can’t compare this to the normal way iOS apps are developed. But being able to immediately see style changes made in the Dev Tools would be awesome.

We think that the development experience with React Native is great for web developers. The project is very young and it is too early to tell how disruptive it will be. Many components are being developed and there is definitely traction in the community. We are especially looking forward to the Android version.

Tags: , , , ,