Navigate back to the homepage

Text transform in React Native

Infinitbility
Style
May 7th, 2021 · 1 min read
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

  1. textTransform Props
  2. textTransform uppercase
  3. textTransform lowercase
  4. textTransform capitalize

textTransform Props

Change Text case progrmatical in react native Using textTransform Props.

TypeDefault
enum(none, uppercase, lowercase, capitalize)none

textTransform uppercase

Using textTransform uppercase you can make text uppercase in react native. let’s understand with example

textTransformUppercase.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={styles.text}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 40,
21 textTransform: 'uppercase',
22 }
23});
24
25export default LotsOfStyles;

Output

react native textTransform uppercase

textTransform lowercase

Using textTransform lowercase you can make text lowercase in react native. let’s understand with example

textTransformLowercase.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={styles.text}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 40,
21 textTransform: 'lowercase',
22 }
23});
24
25export default LotsOfStyles;

Output

react native textTransform lowercase

textTransform capitalize

Using textTransform capitalize (camelcase) you can make text capitalize (camelcase) in react native. let’s understand with example

textTransformCapitalize.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={styles.text}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 40,
21 textTransform: 'capitalize',
22 }
23});
24
25export default LotsOfStyles;

Output

react native textTransform capitalize

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

Text decoration line in React Native

Text decoration line in React Native

React Native Tutorial - textDecorationLine in React Native

May 6th, 2021 · 1 min read
Line height in React Native

Line height in React Native

React Native Tutorial - lineHeight in React Native

May 5th, 2021 · 1 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]