React Native

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to implement textinput in react native, where you can get example of save value from text input and show to users screen. When we want data from users like their detail then we need text input where user can write detail. React Native provide TextInput to show input area and today we will how to use user entered data in react native, like save in state and show to user screen and others thing...

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to force re-render in your react native application, here we will see how many ways to re-render components in react native and how to force re-render in react native for example. As we know, React Native auto re-render content when any state change, any props change, or we have also an option to force update. If your issue solves using the first ( state change ), and second ( props change) method then I will recommend don’t go with forceUpdate() method....

Hello Friends 👋, Welcome To Infinitbility! ❤️ When you develop react native application, many times you will need to filter data and show filtered data to the user. now we are going to see how we can filter data in react native. As we know, React native uses javascript codebase and javascript provides a filter() function to filter array and JSON and return only those data which match your condition in filter time....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to manage textinput focus programmatically in react native, here you will get an example of how we control text input auto-selection using code, we can auto show selected or focus input or whenever we can change user focus to another textinput. Let’s start today topic How to focus textinput in react native React Native textinput provide the option to blur and focus any textinput but for use those function we have to create ref for it....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to encode your URL in react native, we know react-native javascript codebase and javascript provide two methods to encode URL encodeURI() and encodeURIComponent(). Depending on what you need to do, there are 2 JavaScript functions that will help you. The first is encodeURI(), and the second is encodeURIComponent(). Note: you might read about escape(), but that is deprecated and should not be used....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial is based on React Native base64 ( https://www.npmjs.com/package/react-native-base64 ) package where we can try to encode and decode base64 string in react native. Let’s first install the react-native-base64 package on our react-native. npm install --save react-native-base64 After installing react-native-base64 we will try to use it in our react native application. base64 encode in react native On Below example, we are imported react-native-base64 and created function to encode string in base64 using base64....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to create common functions like helpers in react native and how to use them in react native screen. Here you will get How to create functions in react native How to export those functions in react native How to import or use functions in react native Let start today’s article how to create and use the function in react-native...

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to enable multidex in your react native project, let first understand why we need to enable multidex? why we need to enable multidex? When we added many dependencies in our project, it may bump you over the 64k method limit on the Android build system. Once this limit has been reached, you will start to see the following error whilst attempting to build your Android application:...

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial help you to disable back button in react native application plus also how to do your stuff when user click on back button. Here I will share a common component example and you can use on any screen on React Native project. Here, I’m going to create a common component for handle back press or also call back feature. BackPressHandler.js import React from 'react'; import {BackHandler} from 'react-native'; export default BackPressHandler = callback => { BackHandler....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article will help you to dismiss keyboard programatically in react native, Many times we want to remove or exit keyboard on certain event like On submit, end of textinput. React Native provide Keyboard module to manage keyboard event, where you can track when keyboard open, close or also programatically close keyboard. For dismiss keyboard, React Native Keyboard module have dismiss() method, when you call Keyboard....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article will help you to the background image in react native, here you will get examples of ImageBackground react-native component, an example of overlay in react native, add Text upper then image in react native. Let’s start today article ImageBackground In React Native Introduction Well, if you come from web development there we get the style background-image attribute to full fill our requirement but in react native background-image style is not available....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article helps you how to break line of text in react native, for HTML we know <br> tag will do that but in react native. <br> tag not available then today we will see how we can break line in react native. Let start today topic how to use br tag in react native Well, React Native is not supported the <br> tag but we have another option and is \n new line 😄....

Hello Friends 👋, Welcome To Infinitbility! ❤️ To create and use an array in react native, just use square brackets [] it will create an array like the below example. const names = ["Infinit", "Bility", "Infinitbility"]; this.setState({names: names}) This article will help you to use and manage arrays in react native, here we will learn how to define and store arrays in state, how to show or render arrays data in component, how to use arrays details in react native component....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article will help you to use async await in react native, we use async-await to manage time consuming tasks using async await we have the option to wait for the first task before executing the second task. Today we will learn to create async functions and how to use await with example in-class component and functional component. Let’s start today topic how to use async await in react native ✌️...

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to disable text input in react native, here you will get answer of How to disable textinput in react native, how to make editable false textinput in react native. Let’s start today topic How to disable textinput in react native React Native TextInput provides an editable attribute to handle user-editable permission when it’s editable={false} then it will make sure the user can’t edit anything in textinput it’s the same as disabled....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to disable react-native touchable opacity, hear you will get answer of how to disable touchableopacity in react native with example. Let start today topic How to disable touchableopacity in react native React Native touchableopacity provide a disabled attribute to disable touchableopacity, you have to just pass true in the disabled attribute like the below example. Touchableopacity disabled example <TouchableOpacity disabled={true}> <Text>I'm disabled</Text> </TouchableOpacity> Well if you are using Pressable components then also you can use disabled={true} it also works the same as TouchableOpacity....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article will help to clean the cache of your react native project, hear we will see how to clear cache in android and ios. Let start today article How to clean cache in react native When we are run any react native project or build any apk or IPA it will create cache for improving our performance but sometimes we solved any issue but react-native showing errors due to cache i....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial wil help you to add comment in react native code, here you will get example of react native render comment, single line comments and multiple line comments. If you’r familiar with jsx and js then you already know it. Let start today topic How to comment in react native In React Native comments syntax depend upon where you want comments. React Native render comments example Here render comment means where you use components....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial wil help you to make text bold in react native, here you will get answer how to make tet bold in react native, manage bold text look in react native, how many options of bold text. Let’s start today topic How to bold text in react native Introduction React Native provide fontWeight style to make text look like bold. Specifies font weight....

Hello Friends 👋, Welcome To Infinitbility! ❤️ To clean cache in react native, open terminal, go to your project android folder, and run gradlew clean command it will clear react native cache. This article wil help to clean your react native project, hear we will see how to clean gradlew cache and react native builds. Let start today article How to clean gradle in react native When we are run any react native project or build any apk it will create builds folder on android app folder for improve our proformance but sometimes we solved the any issue but react native showing errors due to cache i....