Nativebase: How to change the active colors of a segment control?

[agersoncgps]

I would like to change the color of the active state text and background color of the button. Is there a built in stylesheet property that will do this? Or do I have to dynamically switch out styles when a segment becomes active?

[shivrajkumar]

@agersoncgps Either you can eject the theme modify Segment as per your requirements or you can add style rules to it. Something like this

<Segment>
                            <Button
                                style={{
                                    backgroundColor: this.state.seg === 1 ? "red" : undefined,
                                    borderColor: "red",
                                }}
                                first
                                active={this.state.seg === 1 ? true : false}
                                onPress={() => this.setState({ seg: 1 })}
                            >
                                <Text style={{ color: this.state.seg === 1 ? "#FFF" : "red" }}>Puppies</Text>
                            </Button>
                            <Button
                                last
                                style={{
                                    backgroundColor: this.state.seg === 2 ? "red" : undefined,
                                    borderColor: "red",
                                }}
                                active={this.state.seg === 2 ? true : false}
                                onPress={() => this.setState({ seg: 2 })}
                            >
                                <Text style={{ color: this.state.seg === 2 ? "#FFF" : "red" }}>Cubs</Text>
                            </Button>
                        </Segment>

[agersoncgps]

Thank you for the very helpful example.

[ZaidAbo]

i did it to set active color on click and i want to share my code

tabButton.js

import React from "react"
import { Button, Text } from "native-base"
import { palette } from "../../theme/palette" // my custom color file == ignore this 
import styles from "./styles"

export default TabButton = props => {
  return (
    <Button
      {...props}
      style={[
        styles.buttonTab,
        {
          backgroundColor: props.number == props.selectedTab ? palette.primary : palette.white,
        },
      ]}
      onPress={() => props.setSelectedTabSetter(props.number)}
    >
      <Text
        style={[
          styles.buttonTabText,
          { color: props.number == props.selectedTab ? "#fff" : undefined },
        ]}
      >
        {props.children}
      </Text>
    </Button>
  )
}

ProjectScreen.js (main Screen)

const ProjectScreen = props => {
  const [selectedTab, setSelectedTab] = useState(1)
  const tabs = ["Active", "Pending", "Canceled", "Completed"]

  return (
    <Container style={styles.container}>
      <Segment style={styles.tabsWrapper}>
        {tabs.map((tab, index) => {
          return (
            <TabButton
              key={index}
              first={index == 0}
              last={index == tabs.length - 1}
              number={index + 1}
              setSelectedTabSetter={setSelectedTab}
              selectedTab={selectedTab}
            >
              {tab}
            </TabButton>
          )
        })}
      </Segment>
    </Container>
  )
}

export default ProjectScreen