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

Answer 1

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>

Answer 2

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.

Answer 3

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