React Native

Hello Friends 👋, Welcome To Infinitbility! ❤️ To get the current month in react native has the new Date().getMonth() method which will return every time the current month index in number datatype. we have to just call new Date().getMonth() and it will check the current date and return month index based on the date. let monthIndex = new Date().getMonth(); console.log(monthIndex); // 1 for Feb, 0 for jan So whenever we have to so month number we have to add 1 in got value from new Date()....

Hello Friends 👋, Welcome To Infinitbility! ❤️ To get the current year in react native has the new Date().getFullYear() method which will return every time the current year in number datatype. we have to just call new Date().getFullYear() and it will check the current date and return the current year based on the date. let year = new Date().getFullYear(); console.log(year); // 2022 Now, we know how to get the current year in react native and the way to hold in a variable....

Hello Friends 👋, Welcome To Infinitbility! ❤️ Every time, we got an array in an object and we have to use arrays from objects. Today, we will see how we will use an array from an object in React native. In this tutorial, we will take the example of an object in an array of objects and we will iterate every row of arrays. Let’s start Today’s tutorial How to get an array from JSON object in react native?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ To get index value of element in react native have indexOf() and findIndex() method but both have different poupose of use. Today, we will learn how to get index array elements in react native and we will see examples with an array of string and an array of objects. Let’s first understand when use indexOf() or findIndex() method. The indexOf() method is used for an array of primitive datatypes like string, number, etc or you can also say single dimension array....

Hello Friends 👋, Welcome To Infinitbility! ❤️ To get the current datetime in react native has the Date() object it will return every time the current date and time when we use it. we have to just write new Date() and it returns the date object where we get a year, month, date, hours, minutes, and seconds. let today = new Date(); console.log(today); // 2022-02-06T08:05:49.292Z Now, we know we have the current date time but we can’t show the same to also users....

Hello Friends 👋, Welcome To Infinitbility! ❤️ To know the length of an array in react native has the same syntax as javascript. we have to just use arrayVeriable.length syntax and it will return array element count. Today, we will learn how to create an array and how to check array length in react native. Let’s start with the creation Now, we are going to create an array of objects then we have to store it to state and then we will print their length on screen....

Hello Friends 👋, Welcome to Infinitbility. Today, we are going to know how to check react native and react native cli version using CMD. To check react native version, React native CLI provide react-native -v commad to show react native and react native cli version. Let’s start steps to check react native version. Steps Open your CMD and navigate to your react native project. Run react-native -v command in your project folder....

Hi Friends 👋, Welcome to Infinitbility. To check array contains value in react native, use the includes() method, it will return true or false based on array contains value or not. As a developer, we have many times needed to check values on having array values or not. Today, we will see how to check array contains a value or not in react native. Let’s see, what we are going to do...

Hello Friends 👋, Welcome to Infinitbility. React native have multiple packages to get android version like Platform and react-native-device-info. Today, we will see how we can get an android version in react native. When you want to only the android version like tutorial topic then the Platform package is best for you. Platform package provides constant and Release one of them it will return device android version. Check the following example....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native detox tutorial 1. React native detox example 2. React native detox multiple typeText crash issues 3. React native detox with react navigation example 4. react-native-date-picker detox example 5. react-native-otp-input detox example Github source repo react-native-otp-input package not provides option to test by detox using testID but i have found some hack and i’m going to share with you guys. Today, we will learn how we can test react-native-otp-input using detox in react native....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native detox tutorial 1. React native detox example 2. React native detox multiple typeText crash issues 3. React native detox with react navigation example 4. react-native-date-picker detox example 5. react-native-otp-input detox example Github source repo As I researched, I haven’t got any example of react-native-date-picker detox example that’s why I tried myself and shared it with you guys. If anyone has better the following example, please share it in the comment section....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native provides an option to create password text input using secureTextEntry props but for the eye icon, we have to write some extra code to handle it. Today, we will see how we can implement an eye icon with toggle password functionality. In this tutotial, we are using react-native-paper for textinput and react-native-vector-icons for icons. Let start today’s tutorial How to show and hide password using eye icon in react native?...

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native detox tutorial 1. React native detox example 2. React native detox multiple typeText crash issues 3. React native detox with react navigation example 4. react-native-date-picker detox example 5. react-native-otp-input detox example Github source repo When react-native navigate to another screen detox all test cases failed and now we start thinking about how to stop detox test cases execution when react-native navigate to another screen....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native detox tutorial 1. React native detox example 2. React native detox multiple typeText crash issues 3. React native detox with react navigation example 4. react-native-date-picker detox example 5. react-native-otp-input detox example Github source repo React native detox typeText works properly no matter how many times you are using it. Some developers write complex component render code like forwarding ref, dynamic rendering components, etc....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native does not provide <ol> and <ul> like tags which auto handle bullet and counts now we have to handle both <ol> and <ul> in React Native FlatList. For <ol>, we can easily show using index value but for <ul> we have to use some Unicode to handle it. As per Unicode when we use \u2B24 code to make round bullet code....

Hello Friends 👋, Welcome To Infinitbility! ❤️ React Native detox tutorial 1. React native detox example 2. React native detox multiple typeText crash issues 3. React native detox with react navigation example 4. react-native-date-picker detox example 5. react-native-otp-input detox example Github source repo Today, we will learn how to do end-to-end testing in react native and for end to end testing we wil use Detox devlop by Wix. This tutorial is part of React native detox series and in this first part, we will implement detox in react native application and write some test case examples....

Hello Friends 👋, Welcome to Infinitbility. Sometimes, we need to disable users scrolling content and you are also searching for how to enable or disable scrolling of react native flatlist then you are in right place. Today, we are going to do how to enable or disable flatlist scroll programatically. Basically, we will create a state isScrollEnabled and use in flatlist scrollEnabled props. React Native FlatList provide scrollEnabled props to handle scrolling of flatlist and we will pass our isScrollEnabled state value on it means when change isScrollEnabled true it will allow user to scroll and vice versa....

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....