CODEWITHSUNDEEP
javascriptreactjsreact-nativeiconsnative-base
shira
shira

Reputation: 394

react native: there is way to position icon only in the 3 tab of the accordion from native-base lib?

there is way to put icon "eye" from the "react-native-vector-icons directory - MaterialIcons" i need put the "eye" icon only in the 3 position of the accordion. this accordion come from the "native-base" lib.

this is the example that i want to achieve :

enter image description here

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 AccordionHeaderContentStyleExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion
            dataArray={dataArray}
            headerStyle={{ backgroundColor: "#b7daf8" }}
            contentStyle={{ backgroundColor: "#ddecf8" }}
          />
        </Content>
      </Container>
    );
  }
}

Upvotes: 0

Views: 508

Answers (2)

Prince Sodhi
Prince Sodhi

Reputation: 2955

Here is a working example.

https://snack.expo.io/9dGIGdAsg

import React, { Component } from "react";
import { Container, Header, Content, Icon, Accordion, Text, View } 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", icon: "visibilty" }
];

export default class AccordionCustomHeaderContent extends Component {
  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: "row",
        padding: 10,
        justifyContent: "space-between",
        alignItems: "center" ,
        backgroundColor: "#A9DAD6" }}>
      <Text style={{ fontWeight: "600" }}>
          {" "}{item.title}
        </Text>
        {item.icon && (<Icon style={{ fontSize: 18 }} name="remove-circle" />)}
      </View>
    );
  }
  _renderContent(item) {
    return (
      <Text
        style={{
          backgroundColor: "#e3f1f1",
          padding: 10,
          fontStyle: "italic",
        }}
      >
        {item.content}
      </Text>
    );
  }
  render() {
    return (
      <Container>
        <Header />
        <Content padder style={{ backgroundColor: "white" }}>
          <Accordion
            dataArray={dataArray}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </Content>
      </Container>
    );
  }
}
<br/>

Upvotes: 1

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

you can customize header view with it's function "renderHeader" by passing view in it but if you want to add customize view on a particular index of header then you would have to customize it a little bit.

It's default param return following

renderHeader(item, expanded)

You would have to edited "src/basic/Accordion.js" class in library and change it like following

renderHeader(item, expanded, index)

Then you will get index of the header item of Accordin then you can customize it's view by condition like if index == 2 (item 3) then add "eye" icon

Upvotes: 0

Related Questions