I’ve already written an article about this topic around one year ago. Now it’s time to revisit it with new information. This time we’ll cover passing styles as props.

We have a Button component with a possibility to override default styling with optional props:

Let’s focus on L:35 and L:37. They include styling for button wrapper and the label. They’re arrays with default styling (styles.button / styles.label) and additional styling with optional properties. These props are at the moment defined as any.

Proper definition of Styles

Like in previous article, we will define ViewStyle, TextStyle and ImageStyle. …

Image for post
Image for post

I recently came across with an information that one can create TypeScript interface for StyleSheet in React Native.

What Shall We Do?

To get things properly rolling, we need to import ViewStyle and TextStyle:

import { StyleSheet, Text, TextStyle, View, ViewStyle } from ‘react-native’;

After this we are good to go for defining an interface:

interface Styles {
wrapper: ViewStyle;
textContent: TextStyle;

But Why?

Because interfaces are cool and they keep our code consistent. And then we have the power of TypeScript to tell us what we are doing wrong (again).

The consistency is very similar to what we’re used to do with Props and…

Image for post
Image for post

Recently, I started playing with React VR by learning the basic concepts of WebVR APIs and the beautiful concept of virtual reality as such. And soon I was sitting in a gondola in Venice with my HTC Vive. As a React Native (and React) developer it was quite easy to familiarise myself with the concept of React VR.

My initial project, “Bottlist”, which is an alcohol beverages catalogue observed through virtual world has an UI which is missing many things. …

Image for post
Image for post

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.

What is it all about Lottie?

Lottie is a library for mobile devices that offers for the team a capability of converting After Effects animations to the screen. And under the hood it’s only a single file exported as JSON with Bodymovin plugin. The end result is pure vector magic so no need to worry about screen sizes.

It’s true that animations have existed since day one. And for React Native there is native component solution as…

Samuli Hakoniemi

In a serious relationship with React Native

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