Sometimes, we need to show text in some specific cases. There are already JavaScript functions such as toLowerCase and toUpperCase. But having a property for changing cases or capitalize can make your work simpler. In this react native example, I am using a text style prop named textTransform for the case conversion and capitalization of…
Hooks are an integral part of a functional component. The useRef hook is used to invoke methods on react native components. In this blog post, let’s check how to use useRef in react native. We have a TextInput component and a Pressable component. When we press the Pressable component, the text inside TextInput should be…
Most of the react native developers are shifting from class-based components to functional components. You can even see changes in the examples given in the official documentation of react native. Many of them are demonstrated using functional components. In this react native tutorial, I am going to show you the basics of the functional components…
When the user interface of your react native app begins to get complex you may need to place or position one view over another view to create components. In this blog post, I will show you a simple react native example where one view is put over another one. We use the style property position…
In this blog post, I will show you how to create a button with a ripple effect in react native without using any external library. We all know that ripple effects come with material design. The ripple effect helps the user to identify that his action such as a button press is registered. We use…
The Pressable is a new core component introduced in React Native version 0.63. It is basically a wrapper that detects touch interactions. It is a well-defined component and can be used instead of touchable components such as TouchableOpacity, Button, etc. The Pressable component is very easy to implement as given below. The Pressable component has…
Mapbox is considered as one of the best alternatives for Google Maps. If you are looking for a Google Maps alternative for your next react native project then you are at the right place. In this react native mapbox tutorial, I am going to create a simple project where maps are shown using mapbox with…
A slider is a very common component used in mobile apps. Sliders can be used for taking inputs easily – for example, a volume control. In this blog post, let’s check how to add a slider in your react native app. First of all, you have to get the Slider component from react native community….
A toggle button is extremely useful when the user needs to give boolean input such as Yes or No. The switch component is used to create a switch/toggle button in react native. In this blog post, let’s check how to add a switch button to your react native project. The implementation of the toggle button…
YouTube is undoubtedly a part of our social media life. Hence, sometimes we may need to play YouTube videos in our mobile app. In this react native tutorial, let’s check how to integrate a YouTube video in React Native. If you are looking to embed YouTube video then you can check my another blog post…
A timeline design can be used in a mobile app for many cases. One such case is tracking shipped items in the eCommerce mobile app. In this blog post, let’s see how to create a beautiful timeline design in React Native. We are using a third-party library react native timeline flatlist to create timeline design….
Apps such as image editing apps or social apps allow users to use their own photos. In this react native tutorial, I am going to show you a camera roll example where the images of your device are listed as a grid. CameraRoll is a react native API that gives access to the user’s photos…