The text of button at react native is always uppercase

Question

I created a component at react-native, but the text of the button is always at uppercase, someone knows why it doesn't take the text that pass, because I want to show 'Login', but it shows 'LOGIN'

import React, { Component } from 'react';
import { View, Button} from 'react-native';
import LabelApp from "../../config/labels.app";

const labelApp = LabelApp.loginView;

export default class Login extends Component {

  constructor(props){
    super(props);
    this.handleClickBtnEnter = this.makeLogin.bind(this);
  }

  makeLogin() {

  }

  render() {
    return (
     <View>
       <Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/>
     </View>
    );
  }
}

Label of component

const LabelApp = {
    loginView: {
        textButtonLogin: 'Ingresar',
    },
}
export default LabelApp;

The visualization

i'm facing the same issue and trying to figure out why react native is not displaying the text as is. why in case of Android the button title is all in uppercase. — A. Abdelmonsef, Feb 27 '20 at 06:21

score 9 · Answer 1 · answered Jan 22 '21 at 15:19

9

For react Native Paper button use uppercase={false} prop:

<Button
      mode="outlined"
      uppercase={false}
      accessibilityLabel="label for screen readers"
      style={styles.yourButtonStyle}>Button label</Button>

answered Jan 22 '21 at 15:19

Yoyis

91
1
1

score 4 · Answer 2 · answered May 11 '20 at 14:28

So, the other two answers are correct that you should use TouchableOpacity, but as someone new to React Native, it took me awhile to understand what was going on here. Hopefully this explanation provides a little more context.

The built-in Button component seems to have some weird compatibility/visibility issues on occasion, one of which is rendering the title prop text all uppercase. When viewing the documentation for the Button component in Chrome, the preview shows all text being capitalized under the "Web" view but not Android or iOS (I was having this issue using Expo and Metro Bundler on an Android device, so not sure what to make of this). I couldn't find anything about capitalization/uppercase in the Button docs, so perhaps this is a bug.

The solution is to use a different component called TouchableOpacity. It also has an onPress event you can use and a built-in touch animation, but it has less out of the box styling than the Button component. Important to note from docs: "Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout." It doesn't have a title prop, so you just put the button text in a Text component, like so:

<Button 
  title='text will be capitalized' 
  onPress={onPress}
/>

becomes

<TouchableOpacity onPress={onPress}>
  <Text>text will stay lowercase</Text>
</TouchableOpacity>

I was having the same issue as OP, and this solved it for me.

Drew Reese · Answer 3 · 2020-01-06T00:40:58.007

From the official documentation

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

The recommend use of touchable opacity or touchable native feedback

https://facebook.github.io/react-native/docs/touchableopacity

Below I've added textTransform: 'lowercase', as a style rule for the button to override any inherited text casing.

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

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  onPress = () => {
    this.setState({
      count: this.state.count+1
    })
  }

 render() {
   return (
     <View style={styles.container}>
       <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
       <View style={[styles.countContainer]}>
         <Text style={[styles.countText]}>
            { this.state.count !== 0 ? this.state.count: null}
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    textTransform: 'lowercase', // Notice this updates the default style
  },
  countContainer: {
    alignItems: 'center',
    padding: 10
  },
  countText: {
    color: '#FF00FF'
  }
})

https://snack.expo.io/Bko_W_gx8

Thanks, i am going to use TouchableOpacity – Alejandro Gonzalez Jan 06 '20 at 00:40 — Alejandro Gonzalez, Jan 06 '20 at 00:40

score 2 · Answer 4 · edited Jul 30 '23 at 11:36

This question is 3 years old and I'm not sure why no one has answered it correctly until now.

Native android buttons are all caps by default starting from android lollipop, which is what react native uses when you use the control Button from react-native in your app. To override the functionality, you just need to add this line in your styles.xml file inside your app theme (not the splash screen style)

<item name="android:textAllCaps">false</item>

You can get more details here: https://stackoverflow.com/a/30464346/11104068

The changes are not going to apply instantly obviously since the change is in the native xml file and not in a JavaScript file. So you will need to do a npm/yarn run android.

Hurobaki · Answer 5 · 2020-01-06T00:34:42.883

I've tried your code and it looks like it's the expected behaviour with Button component from react-native

You can see this at the official documentation

I believe that you need to change Button component, take it from another package to meet your needs.

As an alternative you can create your own button

import React, { Component } from 'react';
import { View, Button, TouchableHighlight, StyleSheet } from 'react-native';
import LabelApp from "../../config/labels.app";

const labelApp = LabelApp.loginView;

export default class Login extends Component {

  constructor(props){
    super(props);
    this.handleClickBtnEnter = this.makeLogin.bind(this);
  }

  makeLogin() {

  }

  render() {
    return (
     <View>
       <TouchableHighlight onPress={this.handleClickBtnEnter} underlayColor="white">
         <View style={styles.button}>
           <Text style={styles.buttonText}>{labelApp.textButtonLogin}</Text>
         </View>
       </TouchableHighlight>
     </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

are you sure?, it is not possible to change the text when i use button — Alejandro Gonzalez, Jan 06 '20 at 00:30
I've edited my answer to provide you a workaround, tell me if it works for you — Hurobaki, Jan 06 '20 at 00:37
Thanks, i understood why i need to change the element. it was useful — Alejandro Gonzalez, Jan 06 '20 at 00:39

Rutuja Kherde · Answer 6 · 2021-07-12T06:19:00.820

-1

            <Button
                style={{
                  borderRadius: 10,
                  backgroundColor: "#000",
                  width: 200,
                  height: 50,
                }}
              >
                <Text
                 uppercase={false} 
                >
                  Login
                </Text>
              </Button>

edited Jul 12 '21 at 06:19

answered Jan 29 '21 at 08:10

Rutuja Kherde

44
3

You described it right , but gave wrong code sample , textTransform :'none' , on all buttons shout remove all capitalise styles . – Furquan Jul 05 '21 at 18:11

The text of button at react native is always uppercase

6 Answers6