text wrapping issue

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.

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}>
          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.

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

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).

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.