Open hristowwe opened 2 years ago
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" }, });
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