CODEWITHSUNDEEP
react-nativecomponentsnativenative-base
Tim Dirks
Tim Dirks

Reputation: 449

Change color of react base search component

I have a react base search component and I would like to change the blue color to a other color as in the picture.

enter image description here

The react code I use to generate comes from the react base website.

            <Item>
              <Icon name="ios-search" />
              <Input
                placeholder="Search"
                defaultValue={this.state.searchvalue}
                onChangeText={searchvalue =>
                  this.setState({ searchvalue: searchvalue })}
              />
              <Icon
                name="ios-close"
                onPress={() => this.empty()}
              />
            </Item>
            <Button transparent onPress={() => this.search()}>
              <Icon
                style={styles.btnLinkIcon}
                name="ios-checkmark-outline"
              />
            </Button>
          </Header>

Upvotes: 0

Views: 800

Answers (1)

Mohamed Khalil
Mohamed Khalil

Reputation: 3126

you can do by changing Header component backgroudColor

<Header style={{ backgroundColor: '#000'}} >
       <Item>
          <Icon name="ios-search" />
          <Input
            placeholder="Search"
            defaultValue={this.state.searchvalue}
            onChangeText={searchvalue =>
              this.setState({ searchvalue: searchvalue })}
          />
          <Icon
            name="ios-close"
            onPress={() => this.empty()}
          />
        </Item>
        <Button transparent onPress={() => this.search()}>
          <Icon
            style={styles.btnLinkIcon}
            name="ios-checkmark-outline"
          />
        </Button>
      </Header>

Upvotes: 1

Related Questions