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.
Have you tried using the Button labelStyle prop?
<Button
labelStyle={{ fontSize: 24 }}
icon="repeat"
mode="text"
>
my button
</Button>
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
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
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,
},
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.