Cant center the icon of the swipe button

[webdevsyd]

I want to align the icon center horizontally, I manage to align it vertically using the textAlign: 'center' in the CustomIcon component but can't manage to center it horizontally. Tried several flexbox alignment but still no luck.

component: <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    alignContent: 'center'
  }}>
     <CustomIcon
         family={'MaterialCommunityIcons'}
         name={'calendar-remove'}
         style={{color: WHITE_COLOR, fontSize: 27, textAlign: 'center'}}
      />
</View>,

[EyalSi]

on Android, I used textAlignVertical:'center', and textAlign:'center', for text component and it worked fine. For some reason it didn't work on iOS. Had to insert the text element in a view with: alignItems:'center', and justifyContent:'center',

[7laria]

try using alignSelf='center' in your CustomIcon

[rsp8055]

By using the custom component it can easily be achieved by follows

` left: [ { component: ( <TouchableOpacity onPress={() => console.log("GOTO Profile")} style={{ flex: 1, backgroundColor: '#006633', justifyContent: 'center', alignItems: 'center' }}> <Image style={{ height: 20, width: 20 }} source={profile} /> <Text style={{ color: '#FFFFFF', fontSize: 12 }}> Profile </Text> </TouchableOpacity> ) } ],

        right: [
            {
                onPress: () => {

                    const deletingRow = this.state.activeRowKey;

                    Alert.alert(
                        'Delete',
                        'Are you sure you want to delete ?',
                        [
                            { text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
                            {
                                text: 'Yes', onPress: () => {
                                    ChattingJson.splice(this.props.index, 1);
                                    this.props.parentFlatList.refreshFlatList(deletingRow);
                                }
                            },
                        ],
                        { cancelable: true }
                    );

                },
                text: 'Delete', type: 'delete', backgroundColor: 'purple', color: 'white', disabled: {false}
            }
        ],`

[blackdynamo]

I did something similar to solutions above:

export const ActionIcon = props => {
  const {color = "#FFFFFF", name, style = {}} = props;

  return (
    <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
      <Icon style={{color, ...style}} ios={name} android={name} /> // This is a native base icon
    </View>
  );
};

Created a component which makes things a little cleaner and tidier. It can be used like this:

const actions = [
  {
    component: <ActionIcon name={"md-pricetag"} />,
    onPress: () => console.log("Do something"),
  },
];

[grofis]

set Swipeable‘s rightButtonContainerStyle={{alignItems:'center'}}

[motogod]

Base on @7laria suggestion, I try alignSelf: 'flex-start' fix the issue

example:

      <Swipeable
        rightButtons={[
          <TouchableOpacity style={[styles.rightSwipeItem, { backgroundColor: 'red' }]}>
            <Icon style={{ alignSelf: 'flex-start' }} name='home' />
          </TouchableOpacity>,
        ]}
      >
      <SomeViews />
     </Swipeable> 

[IsharaHansaka]

you can align vertical and horizontal by using Margins. <Image style={{ height: 35, width: 28, marginLeft: "auto", marginRight: "auto", marginTop: "auto", marginBottom: "auto" }} source={ require("../../../static/images/support-center/delete-icon-white.png") } />

[huunghi20061997]

I try leftbutton marginleft is 32 in Icon and marginright in rightbutton is 32 . it is worked for me