Text buttons are an essential part of any mobile application, offering a simple and effective way for users to interact with the app. React Native provides multiple ways to create buttons, and in this tutorial, we’ll explore two popular methods: using TouchableOpacity and Pressable. Prerequisites Use TouchableOpacity for Text Button The most straightforward way to…
Disabling the Pressable component can be useful in certain situations, such as when you want to prevent the user from pressing a button multiple times in quick succession, or when you want to disable a button while an action is being performed. In this blog post, let’s learn how to disable the Pressable component easily…
Buttons with transparent backgrounds can add a sleek and modern touch to your mobile application. In this blog post, let’s learn how to create a button with a transparent background in react native using the TouchableOpacity component. TouchableOpacity is a component in react native that is used to wrap a view that should respond to…
The radio button helps users to choose an option from a set of options. As you know, react native doesn’t have a dedicated radio button component. Let’s check how to add a radio button in react native. In this tutorial, I am using a third-party library named react native radio buttons group to create radio…
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…
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…
Sometimes, buttons with plain colors can be boring visually. Adding a button with multiple colors can make your button uber-cool in appearance – only if it matches your user interface and color selection. In this blog post, let’s check how to create a button with gradient colors in React Native. You might know that react…
While designing the UI of your app sometimes you may want to place your button at the bottom of the screen. In such cases, you can use the power of the flexbox so that the button would be aligned to the bottom of the screen irrespective of screen size. I have written a sample code…
TouchableOpacity is one of the most used components in React Native projects. The reason is simple, TouchableOpacity is much more flexible and highly customizable than components such as Button. As I mentioned in the title, you can either disable or enable TouchableOpacity according to your requirement. All you need to use is the disabled prop…
The Button is one of the most commonly used components in React Native. The reason is quite obvious as we want buttons literally every screen inside the app. In order to change the background color of the Button component you just need to use the prop color, as given below. Following is the complete example….
If you’re a developer building a mobile app with React Native, you may have come across a situation where you want to disable a button based on certain conditions. In this blog post, let’s learn how to disable a button in react native. The Button component comes with the disabled property and you can easily…