Flex issue in React Native

Question

Styling help needed and am so bad at "Flex". That icon shows up if a message is long. click it and message expands. need it to be displayed next to time stamp as shown below.

code:

 <View style={row}>
<View style={textContainer}>
              <Text style={title}>Hospital Authority </Text>
              { arrowClicked === true ? 
              <Textstyle={subtitle}>{alert}</Text>
              :
              <Textstyle={subtitle}>{alert}</Text>
              }
              <Text style={time}>{timestampToStr(createDate)}</Text>        
            </View>

            { alert.charAt(100) !== "" ?
           arrowClicked === true ? 
          <Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}}  />
          : 
          <Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}}  />
          : null
          }   

          </View>
</View>

css:

const styles = StyleSheet.create({
  row: { 
    flexDirection: 'row', 
    alignItems: 'flex-start',
    marginLeft: 15,
    marginRight: 15,
    paddingTop: 5,
    paddingBottom: 10
  },
  textContainer: {
    flex: 3,
    paddingLeft: 15
  },
title: {
    flex: 1,
    color: '#000000',
    fontWeight: 'bold'
  },
  subTitle: {
    flex: 1,
    color: '#000000'
  },
  time: {
    flex: 1,
    color: '#808080'
  }
})

Please need help with this styling!!!!! Struggling with this from hours !

Update:
Used common view for both and it worked. But I have some extra space that I need to remove. How can I do that???

score 2 · Accepted Answer · answered Jun 02 '20 at 11:57

First off, I noticed you have 3 closed <View/> tags and only 2 open <View> tags. Maybe it was an issue with the copy/paste you did.

I would start first by thinking about the structure of what we want to display.

Since you want to align a text and an icon together, it would make sense for them to share the same container.

<View style={row}>
  <View style={textContainer}>
    <Text style={title}>Hospital Authority </Text>
    { arrowClicked === true ? 
    <Textstyle={subtitle}>{alert}</Text>
    :
    <Textstyle={subtitle}>{alert}</Text>
    }
    <View style={timestampAndArrowContainer}>
      <Text style={time}>{timestampToStr(createDate)}</Text>
      { 
        alert.charAt(100) !== "" ?
          arrowClicked === true ? 
          <Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}}  />
          : 
          <Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}}  />
        : null
      }
    </View>
  </View>
</View>

And for your styles, you could try something like this

const styles = StyleSheet.create({
  [...] // rest of your styles
  timestampAndArrowContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  }
})

Flex issue in React Native

1 Answers1