React-Native

Multiline textarea input field is required where a lengthy text needs to be entered. Some use case are About me field in profile, chat messenger box, wysiwyg editor etc. React…

In order to capitalize words in input field in React Native, we need to use autoCapitalize prop of <TextInput> component. There are various possible values of autoCapitalize – characters –…

A <TextInput> component is used to create input field in React native. There are multiple props associated with this component which defines the behavior of text input. Apart from all…

When you long press a text in mobiles, you can select that and copy it. We learned about it in our previous articles. Here we will see how to change…

If the paragraph is big and you want to show few lines only, then you need to end it will three dots … or ellipsis. This indicates that there is…

Suppose you are creating an app of a blog where you display articles on wildlife. In the text you have links targeting national geographic website. But the links are not…

There are situations when we do not want to fix the text size. Else we want it to expand or shrink according to the size of enclosing parent view. React…

Suppose we are creating a mobile application of famous quotes. Now users will want to copy those quotes and share with their friends. For that, you need to make the…

Underline text can be created using text-decoration properties of CSS like – textDecorationStyle – For type of underline like solid, dotted, dashed etc. textDecorationColor – For colorful underlines textDecorationLine –…

Just like we created the bold text, we can also convert the text into italics. All we need to do is to use fontStyle: italic css on Text component. This…

To create styling like bold in text in React native, we can use css like fontWeight: bold. Nesting of text blocks is supported in React native and we can use…

React Native provides <Switch> component which can be used as toggle button in Android and iOS apps. There are two required props – onValueChange – To run a function when…

React Native provides translucent prop in StatusBar component which when set to true, allows the app to draw under it. With this prop, the statusbar becomes transparent. We can also…

We can hide the status bar in React Native using hidden prop which can be applied on <StatusBar> component. If this prop is set to true then the status bar…

In the previous article we saw how we can set statusbar icons in white color. In this article we will see how to set them to black color. This can…

To display white text and icons in statusbar in React Native, we need to provide value light-content to barStyle prop of StatusBar component. By setting this value, the background of…

There are situations when we want our statusbar to look according to the theme of the app. It also depends on type of application. For example, a kids app needs…

React Native provides StatusBar component which has a constant currentHeight. This constant provides the status bar + notch height. It works in Android apps. You need to import the StatusBar…

In the previous article we saw how we can add title under refresh loader. In this article we will see how we can change it’s color. Since title can be…

iOS supports displaying title under pull to refresh loader. This functionality is not available in Android app. To add a title under refresh loader in React Native, we are provided…