CODEWITHSUNDEEP
javascriptreactjsreact-nativesvgexpo
davidesp
davidesp

Reputation: 3962

Cannot resize an SVG image in React Native app

I have the following React Native project:

https://snack.expo.io/BkBU8fAlV

where I have the following code:

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

import HomerSvg from './assets/HomerSvg';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <View style={{ width: 80, height: 80 }}>
          <HomerSvg />
        </View>
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

I display the SVG image through the component: HomerSvg which uses the react-native-svg package.

What I need is to resize somehow the SVG image. On the code above I did a try with no success.

I tried by giving the container view some width and height with no success.

Do you have any idea on how can I achieve that?

Thanks!

Upvotes: 8

Views: 14522

Answers (5)

Javier Montoya
Javier Montoya

Reputation: 211

I know this is an old question but maybe we're forgetting the fundamentals here, remember that imported SVGs can be provided a width and height.

import HomeSvg from './assets/HomeSvg';

<HomeSvg height={20} width={20}/>

Upvotes: 12

SalsaJJ
SalsaJJ

Reputation: 374

For me the problem was that SVG optimizations removed viewBox.
Try adding viewBox="0 0 width height" prop to the Svg (width and height being the original dimensions).

Upvotes: 3

YoshiJaeger
YoshiJaeger

Reputation: 1210

This is actually very easy to solve without React Native but SVG itself.

Just set the preserveAspectRatio tag to none.

Example:

<Svg
  width={this.props.width}
  height={this.heights.h1}
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 750 352"
  preserveAspectRatio="none">
...
</Svg>

Upvotes: 12

ShridharBavannawar
ShridharBavannawar

Reputation: 174

You can wrap all the <Path /> elements inside a <G /> and scale the <G /> component by calculating the scale factor using Dimensions i.e width and height of the device.

<G transform="scale(scaleFactor) translate(offsetX,offsetY)>
<Path/>
<Path/>
.
.
.
<G/>

where scaleFactor, offsetX and offsetY can be calculated via const { height, width } = Dimensions.get("window")

Upvotes: 1

Cyrus
Cyrus

Reputation: 681

Unless the SVG's dimensions are based on the containers dimensions, they will not change. Images with set dimensions ignore their parent's dimensions, and you set the dimensions in HomerSvg.js

Hope this helps!

Upvotes: 0

Related Questions