Warning: Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `object`.

[khalidMhd]

Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object. Cell in Row (created by App) in RCTView (created by View) in View (created by Table) in Table (created by App) in RCTView (created by View) in View (created by App) in App (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer

[gbuilt]

Inside Rows.js line 29:

// textStyle={[cellTextStyle && cellTextStyle(item), textStyle]}   // This throws browser Warning: Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `object`.
textStyle={cellTextStyle && cellTextStyle(item), textStyle}.  // This seems to resolve the error without adverse effects. But I didn't quite follow what cellTextStyle() as a function is doing. Needs more research.

UPDATE:

After a little more research, I don't think the above will work when there is a cellTextStyle passed in. But this below will work properly:

if (!!cellTextStyle) {
      textStyle = {...cellTextStyle(item), ...textStyle};
}

That properly extends the object. (But it makes we question which should go first to override the other...?) And then, in the <Cell ... tag we pass that as itself as an object, not an array:

// textStyle={[cellTextStyle && cellTextStyle(item), textStyle]}   // This throws browser Warning: Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `object`.
textStyle={textStyle} 

[Reishei]

i have a same problem as well, only on IOS but on android it works fine. Even i removed the textStyle it gives me an error warning. <Row data={HeadTable} flexArr={[2, 1, 1, 1]} style={styles.HeadStyle} textStyle={styles.TableText} /> Can someone help me. i didnt know what to do. Thanks

"react-native": "0.67.3", "react-native-table-component": "^1.2.2",

[CallumLRT]

@Moglie2817 for now you can simply update your package.json file to include @slice312's fork (I don't think we'll be able to use the tagged versions from this repo as the original creator has stopped maintaining, see README). To do this, just replace this line in your dependencies:

"dependencies": {
    ...
    "react-native-table-component": "https://github.com/slice312/react-native-table-component.git"
    ...
}

You should be able to just yarn or npm install and it'll work. Hope this helps!

[AfterFX]

@Moglie2817 for now you can simply update your package.json file to include @slice312's fork (I don't think we'll be able to use the tagged versions from this repo as the original creator has stopped maintaining, see README). To do this, just replace this line in your dependencies:

"dependencies": {
    ...
    "react-native-table-component": "https://github.com/slice312/react-native-table-component.git"
    ...
}

You should be able to just yarn or npm install and it'll work. Hope this helps!

Thank you! Works.

[arirah]

Not solved for me. Same error.

[arirah]

Ok then npm i react-native-table-component@1.2.0 this version works without showing any error in android

[baran-ozer]

this issue still exist.

[mc6ril]

I downgraded the version to react-native-table-component@1.2.0 and the error's gone.

[ElisangelaWendt]

Still happening, even in the version 1.2.0

[hvshah1974]

@Moglie2817 for now you can simply update your package.json file to include @slice312's fork (I don't think we'll be able to use the tagged versions from this repo as the original creator has stopped maintaining, see README). To do this, just replace this line in your dependencies:

"dependencies": {
    ...
    "react-native-table-component": "https://github.com/slice312/react-native-table-component.git"
    ...
}

You should be able to just yarn or npm install and it'll work. Hope this helps!

Trying this, and I get a new error when I try to run my jest tests:

Cannot find module 'utils' from 'node_modules/react-native-table-component/components/rows.js'

Looks like the import changed from:

import {sum} from "../utils";

to:

import {sum} from "utils";

which breaks the package.

I also see a PR https://github.com/slice312/react-native-table-component/pull/1 that fixes the import.

Can this PR please be merged in so this package is fixed? Thanks.

[sturmenta]

This repo is definitely abandoned, to solve this problem temporarily you can use my recent fork where only this problem is solved.

following this medium post you can simply do:

yarn remove react-native-table-component
yarn add sturmenta/react-native-table-component#e1582aaba92b7e070c31c98b116eea9c23e17f6d

and possibly react-native start --reset-cache

and resolve the warning in seconds 🎉

---

The fix was changing the code of line 29

from:

textStyle={[cellTextStyle && cellTextStyle(item), textStyle]}

to:

textStyle={{...(cellTextStyle ? cellTextStyle(item) : {}), ...textStyle}}

see this changes on the PR

---

I use this same fix in another repo not so long ago and it work well 🤷

[veffev]

@sturmenta I have the same problem, and I fix it with your fork. Thank you !!

[techiekarthick]

ERROR Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object.

I'm facing same issue at this version "react-native-table-component": "^1.2.2";

const rowTextStyle = { color: 'red' }; textStyle={rowTextStyle}

Anybody know the answer ? I'm giving object only.. why it showing again expected object ?

[sturmenta]

ERROR Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object.

I'm facing same issue at this version "react-native-table-component": "^1.2.2";

const rowTextStyle = { color: 'red' }; textStyle={rowTextStyle}

Anybody know the answer ? I'm giving object only.. why it showing again expected object ?

hello @techiekarthick, could you take a look at this comment? https://github.com/Gil2015/react-native-table-component/issues/145#issuecomment-1266366467

[dohooo]

Hey, I had rewrote it in typescript and I'll optimizing it in react-native-reanimated. react-native-reanimated-table 🌴

BTW these problems are solved.