Nativebase: Uppercase text in Button

[anoopmm]

I have a button with face book icon
<Button iconLeft block > <Icon name='logo-facebook' /> <Text>Login with facebook</Text> </Button>
with text "Login with facebook" But it displays "LOGIN WITH FACEBOOK" .I am tried with capitalize={false} but no hope.Is there any way?
NB version:2.2.1

[stefano-DM]

did you try uppercase={false} instead of capitalize?
-or-
try adding uppercase={false} to <Text>

[shivrajkumar]

The above solution works.

[anoopmm]

Thanks @stefano-DM :)

[isaachinman]

@stefano-DM Has the uppercase prop been removed?

[stefanoTron]

@isaachinman I haven't used Nativebase in a while, but I believe uppercase has not been removed: https://github.com/GeekyAnts/NativeBase/blob/15f7ac040d911181b666607e3d9d68fad4a2ff7f/src/basic/Text.js#L12

[Shahzaibmalik55]

just Import Text from Native Base in your App.js
import { Text } from 'native-base';

in your constructor
constructor(props) {
Text.defaultProps.uppercase = false;
}

instead of giving props to every Text it will set uppercase = false to all text

[brownieboy]

@Shahzaibmalik55's fix worked for me.

But an even easier solution is to import Text directly from React Native instead of from Native Base. The "raw" version of Text doesn't display this unwanted and unexplained (anywhere that I could find) transformation in the first place.

import { Text} from "react-native";

// ... in component
<Text>Back to Info</Text>

Displays as "Back to Info" on Android and iOS. With the Native Base version of Text, it always displayed as "BACK TO INFO" for me.

I'm not sure why I was importing Text from Native Base in the first place. I probably just copied and pasted some example code from somewhere and then carried on doing it that way.

[Shahzaibmalik55]

@brownieboy if you're not using native base in your project just import Text from react native and make default to uppercase = false
And importing Text from Nativebase give defalut styling to Text component such as font family
Import { Text } from "native-base"

// in IOS it shows uppercase and in android it shows capatilize its defalut styling in of native base

Back to Info

[brownieboy]

Thank you, @Shahzaibmalik55.

I found that I didn't have to set uppercase = false when I imported directly from "react-native".

The Text component isn't documented amongst the Nativebase Components http://docs.nativebase.io/Components.html.

[Shahzaibmalik55]

Yes @brownieboy you're right you don't have to set uppercase props if you're import from react-native

But there are many components that there is not present in the document of nativr base but you can also use Text from native-base

[Aleksandern]

theme config:
btnUppercaseAndroidText: false,

[ermankuruoglu]

just Import Text from Native Base in your App.js
import { Text } from 'native-base';

in your constructor
constructor(props) {
Text.defaultProps.uppercase = false;
}

instead of giving props to every Text it will set uppercase = false to all text

I use react-native-native-navigation library for navigation. I added this code line (Text.defaultProps.uppercase = false;) after registerScreens() function call . This also worked for me. Thank you very much.

[MortadhaFadhlaoui]

Hello everyone when i try button without title:
<Button> <Text>Hi !</Text> </Button>
i got a problem say :

The title prop of a Button must be a string.
any solution how to disable title ?