In the previous tutorials of react native animation series, we discussed how different types of animations are created in react native. In this blog post, let’s see how to start and stop animations in react native. Sometimes, even though we define a specific time for animation we may need it to get stopped to enhance…
In the previous blog post about animation, we discussed how to create spring animation in react native, and now, let’s see how to create animations that loop over how many iterations we define. In order to create looping animations in react native, we should use Animated.loop() method. Wrap your Animations within Animated.loop() and the animations…
In react native, ImageBackground component is used to set a background image for a screen. The ImageBackground component should be the parent and all other components should be its children. Sometimes, we might need to tweak the background images to create visually beautiful screens. In this blog post, I will explain how to darken background…
This is the fourth part of the react native animation tutorial series. I have already posted about fading animations, scaling animations, and moving animations. In this blog post, let’s discuss how to add a spring animation effect in react native. By spring animation what I mean is an animating movement that follows spring animation. In…
Today, I was trying to run a new react native project with some third-party libraries installed. When I executed react-native run-android command I got the following error. Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from App.js: @babel/runtime/hepers/interopRequireDefault could not be found within the project. Following is the screenshot of the react native error. As mentioned in the…
What if you want to create animated moving objects in your react native app? Then, you are in the right place. This is the third part of the react native animation tutorial series. As we did earlier, in order to move a view over the x-axis, the y-axis, or both you have to use Animated…
This blog post is the second part of the recently started react native animation series. We already went through fade animations in react native and now let’s check out how to create scaling animations in react native. Scaling can be done in three ways: scaling through the x-axis, scaling through the y-axis, and scaling through…
When I started learning react native, I didn’t consider learning animations. I was unaware of the importance of animations in mobile app development. Only later I realized without animations my apps are just rigid. To create a visually appealing mobile app you must wisely implement animations. Animations make the user interface butter smooth or make…
We see grey colored skeleton loading in many apps including Facebook. Skeleton loading makes the users get an idea of what they are about to see when the loading ends. It makes your user interface neat and clean. So, how to add skeleton loading in react native? First of all, install react native skeleton content…
Accordions are useful to show large data neatly by hiding and expanding the data. React Native doesn’t have its own accordion component. In this blog post, let’s check how to add an accordion component in react native. In this react native example, we use Galio UI library which provides various useful components for react native….
If you have a mobile app that has link sharing capabilities then showing URLs or link previews is very helpful for the users. We see this feature in popular apps such as WhatsApp. To show URL previews in react native apps, I prefer react native link preview library. It’s a simple library and you can…
When coming to location-based maps, you can’t ignore Google Maps. In this blog post, let’s see how to integrate Google Maps in your React Native Android app. We use React Native Maps react native library to add Google Maps. Before that, we need Google developer API to implement maps in your app. Get Google Maps…