React Native Convert Text to Upper Case Lower Case on Button Click

The string function .toUpperCase() is used to convert all the text component text to Upper Case (Capitalize) and the .toLowerCase() function is used to transform all text into lower case. So in this tutorial we would going to create a react native app with some sample default text and Convert Text to Upper Case Lower Case on Button Click event.

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

1. Import StyleSheet, Text, View and Button component in your project.

2. Create constructor() in your class . Now we would create a State named as TextHolder. This state is used to show Text component inside text.

3. Create a function named as ConvertTextToUpperCase() . Inside this function we would store the TextHolder state value in a Var A. Now we would convert the Var A text into Upper Case using .toUpperCase() function and after converting we would again store the upper case text into TextHolder State using setState() method.

4. Create another function named as ConvertTextToLowerCase(). Now we would perform the same procedure performed in Step 3 using .toLowerCase() function. This would convert all the text into Lower Case.

5. Create Root View in render’s return block with 1 Text component and 2 Buttons. Now we would set Text component text using State and Call the both function on Button onPress event.

6. Create Style for Root View and Text component.

7. Complete source code for App.js File :

Screenshots in Android device :

Upper CaseScreenshot in iOS device :

Leave a Reply

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