CODEWITHSUNDEEP
cssreactjsimagereact-nativesvg
Wets
Wets

Reputation: 300

How can I change svg size depending on my screen size in React Native?

I created adaptive layout in React Native, so everything I have to do is make my svg image scale with my screen size. How can I do that in React Native using react-native-svg?

Upvotes: 1

Views: 987

Answers (1)

William Brochensque junior
William Brochensque junior

Reputation: 2972

Using react-native-responsive-screen you can use values depending on your screen size like as follow:



import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  textWrapper: {
    height: hp('70%'), // 70% of height device screen
    width: wp('80%')   // 80% of width device screen
  }
});

export default Login;

Upvotes: 1

Related Questions