Sunday, August 4, 2019

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

This tutorial explains how to convert text to upper case or lower case on button click in react native application. In this example we are going use toUpperCase() and toLowerCase() Javascript function to convert upper case or lower case letter in react native application.
toUpperCase() is used to convert all the text component text to Upper Case (Capitalize).
toLowerCase() function is used to transform all text into lower case.

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


React Native Convert Text to Upper Case or Lower Case

Lets see the complete source code that helps to convert text to upper case or lower case on button click in react native application with simple example.

Complete Source Code for App.js

import React, { Component } from 'react'; 
import { StyleSheet, Text, View, Button } from 'react-native';

 
export default class App extends Component {
 
  constructor(){ 
    super(); 
    this.state={ 
      TextHolder : "Sample Text Example" 
    }
  }
 
  ConvertTextToUpperCase=()=>{ 
    var A = this.state.TextHolder ; 
    var B = A.toUpperCase() ; 
    this.setState({ TextHolder : B }) 
  }
 
  ConvertTextToLowerCase=()=>{ 
    var A = this.state.TextHolder ; 
    var B = A.toLowerCase() ; 
    this.setState({ TextHolder : B })
  }
 
 
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.TextStyle}> {this.state.TextHolder} </Text> 
        <View style={{marginTop: 10}}> 
           <Button title=" Convert Text To Upper Case" onPress={this.ConvertTextToUpperCase} /> 
        </View>
 
        <View style={{marginTop: 10}}> 
           <Button title=" Convert Text To Lower Case" onPress={this.ConvertTextToLowerCase} />      
        </View>
 
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }, 
  TextStyle:{ 
    fontSize : 25,
    textAlign : 'center',
  }
});

Screenshot :

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

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

This is all about React Native Convert Text to Upper Case or Lower Case on Button Click Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment