React Native Paper Button icon size

user_10037335 0
Viewed 9328

Hey is there a way to set the size of my Button Icon?

<Button
  contentStyle={[accordionStyles.header__button, ]}
  icon={show === Props.value ? "chevron-up" : "chevron-down"}
  direction='rtl'
  color='black'
>
...
</Button>

But if i try to size the Button with size={40} it's not working.

react-native javascript
5 Answers

For someone who is still stuck on this issue, i found this solution which works :

<Button
          mode="outlined"
          labelStyle={{fontSize: 25}}
          onPress={() => doSomething()}
          icon="share"
          >
          <Text style={{fontSize: 16}}>My Text</Text>
        </Button>

Wrap the text in component & give it a font size while the labelStyle will increase the size for the icon only

user_74531670

You can do by adding icons as a child, still that feature is not yet developed, they have raised a PR:

 import { Button, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';

<Button
  style={buttonStyle}
  mode="contained"
  contentStyle={buttonContentStyle}
>
  <Icon name="warning" size={24} color="#fff" />
  <View style={{ width: 16, height: 1 }} />
  <Text style={buttonTextStyle}>Hello World</Text>
</Button>

hope it helps. feel free for doubts

user_113553030

Have you tried using the Button labelStyle prop?

<Button
    labelStyle={{ fontSize: 24 }}
    icon="repeat"
    mode="text"
  >
    my button
  </Button>
user_81012840

All the provided solutions are jugar that's why I am answering this

<Button 
    icon={({ size, color }) => (
        <Icon name="location" size={20} color="#000" />
    )}
    mode="outlined" 
    onPress={() => console.log('Pressed')}
    contentStyle={{flexDirection: 'row-reverse'}}
    style={{borderColor:"#000",borderWidth:2}}
>
    Details
</Button>
user_89898910

I tried this one and achieve what I wanted to hope this will help someone in the future...

  import { Button } from "react-native-paper";
import PlusIcon from "react-native-vector-icons/AntDesign";
import { View, Text, StyleSheet } from "react-native";
 <View style={styles.button}>
    <Button uppercase={false} color="#FFFFFF" style={styles.button}>
      Add New Booking
    </Button>
    <View style={{ paddingLeft: "auto", right: -75 }}>
      <PlusIcon size={32} color={"#fff"} name={"pluscircle"} />
    </View>
  </View>


 const styles = StyleSheet.create({
 
button: {
width: 208,
height: 52,
 alignItems: "center",  
justifyContent: "center",
borderRadius: 30,
backgroundColor: "#94C100",
position: "absolute",
bottom: 0,
right: 10,
  },
});
user_146540690
Related