Month: January 2020

How to Style a Text Component with Shadows in React Native

Last Updated on December 15, 2020. Shadows are pretty useful to create beautiful designs. In react native, we use style props such as elevation to add shadows to different components. But how to add shadows to a text component in react native. Let’s check. A text can be given shadows using three text style props …

How to Style a Text Component with Shadows in React Native Read More »

React Native Animation Tutorial Series (Part 9): How to Create Delays in between Animations in React Native

Last Updated on December 15, 2020. In the previous blog post, we went through how the multiple animations are managed using methods such as parallel() and sequence(). Now, let’s discuss how to add delays in between animations in react native. When you are composing animations with sequence() and stagger() you can use Animated.delay() method to …

React Native Animation Tutorial Series (Part 9): How to Create Delays in between Animations in React Native Read More »

React Native Animation Tutorial Series (Part 8): How to Manage Multiple Animations in React Native

Last Updated on December 15, 2020. This is the eighth part of react native animation tutorial series. In this blog post, let’s see how to manage multiple animations in react native. There are three Animated methods for this sequence(), parallel() and stagger(). The sequence() method accepts an array of multiple animations and runs them one …

React Native Animation Tutorial Series (Part 8): How to Manage Multiple Animations in React Native Read More »

React Native Animation Tutorial Series (Part 7): React Native Interpolation Example

Last Updated on December 15, 2020. React Native animation tutorials cannot be completed without learning interpolation. Interpolation helps you to create good animations by mapping input ranges to output ranges. It gives you a fine control on what output should be attained when a specific input value is fed. For example, this is how you …

React Native Animation Tutorial Series (Part 7): React Native Interpolation Example Read More »

React Native Animation Tutorial Series (Part 6): How to Create Start and Stop Animations in React Native

Last Updated on December 15, 2020. 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 …

React Native Animation Tutorial Series (Part 6): How to Create Start and Stop Animations in React Native Read More »

React Native Animation Tutorial Series (Part 5): How to Create Looping Animations in React Native

Last Updated on December 15, 2020. 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 much iterations we define. In order to create looping animations in react native, we should use Animated.loop() method. Wrap your …

React Native Animation Tutorial Series (Part 5): How to Create Looping Animations in React Native Read More »

How to Darken Background Image in React Native

Last Updated on December 15, 2020. 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 …

How to Darken Background Image in React Native Read More »

React Native Animation Tutorial Series (Part 4): How to Create Spring Animation in React Native

Last Updated on December 15, 2020. 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 spring animation effect in react native. With spring animation what I mean is an animating movement …

React Native Animation Tutorial Series (Part 4): How to Create Spring Animation in React Native Read More »

Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` React Native Error Fix

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 …

Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` React Native Error Fix Read More »