How to scale image in React-native

Hi guys, In this article, we are going to learn about How to scale image in React-native i.e. increase or decrease image component without changing image original dimensions, while developer some times we add height and width to image components and then after we want to change the size of the image but some times image dimension will disturb so the best way to change image size is to use transform and set the scale to change the image size, so let’s start with an example

1. Create a new project

react-native init projectName

I have already created a project, so I am using the same project

2. Import the following components

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

3. Define default image size

Define default image size in state variable inside constructor like below

constructor() {
   super();
    this.state = {
      imageSize:  0.75
    }
}

4. Add image component to display Image

Inside return method add image component which we will be going to scale on button click as given below

  <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={[styles.imageCircleStyle,{ transform: [{ scale: this.state.imageSize }]}]}
        />

Set scale to image using a transform in the stylesheet to scale image size like

style = { transform: [{ scale: this.state.imageSize }]}

then add two buttons one for increasing the image size and another for the decreasing size

 <View style={{flexDirection:'row'}}>
     <TouchableOpacity style={styles.buttonStyle}  onPress={()=> this.setState({imageSize: this.state.imageSize + 0.25})}>
        <Text style={styles.text}>Increase size</Text>
     </TouchableOpacity>
     <TouchableOpacity style={styles.buttonStyle}  onPress={()=> this.setState({imageSize: this.state.imageSize - 0.25})}>
        <Text style={styles.text}>Decrease size</Text>
     </TouchableOpacity>
 </View>

As you saw in above buttons onPress we reset imageSize in the state

let’s see full source code for screen

5. How to scale image in React-native

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

export default class Home extends Component {

  constructor() {
    super();
    this.state = {
      imageSize:  0.75
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'DetailsView',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };


  componentDidMount() {
   // do API call here
  }

  render() {
    return (
      <View style={styles.container}>
       <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={[styles.imageCircleStyle,{ transform: [{ scale: this.state.imageSize }]}]}
        />
        <View style={{flexDirection:'row'}}>
        <TouchableOpacity style={styles.buttonStyle}  onPress={()=> this.setState({imageSize: this.state.imageSize + 0.25})}>
        <Text style={styles.text}>Increase size</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.buttonStyle}  onPress={()=> this.setState({imageSize: this.state.imageSize - 0.25})}>
        <Text style={styles.text}>Decrease size</Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({ 
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0250a3',
    padding: 10
  },
  imageCircleStyle:{
    width: 200,
    height: 200,
    borderRadius: 200 / 2,
    borderWidth: 1,
    borderColor: '#0250a3',   
    marginBottom: 30
  },
  buttonStyle:{
    marginHorizontal: 15,
    borderRadius:5,
    borderWidth:1,
    borderColor: '#0250a3',
   
  }
});

6. Output

Thank you 🙂