text wrapping issue

[ivan-travelperk]

Is there any way to avoid my Text going off the screen? It seems that the Image is causing the issue, because without it the wrapping inside the subcontainer is working properly.

flex issue - Snack

import * as React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image'}}
        />
        <View style={styles.subcontainer}>
          <Text style={styles.paragraph}>
            Change code in the editor and watch it change on your phone! Save to get a shareable url.
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    flexDirection: 'row',
  },
  subcontainer: {
    flexDirection: 'column',
    flexWrap: 'wrap'
  },
  paragraph: {
    paddingLeft: 50,
  },
});

[llamaluvr]

I didn’t have a chance to try this on your snack, but 99% of the time I have this issue, it’s because I’m missing a flex: 1. I think you need to add flex: 1 to subcontainer and paragraph. This will tell those components to fill the rest of their available space (and to go no further).