Everything around you is interactive. You can touch, manipulate every object you have using buttons, sliders and many more.

In React Native, we use touch to declare gestures and it is crucial to know how to use them wisely. In today’s chapter, let’s learn about the basics of gestures.

Image for post
Image for post

This was first published as a video for the How To Animated series. If you learn better through audio/image, I highly recommend it.

This article is part of a series. If you are unfamiliar with the basics of animations (Animated.Value, Animated.View,


Page after page, you keep scrolling. Whether it’s on your computer or your phone, a lot is usually happening while scrolling.

In React Native, it is important to know how you can add side effects when the user scrolls down. In today’s chapter, let’s learn about animated events with scroll views.

Image for post
Image for post

This was first published as a video for the How To Animated series. If you learn better through audio/image, I highly recommend it.

This article is part of a series. If you are unfamiliar with the basics of animations (Animated.Value, Animated.View,


When baking cookies, you go from one solid little square to a soft medium piece. Not just one aspect of it changed over time but quite a few including its color.

In React Native, it is important to know how one animation can be mapped to many others at the same time. In today’s chapter, let’s learn about interpolation.

Image for post
Image for post
Growing and changing cookies :)

This was first published as a video for the How To Animated series. If you learn better through audio/image, I highly recommend it.

This article is part of a series. If you are unfamiliar with the basics of animations (Animated.Value, Animated.View)…


In real life, objects usually follow non-linear movements. A ball for example won’t fall at the same speed from the first second to the last, it will change over time.

To mimic real and natural animations in React Native, you need to learn about how they can be configured to get this organic feeling. In today’s chapter, let’s learn animation types.

Image for post
Image for post

This was first published as a video for the How To Animated series. If you learn better through audio/image, I highly recommend it.

This article is part of a series. If you are unfamiliar with the basics of animations…


Everything moves. Animation is this science of what is a good movement and what isn’t. Whether it is with objects or drawings, animation takes anything from one state to another in the smoothest way possible.

In this series, I will help you to understand how to bring the art of animation into React Native. In today’s first chapter, let’s start with the basics.

Image for post
Image for post

This was first published as a video for the How To Animated series. If you learn better through audio/image, I highly recommend it.

The problem

Let’s think of a square. If I want it to move, I can change…


When Github released Codespaces, I honestly didn’t think I would ever drop my editor for a tab running in my browser. Well, I was wrong.

Image for post
Image for post
It is quite difficult to realize we got this far

Premises

What React Native accomplished amazingly well in the first place was to simplify mobile development. Everything you had learned about web could now also be used for mobile apps.

Although this was a big jump following the Cordova/Ionic era, a major problem remained: native knowledge was still required to get somewhere, whether it was XCode or their gibberish Objective-C.

Fortunately, if you have been using React Native lately, you must have heard of Expo and…


An explanation of how SwiftUI works coming from a React background

Image for post
Image for post

Basic Components

  • function/class turns into struct
  • React.Component becomes View, a pure UI element
  • function return/render(...) becomes var body: some View { ... }

State

Initialization

Use the @State decorator to define a state property for your component:

Pretty straight-forward. Use self.stateProperty instead of this.state, just as any struct property.

Update

No setState, no setProperty, just update the value right away and the component will re-render accordingly.

Props

Props should be defined using component properties:

  • Set default values:
var message: String = "Goodbye"
  • Props here are just as immutable as in React
  • Props can become mutable by setting:
// Calling component @State var…


You may be wondering why people both love and hate Expo so much. Put in a nutshell, Expo is extremely convenient. I believe there is no easier way (if you know about React) for getting started with mobile development. It’s cross-platform, simple and has great tools for you from testing to publishing your app. So where’s the catch?

In case you don’t know about Expo, it’s a suite of tools and APIs that helps you build React Native apps, but that also keeps your app up-to-date with the framework regular changes (which was part of the reasons why Airbnb stopped…


About a month ago I introduced the concept of prop-based styling with React. It’s now time to combine both the power of the widely used styled-components library and PSS syntax.

Image for post
Image for post

The following example is quite common with styled-components:

  • We’re creating a button tag
  • Some CSS properties are based on the component properties (props.primary , props.isSelected)
  • Theming using ${props => props.theme.primary}
import styled from 'styled-components';export default styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
border-radius: 3px;
${props => props.isSelected && css`
border: 2px solid;
border-color: ${props => props.theme.primary}; …


One of the biggest struggle I go through when working with React is styling. Trends have changed, over and over, but I never had the feeling that libraries out there were really solving the styling problem.

Let’s give a look at the very popular css-in-js library, styled-components.

const Button = styled.a`
border-radius: 3px;
${props => props.primary && css`
background: ${theme.primary};
`}
${props => props.size === 'small' && css`
font-size: 12px;
`}
`;

Alright, let’s clean this a little:

Button {
border-radius: 3px;

::primary {
background: $primary;
}
::size {
::small {
font-size: 12px;
}
}
}

If you like the…

evening kid

I often find myself reading too many articles on the internet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store