React Native text wrap bug, example project

app.tsx

import React from "react";
import { StyleSheet, View, Text } from "react-native";

const App: React.FC = () => {
  return <View style={styles.container}>
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalTitle}>Search only in the selected bundles</Text>
        </View>
      </View>
    </View>

    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalTitle}>1. Search only in the selected bundles 2. Search only in the selected bundles
            3. Search only in the selected bundles 4. Search only in the selected bundles</Text>
        </View>
      </View>
    </View>
  </View>;
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
    // width: "70%"  // Setting width doesn't matter
  },

  centeredView: {
    alignItems: "center",
    borderWidth: 1,
    marginVertical: 40
    // width: "70%"  // Setting width doesn't matter
  },

  modalView: {
    borderWidth: 1,
    borderColor: "red"
    // width: "60%"   // Setting width seems to fix the problem
  },

  modalHeader: {
    borderWidth: 1,
    borderColor: "orange",
    flexDirection: "row",
    // width: "65%"   // Setting width seems to fix the problem
  },

  modalTitle: {
    maxWidth: "70%",
    color: "#000",
    borderWidth: 1,
  }
});

package.json

{
  "name": "example project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "bundle": "cd android && ./gradlew bundleRelease",
    "build": "cd android && ./gradlew assembleRelease",
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.10",
    "react-native-safe-area-context": "4.7.4",
    "react-native-screens": "3.27.0"
  },
  "devDependencies": {
    "@babel/core": "7.23.5",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-transform-flow-strip-types": "7.23.3",
    "@babel/plugin-transform-nullish-coalescing-operator": "7.23.4",
    "@babel/plugin-transform-private-methods": "7.23.3",
    "@babel/plugin-transform-unicode-property-regex": "7.23.3",
    "@babel/preset-env": "7.23.5",
    "@babel/runtime": "7.23.5",
    "@react-native/eslint-config": "0.72.2",
    "@react-native/metro-config": "0.72.11",
    "@tsconfig/react-native": "3.0.2",
    "@types/jest": "29.5.10",
    "@types/react": "18.2.42",
    "@types/react-test-renderer": "18.0.7",
    "babel-jest": "29.7.0",
    "eslint": "8.55.0",
    "jest": "29.7.0",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "2.8.8",
    "react-native-codegen": "0.71.5",
    "react-test-renderer": "18.2.0",
    "typescript": "4.9.5"
  },
  "engines": {
    "node": ">=16"
  }
}