CODEWITHSUNDEEP
javascriptreact-nativeflexbox
bleepmeh
bleepmeh

Reputation: 1037

TouchableOpacity takes all available space even when width is set

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:

enter image description here

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

Upvotes: 1

Views: 11770

Answers (2)

fullStackChris
fullStackChris

Reputation: 1502

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>

Upvotes: 1

A-J-A
A-J-A

Reputation: 2474

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!

Upvotes: 6

Related Questions