Animations can make already good apps look and feel even better. It can improve the user experience by making actions feel more natural or living. One use case of animations are modals or pop ups, that dynamically display content on the screen. I will describe how you can create a modal in React Native, that opens and closes from/to the bottom.
In addition, the modal will have a vector-based star rating box, in order to make the user rate an item (in this case books). Also, the backdrop of the modal blurs the content behind it. This should make the modal fell more natural. Works on Android and iOS. …
When creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.
Scrolling up a list of items with an image on top, it can be a nice feature to zoom in the picture naturally. I describe how this can be easily done in React Native. In one of my current React Native apps, which is [open source] with full End-To-End and CI/CD setup, I have implemented this feature. …
A card carousel allows you to display data in a horizontal swipe view, in the form of cards. Each card has a specific snap position that the user may scroll to, instead of having a free scrolling. This should give a better experience in case the user has to choose between different categories for example. I will show how you can achieve create such a carousel view, with core React Native components.
To keep the example simple, we will fill the carousel view with cards (simple Views), that each represent a different color and a random word (lorem ipsum). Each card that is currently selected or active (in the middle of the carousel view), will have a slightly higher size than its neighbors. Also, the neighbor left and right from the active one will already be party visible. …
I’m listing and reviewing the books I’ve read in 2020 with the most important learnings for me personally.
The Snowball (Warren Buffet)
There are many libraries that provide a way to create a settings screen or list for your React Native app. I show a simple way to achieve this with basic or no dependencies.
You can find the source code here. In essence, we use the React Native SectionList for a structured or sectioned partition of the list. Alternatively, you could use a FlatList or even ScrollView if you have a small amount of items to put in your list. For imaging, you would use react-native-svg or alternatively the React Native Image. …
A transition is a change of one view state into another. The react-native-reanimated library provides a simply way to perform transitions. In combination with react-native-svg, you could create a simple icon effect, like filling a heart icon.
The source code in action can be found here.
You could achieve the same effect using basic animations, but transitions can make it more easy by triggering multiple animations at the same time or in sequence.
A click on the icon toggles the view state, as well as transition change. The transition itself consists of a combination of scaling and easing.
Originally published at https://mariusreimer.com on December 11, 2020.
The TikTok app has a pretty interesting loading animation. It has two horizontally aligned circles that seem to rotate its positions, seemingly in a circle. I wanted to create a similar behavior in React Native. The source code can be found here.
Initially, the spinner consists of two colored circles.
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
- for querying data: Open Food Facts API
- for theming and styling components: styled-components
- for icons: react-native-svg and feather-icons
- for faster and more performant image loading: react-native-fast-image
- for preventing (race condition) safe fetch…
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.
In Short
react-native-fast-imagefor better performing images- Render 2 images, where the front image is actively animated, and the one behind (next on the stack) static
PanGestureHandlerfor tracking drag movements- Change of position (dragging) of the image via
translationXandtranslationYtransform 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. …
About
