Gradient text is a great way to add visual interest and depth to your mobile app. It helps to make your text stand out and draw the user’s attention. In this blog post, let’s learn how to add gradient Text in react native. For this you need two libraries- react native linear gradient and react…
Text alignment is an important aspect of app design as it affects the readability and aesthetic appeal of your app. In this blog post, let’s learn how to justify text easily in react native. In React Native, you can easily control the alignment of your text using the textAlign style property on the Text component….
Sometimes, you may want to make a text clickable in order to perform an action when it is clicked. This can be useful for creating interactive and user-friendly apps. In this blog post, let’s learn how to make the Text clickable in react native. To make text clickable, you can wrap it in either a…
Sometimes, we need to show text in some specific cases. There are already JavaScript functions such as toLowerCase and toUpperCase. But having a property for changing cases or capitalize can make your work simpler. In this react native example, I am using a text style prop named textTransform for the case conversion and capitalization of…
Sometimes, we need to show text in some specific cases. There are already JavaScript functions such as toLowerCase and toUpperCase. But having a property for changing cases or capitalize can make your work simpler. In this react native example, I am using a text style prop named textTransform for the case conversion and capitalization of…
A hyperlink is a link that is activated or diverted by clicking on a highlighted word or image. Hyperlinks are not as common in mobile applications as you see in web applications. Still, hyperlinks are important in text-based mobile apps. So, how to add hyperlinks easily in your react native app? First of all add…
Copy and paste are two basic features available in our smartphones. Hence, users expect to have this feature on every app. If you have an app that has a lot of text then you might want to implement a copy-and-paste feature in your app too. You should use the selectable prop of the Text component…
Text is one of the most important components in react native. In this blog post, let’s see how to add strikethrough text in react native. To create a strikethrough text you have to style the text with the props textDecorationLine and textDecorationStyle. Following is the example react native code snippet. Following is the complete react…
Sometimes you may need to show superscript and subscript through the react native text component. Superscript characters are small and are slightly above the normal baseline whereas subscript characters appear slightly below. You can use the lineHeight property of the Text component to show superscripts and subscripts. With lineHeight, you can place the text above…
Upper case and lower case conversions of text are used for many purposes including form filling and authentication. Converting text to upper case or lower case is pretty easy in react native. You can use the JavaScript methods toLowerCase() as well as toUpperCase() on strings. The usage case of toLowerCase and toUpperCase in react native…
In HTML, you can easily put a line break with the tag <br> but the thing is different for React Native. In React Native you have to use \n in between your text to get a line break. As react native uses JSX, you have to ensure that \n is wrapped with brace brackets, like…
The Text component in React Native appears to be simple but it has a lot of props for customization and usability. Sometimes, we want to make the Text component more stylish by having shadows with vibrant colors. In such cases, you don’t need to rely on any third-party component libraries- react native text itself has…
