Cant change height/width of textContainer and keep it centered

[BoKKeR]

If I change the height/width of the textContainerStyle the textContainer won't be centered anymore as the textContainerStyle only applies to the inner container not the outer one. There should be a custom prop for this just like we have offsetX offsetY etc.

[tannguyen05]

same problem :(

[Skullcan]

Try seting the textStyle of the ActionButton.Item to: textAlignVertical: 'center'.

It's working for me.

[HappyCodingLover]

@Skullcan can you share the whole source code of this part? Thanks in advance

[Skullcan]

Sure, I have mine styled like this.

The ActionButton Item

<ActionButton.Item
   key={acao.id}
   size={acao.size}
   spaceBetween={12}
   textContainerStyle={styles.containerTitulos}
   textStyle={styles.textTitulos}
   buttonColor={acao.color}
   title={acao.title}
   onPress={() => handleOptionFabPress(acao.id)}
>
   <Icon name={acao.icon} type={acao.iconType} style={styles.actionButtonItemIcon} />
</ActionButton.Item>

The styles I used

const styles = StyleSheet.create({
  containerTitulos: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 40,
    marginTop: -8,
    minWidth: 200
  },
  textTitulos: {
    textAlign: 'left',
    textAlignVertical: 'center',
    fontWeight: '600',
    fontFamily: FONT_FAMILY_SEMI_BOLD,
    marginTop: Platform.OS === 'ios' ? 8 : 0,
    color: '#203E78'
  },
  actionButtonItemIcon: {
    color: '#fff'
  }
});

@Skullcan can you share the whole source code of this part? Thanks in advance