CODEWITHSUNDEEP
react-nativeflexboxreact-native-flexboxreact-flexbox-grid
fmchan
fmchan

Reputation: 760

react native grid (flex) view overlapping with list view

There are basically constructed by two parts: grid (flex view) and listview.

The elements used are from native base.

I have also use <View> but the problem is still the same.

View style={{flex: 1, flexDirection: 'row'}}>

The snippet of codes are:

      <Grid>
        <Col style={{ backgroundColor: '#635DB7', height: 80 }}>
          <Text style={styles.head}>致電</Text>
        </Col>
        <Col style={{ backgroundColor: '#00CE9F', height: 80 }}>
          <Text style={styles.head}>地圖</Text>
        </Col>
        <Col style={{ backgroundColor: '#635DB7', height: 80 }}>
          <Text style={styles.head}>分享</Text>
        </Col>
      </Grid>

      <List>
      { list.map((item, i) => (
        <ListItem icon key={i} noBorder>
          <Left style={styles.left}>
            { item.icon &&
            <Icon type={item.type} name={item.icon} style={styles.icon} />
            }
          </Left>
          <Body>
            <Text style={{ color: item.color}}>{item.title ? item.title : "N/A"}</Text>
          </Body>
        </ListItem>
        ))
      }
      </List>

attached is the overlapping problem: enter image description here

Upvotes: 0

Views: 371

Answers (1)

fmchan
fmchan

Reputation: 760

i fixed it by adding a scrollview wrapping them

Upvotes: 0

Related Questions