How to Convert Text to Upper Case or Lower Case in React Native

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 is as given below:

const sentence = "Hello World!"; 
const toLower = sentence.toLowerCase(); 
const toUpper = sentence.toUpperCase();

In the following react native example to convert text to upper case as well as to convert text to lower case, I use two buttons. When one button is pressed, the text is converted to lowercase whereas clicking the other button converts the text into uppercase.

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

const Home = () => {
  const [text, setText] = useState('HELLO WORLD');

  const toLowerCase = () => {
    const lowerCase = text.toLowerCase();
    setText(lowerCase);
  };
  const toUpperCase = () => {
    const upperCase = text.toUpperCase();
    setText(upperCase);
  };
  return (
    <View style={styles.container}>
      <Text style={{fontSize: 20, marginBottom: 10}}>{text}</Text>
      <Button
        onPress={() => {
          toLowerCase();
        }}
        title="Lower Case"
        color="blue"
      />
      <Button
        onPress={() => {
          toUpperCase();
        }}
        title="Upper Case"
        color="blue"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

export default Home;

That’s how you convert text into lowercase or uppercase letters in react native.