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

Last Updated on December 13, 2020.

Upper case and lower case conversions of text are used for many purposes including form filling and authentication. Converting text to upper case or to lower case is pretty easy in react native. You can use 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 converted text to lower case, I use two buttons. When one button is pressed, the text is converted to lower case whereas clicking the other button converts the text into upper case.

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;

Leave a Reply

%d bloggers like this: