Make a background Image disappear from button on button click, TouchableWithoutFeedback - React Native?

Question

I have created an extremely large button with a giraffe head and a blue sky with clouds behind. I am wondering how when you click on the giraffe head you can make the image (sky behind) disappear and then reappear when you click the giraffe again. I need lots of these buttons so I have tried to make a reusable button component.

I made a Stack of the Components. https://snack.expo.io/@tamsynjennifer/custom-button

Otherwise this is the code:

REUSABLE BUTTON.JS

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

const Button = ({ backgroundImage, mainImage, onPress }) => (
  <View style={styles.container}>
    <Image
       style={styles.bgImage}
       source={backgroundImage}
       resizeMode={'contain'}
    />
    <TouchableWithoutFeedback 
      onPress={onPress}
      style={styles.button}
    >
     <Image
        style={styles.image}
        source={mainImage}
        resizeMode={'contain'}
     />
    </TouchableWithoutFeedback>
  </View>
);

const styles = StyleSheet.create({
  container: {
    height: 250,
    width: 250,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 0,
  },
  button: {
    height: 200,
    width: 200
  },
  bgImage: {
    alignSelf: 'center',
    justifyContent: 'center',
    position: 'absolute',
    height: 250,
    width: 250,
  },
  image: {
   alignSelf: 'center',
    justifyContent: 'center',
    position: 'absolute',
    height: 200,
    width: 200
  },
});

export default Button;

APP.JS

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

const bgImage = require("./assets/BgImage.png");
const mainImage = require("./assets/MainImage.png");

import Button from './Button';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.button}>
             <Button
                backgroundImage={bgImage}
                mainImage={mainImage}
             />
          </View>

      </View>
     );
   }
}

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: 300,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    height: 250,
    width: 250,
    alignSelf: 'center',
    position: 'absolute' 
  },
});

export default App;

Answer 1

This is how you can do it, I have fixed your code. Firstly you need to setState and change state onPress, so that the component re-render and change the image. Simply replace your class with this. Expo Link

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

const bgImage = require("./assets/BgImage.png");
const mainImage = require("./assets/MainImage.png");

import Button from './Button';

class App extends Component {
constructor(props){
super(props)
this.state = {
  imageVisibility: true,
  backgroundImagePath: require("./assets/BgImage.png")
}
}

  render() {
    return (
      <View style={styles.container}>
          <View style={styles.button}>
             <Button
                backgroundImage={this.state.backgroundImagePath}
                mainImage={mainImage}
                onPress= {() => {this.changeImgaeVisibility()}}
             />
          </View>

      </View>
     );
   }

   changeImgaeVisibility = () => {
   if(this.state.imageVisibility){
       this.setState({imageVisibility: false, backgroundImagePath: null})
   }else{
       this.setState({imageVisibility: true, backgroundImagePath: require("./assets/BgImage.png")})
   }
   }

   }

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: 300,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    height: 250,
    width: 250,
    alignSelf: 'center',
    position: 'absolute' 
  },
});

export default App;

Answer 2

You can add a function as a javascript object to your JSX to render the background image, this method will return the object that you need to render, as you can see in the example bellow:

const handleBackgroundImg = (imageBg, backgroundiImage) => {
  if (imageBg === true) {
   return <Image style={styles.bgImage} source={backgroundImage} resizeMode={'contain'}/>
  }
  return <Image />;
};

To add this function to your JSX code you have to change it like this:

const Button = ({ backgroundImage, mainImage, onPress, imageBg }) => (
  <View style={styles.container}>
    {handleBackgroundImg(imageBg, backgroundImage)}
    <TouchableWithoutFeedback 
      onPress={onPress}
      style={styles.button}
    >
     <Image
        style={styles.image}
        source={mainImage}
        resizeMode={'contain'}
     />
    </TouchableWithoutFeedback>
  </View>
);

Now when you use this component you have to pass the imageBg boolean as well, considering true when you want to show the bg and false when you want to hide it. See the code below:

<Button
  backgroundImage={bgImage}
  mainImage={mainImage}
  imageBg={true}
/>

If you have any doubt, ask here again and I can help you.