CODEWITHSUNDEEP
javascriptreactjsreact-native
Chris
Chris

Reputation: 659

React-Native changing <Image /> source with state

I'm trying to create a React component that toggles a logo between black and white when pressed. I want to incorporate more functionality in the component down the road, but changeLogo() console.log will not even show in the debugger.

Any help / tips appreciated!

react-native: 0.39.2 react: ^15.4.2

import React, { Component } from 'react';
import { View, Image } from 'react-native';

export default class TestButton extends Component {
  constructor(props) {
    super(props);
    this.state = { uri: require('./icons/logo_white.png') }
  }

  changeLogo() {
    console.log('state changed!');
    this.setState({
      uri: require('./icons/logo_black.png')
    });
  }

  render() {
    return (
      <View
        style={styles.container}
      >
        <Image
          source={this.state.uri}
          style={styles.logoStyle}
          onPress={this.changeLogo}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  logoStyle: {
    width: 200,
    height: 200,
    marginLeft: 10,
    marginRight: 5,
    alignSelf: 'center',
  },
};

Upvotes: 4

Views: 24032

Answers (1)

max23_
max23_

Reputation: 6689

onPress prop is not available for Image component. You need to wrap it with TouchableHighlight component like this:

import { View, Image, TouchableHighlight } from 'react-native';

...

<TouchableHighlight onPress={() => this.changeLogo()}>
  <Image
    source={this.state.uri}
    style={styles.logoStyle}
  />
</TouchableHighlight>

Upvotes: 4

Related Questions