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.
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.
react-native-fast-imagefor better performing images
PanGestureHandlerfor tracking drag movements
translationYtransform property (on active pan…
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. …
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 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. …
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. …
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
cd command is one of the most important ones. It allows you to switch between directories. …
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.
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. …
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…”. …
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:
apply. Since I forgot where the difference is or why you may use it, I learned it.
Function. This means, you can invoke any function-object with
apply. With "function-object" I mean a function as an object, so without the
A code example always helps to understand things. The following example shows a very simple function that takes two arguments:
b. The function logs their sum, as well as its
this context. …