I am trying to create a button with a plus icon centered in the middle however if I use react-native-vector-icons then it has extra spacing underneath and if I use <Text>+</Text>
it has extra spacing above. I have tried the solutions from React Native: Perfectly align Text in circle but nothing has worked yet.
Button code:
<View>
<Pressable
style={styles.button}
onPress={() => navigation.navigate('Add Habit')}>
<Icon name="plus" size={40} color={'black'} />
</Pressable>
</View>
const styles = StyleSheet.create({
button: {
backgroundColor: '#219ebc',
width: 75,
height: 75,
borderRadius: 100,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
elevation: 3,
position: 'absolute',
bottom: 10,
right: 10,
lineHeight: 0,
},
});
2
Answers
There is a little misalignment because the icon used has a different size. You can use other icons like
FontAwesome5
,FontAwesome6
, or others from the library. If you use the same icon, you can force the icon alignment bytransform
withtranslateY
, it’s valid for the text too.You can see the full example on this Expo Snack.