Nativebase: Accordion throws errors.
import React, { Component } from "react";
import { Container, Header, Content, Accordion } from "native-base";
const dataArray = [
{ title: "First Element", content: "Lorem ipsum dolor sit amet" },
{ title: "Second Element", content: "Lorem ipsum dolor sit amet" },
{ title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];
export default class AccordionExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Accordion dataArray={dataArray} expanded={0}/>
</Content>
</Container>
);
}
}
this is the code that i m running..i have copied this code from https://docs.nativebase.io/Components.html#accordion-def-headref.. when i ran this code it throws following error.
nainishmodi
All 14 comments
@nainishmodi The red screen says Unable to resolve _react-native-google-places-autocomplete_
SupriyaKalghatgi
on 25 Jun 2018
I have attached new image that image was uploaded mistakenly..sorry..
nainishmodi
on 25 Jun 2018
What is the version of NativeBase?
SupriyaKalghatgi
on 25 Jun 2018
"dependencies": {
"jest-expo": "25.0.0",
"native-base": "^2.4.5",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-search-filter": "^0.1.3",
"react-native-vector-icons": "^4.6.0"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"expo": "^25.0.0",
"jest": "23.1.0",
"lodash": "^4.17.5",
"react-native-app-auth": "^2.4.1",
"react-native-datepicker": "^1.6.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-test-renderer": "16.3.1"
},
What is the version of nativeBase installed in your node_modules?
SupriyaKalghatgi
on 25 Jun 2018
"version": "2.4.5"
nainishmodi
on 25 Jun 2018
SupriyaKalghatgi
on 25 Jun 2018
You are using wrong version of NativeBase for Accordion
SupriyaKalghatgi
on 25 Jun 2018
so i have to update native base isn't it ?
nainishmodi
on 25 Jun 2018
yes
SupriyaKalghatgi
on 25 Jun 2018
have update native base verison and now it has been solved..thanks to giving idea and one more thing how can i run my own component inside accordion ? can you share me an example or links something.. i am new to RN..
nainishmodi
on 25 Jun 2018
@nainishmodi
Sample code
import React, { Component } from "react";
import { Container, Header, Content, Accordion, Card, CardItem, Body, Text } from "native-base";
const dataArray = [
{ title: 1, content: ["Item one", "Item two", "Item three", "Item four"] },
{ title: 2, content: ["Item five", "Item six", "Item seven", "Item eight"] },
{ title: 3, content: ["Item nine", "Item ten", "Item eleven", "Item twelve"] }
];
export default class AccordionExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Accordion dataArray={dataArray} renderHeader={(title) => <Card>
<CardItem style={{ backgroundColor: "green" }}>
<Body>
<Text>
{title}
</Text>
</Body>
</CardItem>
</Card>}
renderContent={(content) => {
let cards = content.map((item, index) => {
return <Card key={index}>
<CardItem style={{ backgroundColor: "lightgreen" }}>
<Body>
<Text>
{item}
</Text>
</Body>
</CardItem>
</Card>
})
return cards
}} />
</Content>
</Container>
);
}
}
akhil-geekyants
on 25 Jun 2018
In this example, I believe for this to work you would need title.title instead of title and content.content instead of content. So it would have to be:
import React, { Component } from "react";
import { Container, Header, Content, Accordion, Card, CardItem, Body, Text } from "native-base";
const dataArray = [
{ title: 1, content: ["Item one", "Item two", "Item three", "Item four"] },
{ title: 2, content: ["Item five", "Item six", "Item seven", "Item eight"] },
{ title: 3, content: ["Item nine", "Item ten", "Item eleven", "Item twelve"] }
];
export default class AccordionExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Accordion dataArray={dataArray} renderHeader={(title) => <Card>
<CardItem style={{ backgroundColor: "green" }}>
<Body>
<Text>
{title.title}
</Text>
</Body>
</CardItem>
</Card>}
renderContent={(content) => {
let cards = content.content.map((item, index) => {
return <Card key={index}>
<CardItem style={{ backgroundColor: "lightgreen" }}>
<Body>
<Text>
{item}
</Text>
</Body>
</CardItem>
</Card>
})
return cards
}} />
</Content>
</Container>
);
}
}
shanekoss
on 2 Dec 2018
Im trying to render a component inside of accordion and throws that error
const dataArray = [
{ title: 'Mi pedido', content: <List /> },
{ title: 'Adicionales', content: <List /> },
{ title: 'Total a pagar', content: null }
]
_renderContent = item => {
if (!item.content) {
return null
}
return <Grid>{item.content}</Grid>
}
....
render() {
return (
....
<Accordion
renderContent={this._renderContent}
....
/>
...
}
any hint?
julian-linux
on 28 Feb 2019
Related issues
muthuraman007
路
3Comments
natashache
路
3Comments
eggybot
路
3Comments
Cotel
路
3Comments
nschurmann
路
3Comments
Most helpful comment
@nainishmodi
Sample code