Changing Button Text Color

Question

I just need a simple button in clear color with black text inside. But the base button have white text. I need something to change the text color. My curent app

<View style={styles.fastlog}>
  <Button style={styles.bouton}
    title= "Connexion avec Facebook"
    color= "#A2FFA1"/>
  <Button style={styles.bouton}
     title= "Connexion avec Google"
     color= "#A2FFA1"/>
</View>

this works, i have the green button, but i cant find for the text

Answer 1

Use Text inside Button and give color to text.

<Button
   style={styles.bouton}
   color= "#A2FFA1" 
>
 <Text style={{color: '#fff'}}>Connexion avec Facebook</Text>
</Button

Reference: https://github.com/GeekyAnts/NativeBase/issues/477

Answer 2

For this kind of situation i would suggest that you to use a third-party library or create a customButtonComponent as the Button component accessible from react-native do not have a lot of styling chances.

Note also that the prop color you are using changes the background color of the button only in Android , while it changes the text color in iOS .

Using a set of TouchableOpacify and Text you should be able to create a custom Button component stylable trough your own props and styles

Answer 3

Button in react native has limited Styling property You can use TouchableOpacity or TouchableHeighlight with Text Property Inside it, So at the end you can use Styling property of View as Touchable Component as well as Text Property as well

    <TouchableOpacity style={{...yourStytles}} >
        <Text style={{...yourTextStyles}}></Text>
    </TouchableOpacity>

Answer 4

On Android

const styles = StyleSheet.create({
  buttonSearch: {
    backgroundColor: "#F1F1F1",
    borderColor: "#D5D5D5",
    borderWidth: 1,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderRadius: 0,
  },
  buttonTitleSearch: {
    color: "#33353D",
  },
});

<Button
  navigation={this.props.navigation}
  title={
    this.state.searchPackageId
      ? "Package Id: " + this.state.searchPackageId
      : "Package Id: All"
  }
  // type="outline"
  buttonStyle={styles.buttonSearch}
  titleStyle={styles.buttonTitleSearch}
  onPress={() => {
    var navigation = this.props.navigation;
    console.log(this.state);
    navigation.navigate("PackageIdInput", {
      packageId: this.state.searchPackageId,
      updatePackageId: updatePackageId,
    });
  }}
/>

We can go to the index.d.ts to see the format of the component.

Answer 5

<Button
   style={styles.bouton}
   color= "#A2FFA1" 
   title="this is the title of your button"

>
 <Text style={{color: '#fff'}}>Connexion avec Facebook</Text>
</Button>

You need to explicitly add title ! This is if you have not solved it yet ,