How to change icon(icon name properties) on button after clicking on button that is onPress

Question

I have Button component with text and icon on it. Button and Icon from native-base library... How can I change icon(icon name properties) after clicking on the Button

fragment of code:

<Button
    onPress={}
    transparent
    iconRight
    small   
 >
  <Text style={{ color: 'red', fontSize: 18 }}>HIDE</Text>
   <Icon
     name='ios-arrow-down-outline'
     style={{ color: 'red', fontSize: 18 }} 
    />
   </Button>

Answer 1

You can achieve this by changing the state after pressing the button:

Working demo: https://snack.expo.io/r1dHpDBvX

Example code:

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text, Icon } from 'native-base';

export default class ButtonThemeExample extends Component {
  constructor() {
   super();
   this.state = { iconName: "md-arrow-back" };
  }

  render() {
    return (
     <Container>
       <Header />
         <Content>
           <Button
             onPress={ () => this.setState(
               { iconName: "md-arrow-down" }
             )}
             transparent
             iconRight
             small   
            >
            <Text style={{ color: 'red', fontSize: 18 }}>HIDE</Text>
            <Icon
              name= {this.state.iconName}
              style={{ color: 'red', fontSize: 18 }} 
            />
          </Button>
        </Content>
      </Container>
     );
    }
  }

Hope this works !