CODEWITHSUNDEEP
react-nativenative-base
Hannibal
Hannibal

Reputation: 49

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

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>

Upvotes: 1

Views: 5487

Answers (3)

Wesley Huber
Wesley Huber

Reputation: 1

I had the same issue, this was how I solved it using state and conditional statements onPress:

function ListItem({title, description, status, onPress, onCheck}){  

  
     // Declare a new state variable, which we'll call "count"
     // Declare a new state variable, which we'll call "count"
  const [iconName, setIconName] = useState("checkbox-blank-circle");
   
    return(  
        <View style={styles.container}>
            <TouchableHighlight onPress={onPress} underlayColor={colors.dark}>
            <Icon name="menu" style={styles.icon} color="#333" background="#fff" />
            </TouchableHighlight>
            <View style={styles.column}>
            <AppText style={styles.title}>{title}</AppText>
            <AppText style={styles.description}>{description}</AppText>
            </View>
            <TouchableOpacity onPress={() => {
              if(iconName == "checkbox-blank-circle" ){
              setIconName("checkbox-marked-circle")
              }
              if(iconName == "checkbox-marked-circle"){
                setIconName("checkbox-blank-circle")
              }
            }
            }> 
            <Icon name={iconName} style={styles.icon} color="#999" background="#fff" />
            </TouchableOpacity>
        </View>
      
    );
}

Upvotes: 0

sdn404
sdn404

Reputation: 624

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 !

Upvotes: 2

Bhagwat K
Bhagwat K

Reputation: 3142

You can try this : 

        const defaultImage = require('../images/defaultImage.png');
        const changedImage = require('../images/changedImage.png');   
        class ChangeImage extends Component {
          constructor() {
            super();
            this.state = { showDefaultImage: true };
          }

          renderImage() = {
           const imgSrc = this.state.showDefaultImage? defaultImage : changedImage;
            return (
              <Image
                source={ imgSrc }
              />
            );
          }
          render(){
            return (
              <View>
                  <TouchableOpacity
                   onPress={ () => this.setState(
                   { showDefaultImage: !this.state.showDefaultImage }
                )} 
                  />
                    {this.renderImage()}
                  </TouchableOpacity>
                </View>
            );
          }
        }

Hope this will help.

Upvotes: 0

Related Questions