Why are text line breaks wrong?

[hristowwe]

today i tried this library and i am quite happy. I just didn't understand why the text was going to the new line like that -

Why comentssss, sss go to new line? How can i fix that?

My code so far

import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Cell, Row, Table, TableWrapper } from "react-native-table-component";

export default function App() {
  const tableHead = [
    "I wanted to add that test here componentssss",
    "Head2",
    "Head3",
    "Head4",
  ];
  const tableData = [
    ["1", "2", "3", "4"],
    ["a", "b", "c", "d"],
    ["1", "2", "3", "4"],
    ["a", "b", "c", "d"],
  ];
  const element = (data, index) => (
    <TouchableOpacity onPress={() => alert(index)}>
      <View style={styles.btn}>
        <Text style={styles.btnText}>button</Text>
      </View>
    </TouchableOpacity>
  );
  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderColor: "transparent" }}>
        <Row data={tableHead} style={styles.head} textStyle={styles.text} />
        {tableData.map((rowData, index) => (
          <TableWrapper key={index} style={styles.row}>
            {rowData.map((cellData, cellIndex) => (
              <Cell
                key={cellIndex}
                data={cellIndex === 3 ? element(cellData, index) : cellData}
                textStyle={styles.text}
              />
            ))}
          </TableWrapper>
        ))}
      </Table>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "#fff" },
  head: {
    backgroundColor: "#808B97",
  },
  text: { margin: 6, textAlign: "center" },
  row: {
    flexDirection: "row",
    backgroundColor: "#FFF1C1",
  },
  btn: { width: 58, height: 18, backgroundColor: "#78B7BB", borderRadius: 2 },
  btnText: { textAlign: "center", color: "#fff" },
});