React-Native UpperCase, LowerCase

Here's a quick one to change string cases in react-native, just posting bcoz I struggled with it in beginning, LOL.

Let's define a state:

//class state
state={
userName : “Swair AQ”
}
//functional Component state
const [username, setUsername] = useState('Swair AQ');

I'll proceed with Functional State cause everyone knows how to operate class states.

Now let's make a helper function to convert to Uppercase and update state:

const ConvertTextToUpperCase=()=>{
const temp= username ; 
var capital_name = temp.toUpperCase() ;
setUsername(capital_name)
}

Similarly, for lowercase

const ConvertTextToLowerCase=()=>{
const temp= username ;
var small_name = temp.toLowerCase() ;
setUsername(small_name)
}

Now let's use our helper functions maybe on button click?

return (
<View style={styles.MainContainer}>
<Text style={styles.TextStyle}> {username} </Text>
<View style={{marginTop: 10}}>
<Button title="Upper Case" onPress={ConvertTextToUpperCase} />
</View>
<View style={{marginTop: 10}}>
<Button title="Lower Case" onPress={ConvertTextToLowerCase} />
</View>
</View>
);

Here we have it, these buttons will toggle name from upper to lower and vice-versa.

Now, let's see how can you convert your string case within Text element:

<Text>
{username.toUpperCase()}
</Text>

And if you're getting data from props or anywhere instead of state, ( I struggled with it in beginning IDK why -_-) :

<Text>
{(props.Name).toUpperCase()}
</Text>

Pretty easy, thou.

Everyone is clapping, so should you!

Enjoy.