Hello Friends 👋, Welcome to Infinitbility. When we are calling servers and any third-party API’s then we have to make sure users will not press multiple times’ buttons and that’s some people show loader and some disabled-buttons. Today, we will see how we can disable a button when anyone presses a button. Basically, we are going to create a state and we will disable it when clicking on a button plus we also condition a button if the state isDisabled is true we will disable a button....

Hello Friends 👋, Welcome to Infinitbility. Many devs searching for set current date in datepicker i.e we have decided to make tutprial on this topic. Today, we are using react-native-datepicker lib to set current date example but you are open to use any lib it will work. React native datepicker lib provide date props to get value from state and Javascript provide current date when we write new Date(). So we only store new Date() in state....

Hello Friends 👋, Welcome to Infinitbility. Sometimes, we need to create on bottom fixed button so users can press button at any level of scrolling they don’t need to go end of the screen to submit a button. So, Today we will see how we can create bottom fixed button in react native. First, we will create sample button and then we will add bottom fixed styles to make bottom fixed button....

Hello Friends 👋, Welcome to Infinitbility. Many times, we need to show components on some condition or we can also say conditional rendering then we are going to learn how we can show or hide components on a button click. Basically, we follow the below code steps to done show the component on a button click. Create components with content. Create button component. Render Content component based on state. Change state on button click....

Hello Friends 👋, Welcome to Infinitbility. React Native textinput provide placeholderTextColor props to change placeholder text color and other style will inherit props same like you do for input value for example fontSize, fontFamily, and others. Now, we are going to change textinput placeholder text color with example of code. First we will create sample Textinput component and will try to change placeholder color using placeholderTextColor. import React from "react"; import { SafeAreaView, StyleSheet, TextInput } from "react-native"; const UselessTextInput = () => { const [number, onChangeNumber] = React....

Hello Friends 👋, Welcome to Infinitbility. MUI Autocomplete Provide option to show suggestion list in below Textfield and it works like a charm but problems comes when we want to show multiple options in suggestion like Name, and email. When user select suggestion it should show only email in Textfield but it’s my expectation, it’s will show whole text available in option text. So let’s comes to solution Material UI ( MUI ) Autocomplete provide onChange event and inputValue props to handle this types of situwation....

Hello Friends 👋, Welcome to Infinitbility. Today, we are going to learn how we can get index of object based array on object property condition if condition true we should get index of match object. Javascript provide findIndex() method to get index of element in array, we can also use this method to find index of object in array. findIndex() method return -1 if condition not matched. Supppose we have array of objects like below....

Hello Friends 👋, Welcome to Infinitbility. Sometime we need get all keys of object, like validating objects details, manage object as daynamics keys and all values. In this times, we need all keys list whitch we will use to get objects values. Mostly, we need to maintain daynamic object whitch we don’t how much keys we get. Now, let’s move to solution, how we get all keys and how to use them for get values from object in javascript....

Hello Friends 👋, Welcome to Infinitbility. When we assign one object data in another new variable still they both are connected to each other using the javascript reference concept or if change anything on the object variable you will same changes in another object. For example, when we copy firstObject to secondObject and change secondObject it’s will change firstObject. let firstObject = { a: 1, b: 2}; // copy objects with references let secondObject = firstObject; console....

Hello Friends 👋, Welcome To Infinitbility! ❤️ Due to many security reasons, we want to prevent our users to take screenshots and a screen capture of our react native application. Today, we will learn and see examples of preventing screen capture in react native. To enable or disable screenshot, React native have package react-native-screen-capture-secure, this package help you to enable or disable screen capture. Installation To install the package with NPM...

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native Asyncstorage - setItem() React Native Asyncstorage - getItem() React Native Asyncstorage - removeItem() React native asyncstorage provide removeItem() method to remove stored value from asyncstorage, it will delete stored key value paired data in asyncstorage. In this tutorial, we will learn to remove stored item in asyncstorage. let start today’s tutorial How to delete item from AsyncStorage in react native? React Native asyncstorage removeItem To remove item from asyncstorage, React native asyncstorage provide removeItem() method, it will expect storage key and return status....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native Asyncstorage - setItem() React Native Asyncstorage - getItem() React Native Asyncstorage - removeItem() React native asyncstorage provide getItem() method to get stored value from asyncstorage, it will return string value and if you stored number and object then you to convert it first from string. In this tutorial, we will learn to get value from asyncstorage with example of diffrent datatypes like string, number, or object....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native Asyncstorage - setItem() React Native Asyncstorage - getItem() React Native Asyncstorage - removeItem() React native asyncstorage provide option to store details in application or user phones and use when you want. In this tutorial, we will learn to store value in asyncstorage with example of diffrent datatypes like string, number, or object. let start today’s tutorial How to store value in asyncstorage in react native?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ Here, I’m come to share my favorite syntax to use await in for loop, many folks think about how can we use await in for loop or how to write async for a loop. First, you don’t need to make for loop async, for loop are able to handle await without defining async. Now, the question comes how can we use await in for loop....

Hello Friends 👋, Welcome To Infinitbility! ❤️ For most of Crud and migration query time, we try to make the same query for insert or update like if we have the same row then update else insert a new row. SQLite also provides multiple options to write insert or update statements in a single query. Let start today’s tutorial SQLite insert or update statement example First we should go with new SQLite feature SQLite upserts...

Hello Friends 👋, Welcome To Infinitbility! ❤️ React native SQLite storage is one of the most used packages to use SQLite in react native and I have already shared an example to use sqlite with populated database. Now, in this tutorial, i will share how we can use the SQLite database without adding the .db file in the www directory. I mean How to create SQLite database at runtime in react native?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ TypeScript almost has the same syntax as javascript to check object has a key or not, in this tutorial, we will learn multiple ways to check object has a key or not in typescript. Now, we are going to learn below three ways to check object keys exist or not. hasOwnProperty() method if..else method () ? : ; ternary method Let start today’s tutorial How to check if a JSON object has a key in typescript?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ React native provides borderWidth property to make border, borderWidth plays the main role to make any border because it required CSS to make any type of border. The borderWidth decides the thickness of the border and 1 its min value. After borderWidth, come borderColor and borderRadius property which decide color and cornor round things. Above those things, react-native provides the option to decide top, bottom, left, and right specific styles....

Hello Friends 👋, Welcome To Infinitbility! ❤️ TypeScript almost has the same syntax to do sorting of objects of array-like javascript i.e .sort() but in this tutorial, we will learn to do sorting of array-based on objects and how to use .sort() in typescript. Here, we will learn to defined object structure using the interface use interface to create an array of objects use sort with static typing to sort an array Let’s start today’s tutorial How to sort an array of objects by a property value in typescript?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ React material ui ( mui ) provide awesome tooltip componant to show tooltip in web but sometime we need to add close icon, or link in tooltip now after your hardwork you are add your link or close icon in tooltip now problems come when you want to click on those things. ahem, ( clear throat ) In this tutorial, we will learn how we can make react material ui tooltip clickable....