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.

Type Default
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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.textContainer}>
        <Text style={styles.text}>Infinitbility</Text>
      </View>
    );
};    

const styles = StyleSheet.create({
  textContainer: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 40,
    textTransform: 'uppercase',
  }
});

export 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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.textContainer}>
        <Text style={styles.text}>Infinitbility</Text>
      </View>
    );
};    

const styles = StyleSheet.create({
  textContainer: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 40,
    textTransform: 'lowercase',
  }
});

export 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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.textContainer}>
        <Text style={styles.text}>Infinitbility</Text>
      </View>
    );
};    

const styles = StyleSheet.create({
  textContainer: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 40,
    textTransform: 'capitalize',
  }
});

export default LotsOfStyles;

Output

react native textTransform capitalize

Thanks For Reading…