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! 鉂わ笍 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鈥檚 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鈥檚 tutorial How to store value in asyncstorage in react native?...
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! 鉂わ笍 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! 鉂わ笍 This tutorial will help you to use interface or DTO in your React useState hook, Below example will work on react and react native both frameworks. Here we will learn use of interface objects and an array of interface objects in useState. Let start today鈥檚 tutorial How to use interface in React hook useState? First, take an example of an interface to use in variables....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to add icon and image in you react navigation bottom tabs, here we are using React navigation 6. Want React Navigation stack and bottom tabs combine example? https://infinitbility.com/how-to-create-stack-navigation-with-tab-navigation-in-react-navigation Let start today tutorial How to add icon in bottom tab navigation react native? BottomTabNavigator with image First, we will see how can we use in react navigation bottom tabs....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to remove back button from your react navigation header bar, here we are using react navigation version 6.x. Let start today tutorial How to remove back button in react navigation? React Navigation provides headerLeft options to show your custom Ui in header bar but you can also use for remove back button when you pass null on it....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to create bottom tab navigation with in stack navigation using react navigation in react native, here we are using react navigation version 6.x. Let start today tutorial How to create stack navigation with tab navigation in react navigation? Here full source code of tutorial https://github.com/infinitbility/react-navigation-stack-and-tab-example/tree/master Installation Now, we have to install required react navigation packages, as well as our stack and tab mavigation....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to get the first element of your array into react native, here we will use simple array concepts available in javascript to get the first element of the array. Let鈥檚 start today tutorial How to get the first element of the array in react native? let assume you have like the below example. var exampleArray = [ { id: 1, name: "Infinit" }, { id: 2, name: "Bility" } ]; Array provides the option to access elements using index....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to get ip address and ipv4address in react native, and in this tutorial we will use React native network info to get ipaddress of device. Let鈥檚 start today tutorial How to get ip address in react native? Introduction React native network info provide getIPAddress() method to get ip address of device, it will simply return data in string data type, and one more thing getIPAddress() available on both Platform android, and iOS....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 this tutorial will help you to get month name in react native, here we learn to show month name using javascript current date or using moment.js package. Let鈥檚 start today tutorial How to get current month name in react native? Show month name using months constants javascript date object provide getMonth() function to get month index number and now we will use this index in months array and show Month name based on date....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to check an array is empty or not in react native, here you will get an example of checking the empty array in function or in a render function. we can easily know array is empty or not using array length if the length is 0 it means the array hasn鈥檛 any value, it is greater than 0 it means the array has value....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial is part of React Native Firebase crashlytics Series. React Native Firebase crashlytics In android React Native Firebase crashlytics In iOS This tutorial will help you to integrate react native firebase crashlytics in ios, and solve your some common issues will get in process of setup. Let鈥檚 start today鈥檚 tutorial How to integrate firebase crashlytics in react native Step 1: Setup Project in firebase console Go To Firebase console -> Project Overview Tab...
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial is part of React Native Firebase crashlytics Series. React Native Firebase crashlytics In android React Native Firebase crashlytics In iOS After following my own tutorial , I got Execution failed for task ':react-native-firebase_crashlytics:generateDebugRFile' issue when i鈥檓 trying to run react native application, but I鈥檓 glad, after some research I found the solution on Github, and today I鈥檓 going to share it with you....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 This tutorial will help you to call two or multiple functions in react native when user press button or touchableOpecity. Here, i will share two ways to call multiple functions on onPress, use whatever you like. Let start today tutorial How to call multiple functions onPress in react native? Create Common function In this way, Create new function and call both or multiple functions from there....
Hello Friends 馃憢, Welcome To Infinitbility! 鉂わ笍 React Native AsyncStorage is one of the most popular packages for storing data as a key, value pair but sometimes we think when we save our data in AsyncStorage then AsyncStorage where a store or save those data. Today, we are going to know Where does AsyncStorage store data? And How much data can be store in AsyncStorage in react native? Let start today tutorial...
