CODEWITHSUNDEEP
javascriptcssreactjsreact-nativeflexbox
merry-go-round
merry-go-round

Reputation: 4625

Can't style my checkbox as `alignSelf: 'flex-end'` or `right: 0`

I can't style my checkbox as alignSelf: 'flex-end' or right: 0.

I want to put the checkbox top and right but there is weird padding on the photo. I tried many different styles but none of them works. :(

enter image description here

This is FlatList's renderItem()

    <TouchableWithoutFeedback
       style={{flex:1}}
      onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
      <View style={{flex: 1}}>
        <Image
          key={item.id}
          source={{uri: item.outfit_img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
        <CheckBox checked={isSelected} style={{marginLeft:2, marginTop:2, position:'absolute', alignSelf: 'flex-end'}}/>
      </View>
    </TouchableWithoutFeedback>

Here is FlatList function

  render() {
    return (
      <View style={styles.root}>
        <FlatList
          data={this.props.outfits}
          extraData={this.state.selectedStyles}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          numColumns={3}
          renderHeader={this._renderHeader}/>
      </View>
    );
  }

UPDATE FIX I guess Native-Base Checkbox is terrible on styling. This is working version. Any optimization? or better option?

<TouchableWithoutFeedback
       style={{flex:1}}
      onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
      <View style={styles.rowImage}>
        <Image
          key={item.id}
          source={{uri: item.outfit_img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
        <View style={{height:32, width:32, position:'absolute', top:0, right:0, marginTop:4, paddingRight:12}}>
          <CheckBox checked={isSelected} color="#f64e59"/>
        </View>
      </View>
    </TouchableWithoutFeedback>

Upvotes: 0

Views: 588

Answers (3)

Shubhnik Singh
Shubhnik Singh

Reputation: 1329

I have created a snack here https://snack.expo.io/HJYNoAEAW , hopefully you are expecting this behaviour.

Upvotes: 1

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

Absolutely positioned children of the flex container are not flex items anymore and therefore don't obey flex alignment properties (align-* and justify-*). They do obey offset keywords (left, right, etc.), but these offsets are calculated relatively to the closest positioned ancestor (or, if there is none, to the root element). Try adding position:'relative' to your TouchableWithoutFeedback element's style attribute to make it the nearest positioned ancestor of the checkbox, so it could be positioned relatively to it.

Upvotes: 1

Ahmed Abdulrahman
Ahmed Abdulrahman

Reputation: 469

Remove position: absolute from the CheckBox instead add justify-content: space-between to the parent of the element.

Upvotes: 0

Related Questions