Warning: Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `ob-CodePudding

this is my code which going to create a table, it is working well but every time its showing me the (Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object.) warning!! what should i do for that?

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';

export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ]
    }
  }

  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

CodePudding user response：

This is an odd one because the documentation itself for react-native-table-component uses the text-style prop in the same way you do. There is an open issue reporting the same thing which may help you? https://github.com/Gil2015/react-native-table-component/issues/145

Additionally, if you want to just suppress the warning, in your app.js you can import Logbox from react-native and add: LogBox.ignoreLogs(['Invalid prop textStyle of type array supplied to Cell']);

CodePudding user response：

react-native-table-component isn't being maintained by its original developer. Warnings like this are covered in the repo's issues section, and there are great forks that fix some errors. The link from @P.Brew led me to finding a dirty fix:

Replace line 29 in rows.js:


<Cell
  ...

  // textStyle={[cellTextStyle && cellTextStyle(item), textStyle]} // built-in, replace or edit
  textStyle={textStyle} // replace with this

  ...
/>

This fix only works if you don't plan to use cellTextStyle. There are other options in the issue for this warning if this doesn't work.