Long text pushing other elements off screen with react native

Question

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:

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

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>

Answer 1

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

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

Answer 2

You'll have to set a width on the text component you wish to truncate (even if it's 100% of it's container which is the flexbox child I imagine), and also set numberOfLines prop to 1 (or however many lines you want to allow). See docs here on ellipsize mode and number of lines.

https://facebook.github.io/react-native/docs/text.html#ellipsizemode

Code example of what I explain above:

<View style={{display: 'flex', flexDirection: 'row', overflow: 'hidden'}}>
    <View>
      <Text
        numberOfLines={1}
        style={{width: '100%'}}>Text here that I want to truncate</Text>
      <Text
        numberOfLines={1}
        style={{width:'100%'}}>Another line of text</Text>
    </View>
    <View style={{width: 120}}>
        <Text>01/01/2017</Text>
    </View>
</View>

If you're still having issues, it's possible you'll need to also use overflow: hidden in your text component style.