React Native

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to hide vertical and horizontal scroll indicator of react native ScrollView and FlatList. Let’s start today tutorial How to hide scroll indicator in react native React Native ScrollView and FlatList default show indicator on right and bottom when use scroll view. React Native ScrollView and FlatList provide showsVerticalScrollIndicator and showsHorizontalScrollIndicator to hide or remove scroll indicator and both are true default, we have to pass as false to hidel scrollbar....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect device have notch or not in ios, android, and windows, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection device have notch or not. Let’s start today tutorial How to detect notch in react native What is notch? Notch at phone is a small cut-out, which is placed at the top part of the your screen display....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect device is emulator or not in ios, android, and windows, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection device is emulator or not. Let’s start today tutorial How to detect device is emulator in react native Introduction React Native device info provide isEmulator() function to check app running in emulator or not it will return only true or false....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect is headphone connected or not in ios and android, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection currently headphone connected or not. Let’s start today tutorial How to detect headphone in react native Introduction React Native device info provide isHeadphonesConnected() function to check headphone connected or not it will return only true or false. isHeadphonesConnected() function work in ios and android....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect is battery charging in ios, android, windows and web, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection currently battery charging or not. Let’s start today tutorial How to detect battery charging or not in react native Introduction React Native device info provide isBatteryCharging() function to check battery charging or not it will return only true or false....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect is airplane mode on in android and web, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection of airplane mode on or not. Let’s start today tutorial How to detect airplane mode in react native Introduction React Native device info provide isAirplaneMode() function to check airplane mode on or off it will return only true or false....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This article will help you to check the validation of textinput field password and confirm the password in react native, where we can put the required field, min length, and max length, and password and confirm password match validation before sending data to API. Today, We understand the logic implementation of the required field, min length, and max length, and password and confirm password match validation with a small code spiniest, and we will create a complete example of password and confirm password validation....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React native shows all logs in react native metro bundler terminal and it’s available in both ios and android but it’s not flexible to use and debug code. React native also provide remote debugger option where it show’s all messages, logs, warning, and errors. See the image below for what it looks like. Now, we are going to learn how we can start a remote debugger in an emulator or real device....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native provide platform module to check some basics detaile related to device and applicatuion like version, os, and etc. Today, we use react native platform os module to check device is a android or ios and write some code dependent upon device os. Platform.OS will return android when runing in Android device and return ios when runing in iOS device. Let see how we can get device os name using Platform....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to verify connected devices in react native it will connected devices name or emuletor name and also share status of connected devices like they are authorize or not. Before check connected devices list we will understand how to connect any android device to react native. Step 1: Developer options Most Android devices can only install and run apps downloaded from Google Play, by default....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial helps you to empty string in react native function, and render the component. here you will get an example check an empty string in functions, render components or also handle if the string contains space. To handle empty string in function we use Javascript Truthy Values ( https://developer.mozilla.org/en-US/docs/Glossary/Truthy ) syntax and for in render we use JSX syntax to handle empty string....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help to get file details like file name, file type, file created date, file last modified date, and file size in react native with example. Here we use react-native-fs package ( https://github.com/itinance/react-native-fs ) to check file details. Introduction React Native FS provide stat() function to get file details and will return Promise with file details of name, path, ctime, mtime, size, and mode....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to detect screen lock ( pin, password, pattern, and fingerprint ) set or not in device, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detection of screen lock. Introduction React Native device info provide isPinOrFingerprintSet() function to detect pin, password, pattern, and fingerprint lock set or not it will return only true or false. isPinOrFingerprintSet() function work in ios, android, and windows platform....

Hello Friends 👋, Welcome To Infinitbility! ❤️ Sometimes, we have to write diffrent code for tablet but React Native haven’t any native package to know application open in tablet or not. This tutorial will help you to detect when your react native app open in tablet, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detect android is tablet or normal phone. Introduction React Native device info provide isTablet() function to detect android is tablet or normal phone it will return only true or false....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to make your react native application rotation lock. here we will learn how lock orientation in react native for ios, and android both. React Native provide orientation handler but default it will depend upon phone ( auto rotate or not ). but when mantion your application orientation in your project every time it will open on same orientation mode, it will no longer depend on user orientation settings....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will provide complete example and guide to related Textinput keyboardType in react native, Here you will get how to set or change keyboardType in react native, How many types of keyboard available with screen shot examples. Let’s start today topic keyboard type in react native React Native TextInput component provide keyboardType props to change keyboard type view. We will pass all below input example in keyboardType props...

Hello Friends 👋, Welcome To Infinitbility! ❤️ To get data or value from object, use . ( dot ) it will help you to access property from object. for example const data = { id: 1, name: "Taj Hotel", }; console.log(data.name) // Taj Hotel This tutorial helps you to understand how to use objects and arrays to your react native code. Today we take some JSON and array data and show their data one by one in React native also take some mixed JSON and array....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial help to change structure of your json to array, many times we get unstructured data from api response then we have to do re structure data in react native. Today, we are going to learn how we can change schema of json data and also how we can convert json data to array. First start from, how we can change json key name in react native....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to make password textinput in react native, where also some basics question will be clear like how to hide password, show asterisks instead of password, and how to styles password input. For making Password TextInput react-native text input provide secureTextEntry={true} flag if it is true TextInput show asterisks instead of text or when it is false it will show text normally and its default value is false....

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will be help you to make text justify in your react native application. Here you will get textAlign justify example and if not working then alternative solution. React Native provide textAlign style to make to make text justify but it’s works in iOS, and android 8.0 ( Oreo ) or above (API level >= 26). The value will fallback to left on lower Android versions....