React native <Text> : Unintentional "carriage return"

Question

I'm facing a strange behaviour with the <Text> component in react native :

I'm listing some accepted format for an upload ... And the Text act strangely adding a "carriage return" ...

I want this kind of line :

Only accepted format are .doc .docx .txt .rtf .pdf .jpeg   | ( --> end of screen, "normal" return to line)
.png .bmp .gif what the actual fuck                        |

And not this strange behaviour :

Only accepted format                                         |
are .doc .docx .txt .rtf .pdf .jpeg .png .bmp .gif  what the | ( --> end of screen, "normal" return to line)
actual fuck                                                  |

Please see the Expo snack demo

GitHub issue

It's happening on both Android and iOS

Answer 1

That is bizarre, and feels like a bug in the React Native Text component. I would file an issue on their github with your snack.

I played with it, and it seems like an issue with the periods. When all the periods were removed, the text wrapped normally. Strangely, with the periods still in, the text wrapped normally for font sizes 11 and down.

I made a workaround just in case it helps you get unstuck, but it's a hack and shouldn't be necessary. This doesn't seem like intended behavior.

const text = 'Only accepted formats are .doc .docx .txt .rtf .pdf .jpeg .png .bmp .gif what the actual fuck'

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        {text.split(' ').map(item =>
          <Text style={styles.explainTxt}>{`${item} `}</Text>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  textContainer: {
    flexDirection: 'row',
    flexWrap: 1,
  },
  explainTxt: {
    fontSize: 14,
  },
});