Image for post
Image for post

Lately I’ve been working more with animations in React Native. When it comes to that, React Native has its own API. There are some limitation though, as for example gesture handling or changing width and height of an element. For that, I can recommend using the react-native-reanimated library.

The source code can be found here. Note: this example uses react-native-reanimated v2. I will explain the most difficult points I had with this example.

Libraries that I have used


Image for post
Image for post

Tinder is a dating app that shows you profiles as a card stack. You drag and swipe the card left in order to dismiss (nope) or swipe right in order to agree (like) the other person. I will describe how to implement these animations in a React Native app.

The source code can be found here.

Final Tinder Clone App

In Short

  • react-native-fast-image for better performing images
  • Render 2 images, where the front image is actively animated, and the one behind (next on the stack) static
  • PanGestureHandler for tracking drag movements
  • Change of position (dragging) of the image via translationX and translationY transform property (on active pan…


Image for post
Image for post

A scroll view is a type of component that enables you to view content that is not able to be displayed in one screen. This means you can scroll content either vertically or horizontally. Basically every website or app requires that capability.

In React Native, there are two different types of basic scroll views. The ScrollView renders all child components at once, making it good for scenarios where you don’t have a huge lists of elements.

The FlatList is another component, that renders the elements according to the data that you provide. This can lead to better performance in some cases. …


Image for post
Image for post

Third-party libraries, images and huge amount of static data can all influence your application bundle size. This can cause unexpected high loading times, which may lead to a bad first site impression. React.Lazy and React.Suspense are common techniques (as of mid 2020), to perform code splitting for bundle size reduction and speeding up page load. In this article I want to show quick you may add code splitting to your React application, highlighting the differences in performance (Lighthouse benchmark/check).

The base application

The idea is that we have a React component, that just displays some static data from a JSON file. I have chosen the programming-quotes-api in order to have some data that makes sense. This data is not being fetched at runtime, but put into a local JSON file, which means it will be bundled into the application. …


Image for post
Image for post

Some websites do different things to highlight specific text phrases. This could be text that the user should pay attention at (like a warning), or is just very important (like an item price). I was curious on how to do that.

The solution is very simple: via CSS, background image and inline span. First, you need to create the image that you want to put as a highlight behind your text. I just used Gimp and a brush tool until I was okay with the result. The image has to be exported as a scalable vector graphic (svg).

After the image is created, you could either keep it as a file or convert it to a base64 string to be used within css. Important is, that the background-image resizes by covering the element, does not repeat and is centered. …


Image for post
Image for post

As a developer, even if you don’t work with backend stuff too often, you may want to use the terminal now and then. I think that every developer should have a least knowledge of the most important unix commands. Not even can it improve your life as a developer, it can also help you learn new stuff since some tutorial depend on these commands. I work on on a Mac OS machine with zsh.

#1 The “change directory” command: cd

The cd command is one of the most important ones. It allows you to switch between directories. …


Image for post
Image for post
React Native Web Code Sharing: iOS — Web — Android

I want to share my experience and process of rendering a React Native app into a Website. The project does not use Expo and thus might lead to a different outcome. The app is open source and can be found on Github, including Github Actions, automatic deployment and Detox End-to-End tests.

Preface

As of 2020, React Native has become a very powerful and widely used way of developing mobile applications. There are many benefits over native app development, like sharing knowledge (React), having access to more developers on the market, sharing code between Android and iOS and more. Downsides may be performance (in some special cases) or debugging. However, these become better and better. …


Image for post
Image for post
Photo by Arnel Hasanovic on Unsplash

Continuous Integration (CI) is the process of regularly integrating software components, usually from multiple developers (team) into the main codebase. So with Continuous Integration, you mostly avoid code conflicts by merging all code from all developers more to a central branch many times a day. Historically, this process seem to have happened once a day/night (or less frequently.

Continuous Deployment (CD) is the process of regularly deploying your software into a production environment. In addition, this happens in a fresh and isolated environment, to have reproduciblity instead of “it works on my machine…”. …


Image for post
Image for post
Photo by Ben Lodge on Unsplash

This article shows the basic setup of a React app including the configuration on Redux state management and Redux Saga for asynchronous state side effects. In addition to that, the testing setup will be explained. Please note that you can do this exactly the same way in a React Native app!

So this article will be about:

  • Setting up a basic React app
  • Configuring Redux with your application
  • Adding Redux Saga middleware to your Redux configuration
  • Showing how to work with Redux + Saga, including queuing calls without parallelizing them (like uploading file one after another, but not simultaneously)
  • Testing your user interface…


Image for post
Image for post

Recently, I had the issue that I was confronted with JavaScript’s call and apply. Since I forgot where the difference is or why you may use it, I learned it.

Generally, both functions are a prototype of any JavaScript Function. This means, you can invoke any function-object with call and apply. With "function-object" I mean a function as an object, so without the ()).

In short, call and apply are both used to invoke functions, where apply takes function parameters (arguments) as a single array, and call as an endless list of arguments.

Example

A code example always helps to understand things. The following example shows a very simple function that takes two arguments: a and b. The function logs their sum, as well as its this context. …

About

Marius Reimer

React Native Mobile Developer

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