I have followed this post-React Native flex-box align icon and text to make a button with a title as below:

<View style={styles.sectionHeaderContainer}>

  <Text style={styles.heading}>Work</Text>

  <TouchableOpacity
  style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
  onPress={() => {
    this.setState(previousState => {
      Alert.alert('You tapped the button!')
    });
  }}>
    <Image source={addIcon}/>
    <Text style={styles.tertirayTitleDark}>Add Work</Text> 
  </TouchableOpacity>

</View>

the stylesheet is as below:

  sectionHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    paddingHorizontal: "6%", 
    paddingTop: "12%",
  },
  heading: {
    fontSize: TITLE,
    fontWeight: 'bold',
    color: THEME_COLOR,
    backgroundColor:'transparent',
  },
  tertirayTitleDark: {
    fontSize: CONTENT_LARGE,
    fontWeight: 'bold',
    color: COLOR_DARK_PRIMARY,
  },

However the button is taking all available horizontal space left by the title:

I have tried many different settings but still can't figure out what I'm doing wrong here.

I have followed this post-React Native flex-box align icon and text to make a button with a title as below:

<View style={styles.sectionHeaderContainer}>

  <Text style={styles.heading}>Work</Text>

  <TouchableOpacity
  style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
  onPress={() => {
    this.setState(previousState => {
      Alert.alert('You tapped the button!')
    });
  }}>
    <Image source={addIcon}/>
    <Text style={styles.tertirayTitleDark}>Add Work</Text> 
  </TouchableOpacity>

</View>

the stylesheet is as below:

  sectionHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    paddingHorizontal: "6%", 
    paddingTop: "12%",
  },
  heading: {
    fontSize: TITLE,
    fontWeight: 'bold',
    color: THEME_COLOR,
    backgroundColor:'transparent',
  },
  tertirayTitleDark: {
    fontSize: CONTENT_LARGE,
    fontWeight: 'bold',
    color: COLOR_DARK_PRIMARY,
  },

However the button is taking all available horizontal space left by the title:

I have tried many different settings but still can't figure out what I'm doing wrong here.

• javascript
• react-native
• flexbox

2 Answers 2

Just remove flex:1. When you add flex:1 to the styles of the touchableOpacity you are exactly telling it to take all the available space and act just like the provided image. Hope this helps!

The accepted answer for me didn't work. Instead, I had to wrap the entire TouchableOpacity with a View with a given width, i.e.:

<View style={{width: yourDesiredWidth}}>
    <TouchableOpacity>
        // ...
    </TouchableOpacity>
</View>