React Native Convert Text to Upper Lower Case on Button Click

Hello guys, In our one of the previous tutorial we had learnt about converting Text component text into 3 basic format like Upper case, lower case and capitalize text using Text style textTransform Prop. You can read that tutorial HERE. Now when we convert all text to all of those formats then it is the Static way to convert them and once you define the values in code you cannot change it. But why should not make this tutorial completely dynamic using States and String methods. So let’s try it. Now what we are doing in our current tutorial is that we would make a State and use the String methods String.toUpperCase() and String.toLowerCase() to make the Text into upper case and lower case. We would also convert the Text into only Title case where its only first character will be big and other will be smaller. So in this tutorial we would learn about React Native Convert Text to Upper Lower Case on Button Click.

Contents in this project React Native Convert Text to Upper Lower Case on Button Click :-

1. Open your project’s main App.js file and import useState, View, StyleSheet, Text and Button component.

2. Creating our main export default function App() component.

3. Creating a State named as someText with State update method setSomeText. Now we would defining here our website name. We would use this text to display on screen as our main text.

4. Creating a function named as convertToUpperCase(). In this function firs we would make a Let variable and convert the State value to upper case using toUpperCase() method and store in the State using setSomeText().

5. Creating a function named as convertToLowerCase(). In this function we would again use the toLowerCase() method to convert all text to lower case and store into State.

6. Creating one more function named as convertToTitleCase(). In this function we would simply convert the First character of a String into capital format.

7. Creating return() block of code, Now here we would First make a Text component and call the State inside it. Now we would make 3 Button component and call above functions on it.

8. Creating Style.

9. Complete Source Code for App.js File :-

Screenshots :-

React Native Convert Text to Upper Lower Case on Button Click

Leave a Reply

Your email address will not be published. Required fields are marked *