How to make picture on focus in react-native

Question

I have several pictures and onPress I want to make tapped picture bigger(on focus) make background dark with opacity like this.

If I will tap on this picture I wanna do roughly same thing but on mobile (react-native).

Answer 1

Use: - Scale animation with Animated Component,

Example:

 state = { zoomImage: 1 } zoomIn=()=>{ Animated.timing(this.state.zoomImage, { toValue: 2, duration: 2000, userNativeDriver: true }) } render(): const animatedStyle = { transform: [ { scale: this.state.zoomImage } ] } <TouchableOpacity onPress={() => this.zoomIn}> <Image style={animatedStyle}/> </TouchableOpacity> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Refer: https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae

Answer 2

I believe you need to zoom the image from center and not from the top left. You can use this approach, and here is the pen for it: Codepen Link

class Profile extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      height: '100%',
      width: '100%',
      flag: 0
    };
  }

  render() {

    var { pic } = this.props;

    return (
      <div>
          <img src={pic} id="myImage" height={this.state.height} width={this.state.width} onClick={this.zoomHandler.bind(this)}/>
      </div>  
    );
  }
  zoomHandler()
  {
      if(this.state.flag === 0)
      {
          document.getElementById("myImage").style.transform = "scale(2,2)";
          this.setState({flag: 1});
      }
      else
      {
          document.getElementById("myImage").style.transform = "scale(1,1)";
          this.setState({flag: 0});
      }
  }
}

React.render(
  <Profile 
    pic="https://www.diariogol.com/uploads/s1/55/38/91/7/messi-leo-getafe-camp-nou_15_970x597.jpeg" />, 
    document.getElementById('app')
);

I have used states for height and weight, which can also be used for the zoom effect.