How to fix number of lines and truncate text in React Native?
Akash Mittal
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…
How to create clickable url links in text in React Native – Code Example
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…
How to fit text size to parent container in React Native? Code Example
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…
How to select text for copy/paste in React Native? Code Example
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…
How to create underline text in React native? Code Example
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 –…
How to create italics text in React native? Code Example
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…
How to create bold text in React native? Code Example
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…
How to create a simple text in React Native? Code Example
In order to create text in React Native we need to use <Text> component. This is one of the most useful component and highly customizable. Text component supports various styles…
How to change toggle switch color in React Native? Code Example
In order to change the toggle switch color we need to use props like – thumbColor – To change the color of circular disc. It accepts color value. trackColor –…
How to disable the toggle switch in React Native? Code Example
In order to disable the toggle switch in React Native, we can use disabled prop of <Switch> component and set it to true. Once the switch is disabled, the user…
How to create a simple toggle switch in React native? Code Example
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…
How to create a transparent StatusBar in React Native? Code Example
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…
How to hide the status bar in React native? Code Example
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…
How to display statusbar icons & text in black color in React Native?
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…
How to display white text & icons in Statusbar in React Native?
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…
How to change Background color of StatusBar in React Native?
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…
How to get height of Status bar in Android app using React Native?
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…
How to change color of title under refresh loader in React Native?
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…
How to add a title under pull to refresh loader in React Native for iOS app?
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…
How to change background color of pull to refresh loader in React native?
Changing background color of pull to refresh loader in React Native is possible through progressBackgroundColor prop of RefreshControl component. This prop only works for Android app because the loader background…