Long text pushing other elements off screen with react native

user_2164 0
Viewed 6229

I'm trying to build a layout in React-Native using Flexbox and I'm having trouble when the text is long. I want the layout to look like this:

Desired Layout

However, when the blue text gets long, it pushes the date off of the right side of the screen like this:

enter image description here

I'm intentionally making the text stay on 1 line. What I want is for the blue text to expand as much as possible without making the text shrink. I'm new to RN and my work with CSS is very limited so I don't have much experience doing things like this. Here is my stylesheet code:

const styles = StyleSheet.create({
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  subtitle: {
    fontSize: 20,
    color: '#656565'
  },
  dateContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

And, finally, my layout code:

<TouchableHighlight
    underlayColor='#dddddd'>
      <View style={styles.rowContainer}>
          <View  cstyle={styles.textContainer}>
            <Text numberOfLines={1} style={styles.title}>{rowData.name}</Text>
            <Text style={styles.subtitle}>{rowData.teacher}</Text>
          </View>
          <View style={styles.dateContainer}>
            <Text style={styles.subtitle}>{result}</Text>
          </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>
flexbox react-native layout css
4 Answers

Remove flex: 1 from dateContainer and add flexWrap: 'wrap' to textContainer.

textContainer: {
  flex: 1,
  flexWrap: 'wrap'
},
dateContainer: {
  justifyContent: 'center',
  alignItems: 'flex-end'
},
user_104788040

To solve your problem, remove the flex: 1 from the dateContainer and it won't go off the screen.

dateContainer: {
  //flex: 1, line removed
  justifyContent: 'center',
  alignItems: 'flex-end'
},

Add the flex: 1 to your rowContainer as follows:

rowContainer: {
   flex: 1, //Line added
   flexDirection: 'row',
   padding: 10
}
user_24972640
Related