NativeBase: Accordion throws TypeError: _this6.state.selected.indexOf is not a function

When I AccordionExample in the doc: https://docs.nativebase.io/Components.html#accordion-def-headref

to a new React Native project created with npx react-native init AwesomeProject: https://reactnative.dev/docs/environment-setup

there’s error like below when running with iOS 14.4 (I haven’t tried Android).

package.json:

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "native-base": "^2.15.2",
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[Thu Feb 04 2021 02:08:53.572]  LOG      Running "AwesomeProject" with {"rootTag":41,"initialProps":{}}
[Thu Feb 04 2021 02:08:53.572]  WARN     VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. 
VirtualizedList@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:61536:22
FlatList@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:61010:36
Accordion@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:118645:22
RCTScrollContentView
RCTScrollView
ScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:63624:36
ScrollView
KeyboardAwareScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:147645:38
RCTSafeAreaView
SafeAreaView
Content@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:113373:22
Styled(Content)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:119044:40
RCTView
Container@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:113084:22
Styled(Container)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:119044:40
AccordionExample@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:99529:36
RCTScrollContentView
RCTScrollView
ScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:63624:36
ScrollView
RCTSafeAreaView
SafeAreaView
App
RCTView
RCTView
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:67437:22
[Thu Feb 04 2021 02:08:53.573]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AE.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AE.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AE.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:08:53.573]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AE.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AE.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AE.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:08:53.575]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AE.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AE.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AE.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:08:53.575]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AE.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AE.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AE.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
error: Error: Unable to resolve module `./AE` from `App.js`: 

None of these files exist:
  * AE(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * AE/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Volumes/D80/tmp/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
[Thu Feb 04 2021 02:09:11.312]  ERROR    [Error: undefined Unable to resolve module `./AE` from `App.js`: 

None of these files exist:
  * AE(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * AE/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)]
[Thu Feb 04 2021 02:09:18.302]  BUNDLE  ./index.js 

[Thu Feb 04 2021 02:09:18.818]  LOG      Running "AwesomeProject" with {"rootTag":61,"initialProps":{}}
[Thu Feb 04 2021 02:09:18.819]  WARN     VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. 
VirtualizedList@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:61536:22
FlatList@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:61010:36
Accordion@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:118552:22
RCTScrollContentView
RCTScrollView
ScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:63624:36
ScrollView
KeyboardAwareScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:147552:38
RCTSafeAreaView
SafeAreaView
Content@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:113280:22
Styled(Content)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:118951:40
RCTView
Container@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:112991:22
Styled(Container)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:118951:40
AccordionExample@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:153589:36
RCTScrollContentView
RCTScrollView
ScrollView@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:63624:36
ScrollView
RCTSafeAreaView
SafeAreaView
App
RCTView
RCTView
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:67437:22
[Thu Feb 04 2021 02:09:18.819]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AccordionExample.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AccordionExample.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AccordionExample.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:09:18.820]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AccordionExample.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AccordionExample.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AccordionExample.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:09:18.820]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AccordionExample.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AccordionExample.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AccordionExample.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
[Thu Feb 04 2021 02:09:18.820]  ERROR    TypeError: _this6.state.selected.indexOf is not a function. (In '_this6.state.selected.indexOf(index)', '_this6.state.selected.indexOf' is undefined)

This error is located at:
    in CellRenderer (at VirtualizedList.js:900)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at VirtualizedList.js:1329)
    in VirtualizedList (at FlatList.js:624)
    in FlatList (at Accordion.js:220)
    in Accordion (at AccordionExample.js:14)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at AccordionExample.js:13)
    in RCTView (at View.js:34)
    in View (at Container.js:12)
    in Container (at connectStyle.js:392)
    in Styled(Container) (at AccordionExample.js:11)
    in AccordionExample (at App.js:41)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at App.js:35)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at App.js:33)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15

Most upvoted comments

I’m using version 2.15.2 and I solved this issue with:

  • if I need to keep an item expanded:
<Accordion
       dataArray={myDataArray}
      ....
       expanded={[0]} // need to pass index in array
/>
  • if I don’t need expanded:
<Accordion
        dataArray={myDataArray}
        ....
        expanded={[]} // empty array
/>
+119
rdgoutiyama on Feb 11, 2021

@ngocdaothanh hey there, im having this issue in react native when run android, I solved this issue with

  1. check your version native base in package.json ==> example 2.13.0
  2. uninstall native base
  3. Install native base with same version ==> example 2.13.0
  4. npm start reset cache when start running project
+4
alfatayah on Feb 5, 2021

I’m using version 2.15.2 and I solved this issue with:

  • if I need to keep an item expanded:
<Accordion
       dataArray={myDataArray}
      ....
       expanded={[0]} // need to pass index in array
/>
  • if I don’t need expanded:
<Accordion
        dataArray={myDataArray}
        ....
        expanded={[]} // empty array
/>

You saved my life 😄

+1
kmnsdotin on May 3, 2021

Same error + VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Even with @rdgoutiyama fix my accordion does not show titles as seen in the following image: image

+1
dvelaren on Mar 30, 2021
Read more comments on GitHub
← NativeBase: WARN "We can not support a function callback..."
NativeBase: ActionSheet is not usable as a native method argument in RN 0.58.0 →