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.
|
1 2 3 |
import React, { useState } from 'react'; import { View, StyleSheet, Text, Button } from 'react-native'; |
2. Creating our main export default function App() component.
|
1 2 3 4 5 |
export default function App() { } |
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.
|
1 |
const [someText, setSomeText] = useState('ReactNative-Examples.com'); |
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().
|
1 2 3 4 |
const convertToUpperCase = () => { let tempText = someText.toUpperCase(); setSomeText(tempText); }; |
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.
|
1 2 3 4 |
const convertToLowerCase = () => { let tempText = someText.toLowerCase(); setSomeText(tempText); }; |
6. Creating one more function named as convertToTitleCase(). In this function we would simply convert the First character of a String into capital format.
|
1 2 3 4 5 6 7 8 9 10 11 |
const convertToTitleCase = () => { let camelCaseText = someText .split(' ') .map(function (word, index) { return word.charAt(0) .toUpperCase() + word.slice(1) .toLowerCase(); }) .join(' '); setSomeText(camelCaseText); }; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
return ( <View style={styleSheet.MainContainer}> <Text style={{ color: 'red', fontSize: 30, textAlign: 'center' }}> {someText} </Text> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Title Case" onPress={convertToTitleCase} color="#33691E" /> </View> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Upper Case" onPress={convertToUpperCase} color="#33691E" /> </View> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Lower Case" onPress={convertToLowerCase} color="#33691E" /> </View> </View> ); |
8. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, justifyContent: 'center', alignItems: 'center' } }); |
9. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import React, { useState } from 'react'; import { View, StyleSheet, Text, Button } from 'react-native'; export default function App() { const [someText, setSomeText] = useState('ReactNative-Examples.com'); const convertToUpperCase = () => { let tempText = someText.toUpperCase(); setSomeText(tempText); }; const convertToLowerCase = () => { let tempText = someText.toLowerCase(); setSomeText(tempText); }; const convertToTitleCase = () => { let camelCaseText = someText .split(' ') .map(function (word, index) { return word.charAt(0) .toUpperCase() + word.slice(1) .toLowerCase(); }) .join(' '); setSomeText(camelCaseText); }; return ( <View style={styleSheet.MainContainer}> <Text style={{ color: 'red', fontSize: 30, textAlign: 'center' }}> {someText} </Text> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Title Case" onPress={convertToTitleCase} color="#33691E" /> </View> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Upper Case" onPress={convertToUpperCase} color="#33691E" /> </View> <View style={{ marginTop: 12 }}> <Button title="Convert Text To Lower Case" onPress={convertToLowerCase} color="#33691E" /> </View> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, justifyContent: 'center', alignItems: 'center' } }); |
Screenshots :-
