React Native Text Going Off My Screen, Refusing to Wrap. What to Do

React native text going off my screen, refusing to wrap. What to do?

The solution to that issue is flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

Depending on your set up, you may also also need to add flexShrink: 1 to the <View>'s parent as well, to get this to work, so play with that and you'll make it.

The solution was discovered by Adam Pietrasiak in this thread.

text in flatlist going off screen react native

It might be worth setting flex:1 from parent down to the child where the content is going off screen. I've had issues where I've forgotten to do it and it's been messed up.

Essentially you could add flex:1 to every style in ChatPreview to try it out, It won't look super nice probably but you should see if the issue is fixed I believe and tweak it from there.

Text is not wrapping and is getting of the screen react native

I reproduced your case and I manage to do the correct wrapping by putting a flex: 1 property on your Long text :

<View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
    <Text style={{color: "red"}}>{item.title}</Text>
    <Text style={{flex: 1}}>{item.value}</Text>
</View>

Tell me if it works for you !

React Native Flex-Wrap either won't wrap or squishes text to side of screen

I think because you're specifying a width for the image, it's messing up the flex on textWrapper. One solution is to get the screen width and subtract the image width, then use this as the width of textWrapper:

import { Dimensions } from 'react-native';

const imageWidth = 50;

const styles = StyleSheet.create({
  movieCell: {
    flexDirection: 'row',
    width: '100%'
  },
  cellText: {
    // flexWrap: 'wrap' // you can remove this
  },
  textWrapper: {
    // flexDirection: 'row', // and this
    width: Dimensions.get('screen').width - imageWidth // <-- add this
  },
  movieImage: {
    width: imageWidth,
    height: imageWidth
  }
});

You don't need flexWrap on text. It will wrap by default :)

Why my text don't wrap when I'm trying to decrease my size of div in react

You can use word-wrap: break-word; and white-space: normal; on user-comment to fix it

.fandom .topic-comments .list {
  width: 500px;
  height: 500px;
  overflow: auto;
  background: linear-gradient(46deg, black, gray);
}

.fandom .topic-comments .list .user {
  width: auto;
  height: 50px;
  padding: 10px;
  background: black;
  color: rgb(201, 198, 52);
  border-bottom: 2px solid rgb(235, 231, 23);
}

.fandom .topic-comments .list .user .user-comment {
  word-wrap: break-word;
  white-space: normal;
}

<div class="fandom">
  <div class="topic-comments">
    <div class="list">
      <div class='user'>
        <div class="user-uid">
          <h6>1231BASDADA123</h6>
        </div>
        <div class="user-comment">
          <h5>
            BoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBoboBobo
          </h5>
        </div>
      </div>
    </div>
  </div>
</div>

<View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    justifyContent: "space-between",
    flexDirection: "row",
    flex: 1,
  }}
>
  <View style={{flex: 1}}>
    <Text numberOfLines={1} style={{fontSize: 16}}>
      {item.message}
    </Text>
  </View>
  <View style={{marginRight: 20, width: 50, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>