0

In react native sign in button I am trying to put icon as horizontally left and vertically at the center and the text at the center both horizontally and vertically. With the below code as soon as I do alignSelf as 'center' on the Icon it looses its vertical position. As per the documentation alignSelf should only ovverride the property in cross-axis and not main axis. Here the icon is SVG icon.

    const GoogleSignInBtn = ({style, onPress, children}) => {
      const {buttonStyles, textStyle, iconStyle} = styles;
      return (
        <TouchableOpacity onPress={onPress} style={buttonStyles}>
         <GoogleIcon style={iconStyle} />
         <Text style={textStyle}>{children}</Text>
        </TouchableOpacity>
      );
   };

    const styles = {
      textStyle: {
      color: '#007aff',
      fontSize: 16,
      fontWeight: '600',
      paddingTop: 10,
      paddingBottom: 10,
    },
    buttonStyles: {
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 5,
      flex: 1,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#007aff',
      marginLeft: 5,
      marginRight: 5,
    },
      iconStyle: {
      height: 20,
      width: 20,
      alignSelf: 'flex-start',
    },
  [Screen Shot of output][1]};
geek_programmer
  • 63
  • 1
  • 6

1 Answers1

0

Try

const styles = StyleSheet.create({
      textStyle: {
      color: '#007aff',
      fontSize: 16,
      fontWeight: '600',
      paddingTop: 10,
      paddingBottom: 10,
      marginHorizontal: 'auto',
    },
    buttonStyles: {
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
      flex: 1,
      flexDirection: 'row',
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#007aff',
      marginLeft: 5,
      marginRight: 5,
    },
      iconStyle: {
      height: 20,
      width: 20,
      alignSelf: 'center',
    },
});

You are indeed overriding alignItems, however it seems for whatever reason your flexDirection is implicitly set to 'column', so the icon is being set to the top of the flexbox.

Changing flexDirection to 'row' allows the items to be oriented horizontally, and thus alignSelf works as desired.

Additionally, I used marginHoritonal: auto to center the text. See In CSS Flexbox, why are there no “justify-items” and “justify-self” properties? for more information on this.

William Allen
  • 83
  • 4
  • Hi Thanks, the text is stuck at left and not in the centre, with the parent container set as justifyContent: 'flex-start',alignItems: 'center', the logo will be horizontally left and vertically centred already so applying align self which is now effective on vertical direction due to flexDirection: 'row', (cross axis) wont give any difference. Please correct me if I am wrong. – geek_programmer Aug 17 '20 at 04:29
  • This is correct, `alignSelf: 'center'` will have no effect in this case, i'm not sure what's wrong with your `children`, I don't know what the object is so I used some plain text instead. [Here's my snack you can test with](https://snack.expo.io/@whalesauce/bad-strawberries) – William Allen Aug 17 '20 at 04:47
  • Hi thanks,Children is just a plain text passed as prop.children, is the code working for you? I am using vanilla react native, wondering if there is any side effects from other places – geek_programmer Aug 17 '20 at 07:57