Text transform in React Native

Hi Devs', Welcome to infinitbility, This article help you to use textTransform in react native with their output example. React Native provide textTransform style props to make text uppercase, lowercase and capitalize (camelcase). let’s start today topic textTransform in React Native Or how to use textTransform in react native textTransform default value is none use if developer not defined textTransform for text. Table of contents textTransform Props textTransform uppercase textTransform lowercase textTransform capitalize textTransform Props Change Text case progrmatical in react native Using textTransform Props....

May 7, 2021 · 2 min · Infinitbility

Text decoration line in React Native

Hi Devs', Welcome to infinitbility, This article help you to use textDecorationLine in react native with their output example. React Native provide textDecorationLine style props to make horizontal line with yout text like underline, line through, and both. let’s start today topic textDecorationLine in React Native Or how to use textDecorationLine in react native textDecorationLine default value is none use if developer not defined textDecorationLine for text. Table of contents...

May 6, 2021 · 2 min · Infinitbility

Line height in React Native

Hi Devs', Welcome to infinitbility, This article help you to use lineHeight in react native with their output example. React Native provide lineHeight style props to make vertical space between text. let’s start today topic lineHeight in React Native Or how to use lineHeight in react native lineHeight default value is 0 use if developer not defined lineHeight for text. Table of contents lineHeight Props lineHeight 1 lineHeight 10 lineHeight 20 lineHeight Props Increase or decrease the spacing between text vertical height....

May 5, 2021 · 2 min · Infinitbility

Letter spacing in React Native

Hi Devs', Welcome to infinitbility, This article help you to use letterSpacing in react native with their output example. React Native provide letterSpacing style props to make space between text. let’s start today topic letterSpacing in React Native Or how to use letterSpacing in react native letterSpacing default value is 0 use if developer not defined letterSpacing for text. Table of contents letterSpacing Props letterSpacing 1 letterSpacing 10 letterSpacing 20 letterSpacing Props Increase or decrease the spacing between characters....

May 4, 2021 · 2 min · Infinitbility

font weight in React Native

Hi Devs', Welcome to infinitbility, This article help you to use fontWeight in react native with their output example. React Native provide fontWeight style props to make text look bolder in application. let’s start today topic font weight in React Native Or how to use fontWeight in react native fontWeight default value is normal use if developer not defined fontWeight for text. Table of contents fontWeight Props fontWeight 100 fontWeight 500 fontWeight 900 fontWeight bold fontWeight Props Specifies font weight....

May 3, 2021 · 3 min · Infinitbility

RGB in react native

Hi Devs', Welcome to infinitbility, This article help you to use rgb() in react native same like we use in web. let’s start today topic RGB in react native Or how to use rgb() in react native The rgb() function define colors using the Red-green-blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%)....

May 2, 2021 · 1 min · Infinitbility

Text align in react native

Hi Devs', Welcome to infinitbility, This article help you to understand textAlign props in react native. you wil get multiple posiable example of textAlign props to change effect in react native. Let’s start today topic Text align in react native Or how to align text in react native Table of contents textAlign Props textAlign left textAlign center textAlign right textAlign justify textAlign Props textAlign use for align text in react native like left, right, etc....

May 1, 2021 · 3 min · Infinitbility

fontStyle in react native

Hi Devs', Welcome to infinitbility, This article explain to make italic text in react native using fontStyle props. Let’s start today topic fontStyle in react native Or how do make italic text in react native React Native provide fontStyle props to make text in italic let’s understand with example. React Native italic font example italicFontStyle.js import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const LotsOfStyles = () => { return ( <View style={styles....

April 30, 2021 · 1 min · Infinitbility

React Native ScrollView

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Ever have the situation where you sometimes had content that was shorter than the screen size and didn’t require scrolling but occasionally had content taller than the screen size, thus necessitating scroll to allow the user to see all the content. React native scrollview provide feature to create scrolllable content on both direction ( vertically and horizontally )....

February 10, 2021 · 3 min · Infinitbility

React Native Textinput

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents In This Article, we learn textinput and their props with examples. Textinput or input Textinput component uses to get data to users like their personal details, email, password, etc. The below example explains to handle textinput in react native. import React, { Component } from 'react'; import { StyleSheet, View, Text, SafeAreaView, TextInput } from 'react-native'; class App extends Component { constructor(props) { super(props); this....

January 28, 2021 · 4 min · Infinitbility

React Native Text

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Text The Text component is one of the most common React Native components — we use it whenever we need to display text in our app. This component can be nested and it can inherit properties from parent to child. This can be useful in many ways. We will show you example of capitalizing the first letter, styling words or parts of the text, etc....

January 27, 2021 · 3 min · Infinitbility

React Native Flexbox

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents In this article we are going to learn the basics of styling a component in React Native using Flexbox. If you have already used Flexbox for web with CSS, the same concepts are used in React Native as well. There are some minute differences between the both. Flexbox Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout....

January 24, 2021 · 8 min · Infinitbility

React Native Styling

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Today, we learn how many ways to write CSS in react native. the CSS in react a native little bit different from actual CSS. Inline Style Internal style External Style Use multiple styles in a single component Create multiple styles constant and import Inline Style However, this is not the best practice because it can be hard to read the code....

January 17, 2021 · 4 min · Infinitbility

React Native Props

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents what is props? Props are short for Properties. The simple rule of thumb is props should not be changed. In the programming world we call it “Immutable” or in simple english “Unchangeable”. Props are Unchangeable — Immutable Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child....

January 15, 2021 · 5 min · Infinitbility

React Native State

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents today, we learn to manage to react native state. React Native manage data using state and props. props mean those data, send data to the child component from the parent component but we can discuss props in our next coming tutorial. state we are using state to store data and accessible on the whole file....

January 12, 2021 · 3 min · Infinitbility

React Native Project Structure

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Today, we setup the react native app with an example of project folder structure, React Navigation, and Axios also you guys use for the starter. Let’s discuss a structure to start new projects or when you need to scale large projects. We will use React Native as a basis for this architecture, but the concepts can be leveraged in projects using other frameworks....

January 9, 2021 · 11 min · Infinitbility

React Native Environment setup on ubuntu

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Today, we setup react native environment in ubuntu for run react native app. For setup react native environment in ubuntu you have to install some dependencies written below dependencies Install node and npm Install Android Studio Install react-native Install node and npm Node.js is an open-source cross-platform JavaScript run-time environment that allows server-side execution of JavaScript code....

January 7, 2021 · 4 min · Infinitbility

React Native Environment setup on Mac OS

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Today, we setup react native environment in macos for run react native app. Tools Homebrew Node.js and npm watchman Java JRE and JDK React Native CLI Xcode Android Studio Install Homebrew Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS operating system and Linux....

January 5, 2021 · 5 min · Infinitbility

React Native Environment Setup for windows

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents Today, we setup react native environment in windows for run react native app. Tools These are the tools we need on an development environment (Windows): Visual Studio Code (you can use any other editor or IDE) Android Studio Built-in emulator in Android Studio Node Package Manager (NPM) Node.js (Version 14 or newer) React Native command line interface (React Native CLI) Java Development Kit (JDK 8 or newer) Install Node JS for setup react native you have to download and instal node....

January 4, 2021 · 4 min · Infinitbility

React Native Environment Setup using expo

This Article Part of React Native Tutorial Series want to start from scrach follow below link https://infinitbility.com/react-native/table-of-contents when you want to quick setup follow expo cli but for large project, I recommend use react native cli. https://infinitbility.com/react-native/category/environment-setup Today, we setup expo for run react native app. Setup Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. Install Node JS for setup expo cli you have to download and instal node....

January 3, 2021 · 3 min · Infinitbility