How to control the height and width of a svg file by using flex in react native?I am using flex for responsive screen for both portrait and landscape

Question

I am using react native flexes for responsivness for both portrait and lanscape screens but unable to use svg file by using svg ....because by giving manual width and height its not becomes responsive for both land and portrait. If i use dimensions then when i rotate the phone the design not changes untill i reload

import React, { useEffect, useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TextInput,
  TouchableOpacity,
  ToastAndroid,
  Image,
  Modal,
  FlatList,StatusBarStyle,Dimensions

}
  from 'react-native';


const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;


import {
  Colors

} from 'react-native/Libraries/NewAppScreen';
import { SvgXml } from 'react-native-svg';
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize
} from "react-native-responsive-dimensions";


const SplashScreen1 = ({ navigation }) => {
  const isDarkMode = useColorScheme() === 'dark';
  //  const [show,setshow]=useState(false);


//   useEffect(()=>{
  

//     setTimeout(() => {
//       navigation.navigate('Splashscreen2')


//     }, 3000);

// },[]);

  const THEME_COLOR = '#00AEC7';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const logo = `
  <svg width="139" height="137" viewBox="0 0 139 137" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M41.944 115.599C44.3066 105.529 38.5328 96.8113 24.6286 89.4483C17.7701 85.4025 17.6046 80.8475 24.132 75.7831C21.2425 71.1766 22.5886 68.589 28.1839 68.0123C23.7688 64.0783 24.5563 61.2466 30.5618 59.5187C18.5146 48.9318 26.415 50.0353 32.8877 44.8107C43.9433 35.8816 44.6387 19.9707 68.446 16.9773C79.0458 15.6423 89.5598 19.5998 97.5549 26.6453C86.2801 22.1633 62.6015 22.0161 53.3861 38.1311C35.3301 69.7033 64.1959 79.6059 55.0377 102.288C52.6174 108.281 47.9048 113.076 41.944 115.599Z" fill="#00AEC7"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M123.138 69.0461C121.562 68.0287 119.746 67.6807 118.024 67.9348L115.035 57.0079C115.941 56.5851 116.748 55.9153 117.333 55.01C118.973 52.4705 118.248 49.0786 115.702 47.4348C113.41 45.9543 110.429 46.4035 108.66 48.3684L98.9448 42.1943C100.533 38.8714 99.4385 34.7996 96.2582 32.7459C92.8075 30.5176 88.1966 31.505 85.9644 34.9615C85.1824 36.1725 84.8004 37.5251 84.7754 38.8668L74.9805 39.8969C74.6362 38.6499 73.8472 37.524 72.6774 36.7686C70.1379 35.1287 66.746 35.8537 65.1022 38.3991C63.5686 40.774 64.1071 43.8873 66.252 45.6223L62.5056 52.2493C59.2482 50.8954 55.3904 52.0193 53.4088 55.0879C51.1767 58.5444 52.1679 63.1496 55.6244 65.3817C57.8818 66.8394 60.6275 66.9216 62.8846 65.8385L68.8234 75.088C68.4805 75.3997 68.1732 75.7594 67.9075 76.1709C66.2676 78.7104 66.9926 82.1024 69.538 83.7461C69.8437 83.9435 70.1625 84.1078 70.4885 84.235C69.9647 86.2458 69.4083 88.552 68.7394 91.3937C66.8257 91.2742 64.9075 92.1679 63.7952 93.8903C62.1553 96.4298 62.8803 99.8218 65.4257 101.466L65.461 101.488L62.7746 107.867C60.5835 107.352 58.2107 108.227 56.9163 110.231C55.2763 112.771 56.0014 116.163 58.5467 117.806C61.0863 119.446 64.4782 118.721 66.122 116.176C67.7657 113.631 67.0369 110.244 64.4915 108.601L64.4621 108.582C65.5501 105.994 66.4015 103.953 67.1056 102.192C69.3068 102.731 71.7047 101.855 73.0068 99.8388C74.6467 97.2993 73.9217 93.9073 71.3763 92.2636C71.0883 92.0776 70.7871 91.9248 70.4805 91.7934C70.9684 89.8511 71.4999 87.5704 72.1846 84.6139C74.0924 84.7297 76.001 83.8381 77.1132 82.1157C77.4701 81.5631 77.708 80.9754 77.8505 80.3677L86.4935 80.8761C86.6622 82.4595 87.5244 83.9492 88.9705 84.8831C91.51 86.523 94.902 85.798 96.5457 83.2526C97.1569 82.3062 97.4404 81.2481 97.4232 80.204L111.992 77.5339C112.493 79.1318 113.533 80.5782 115.056 81.5614C118.512 83.7935 123.117 82.8023 125.35 79.3458C127.585 75.8834 126.594 71.2782 123.138 69.0461ZM116.275 68.4126C115.131 68.8816 114.093 69.6363 113.285 70.6555L104.787 65.4341C105.448 63.8037 105.268 61.9798 104.378 60.5216L109.257 56.2674C109.416 56.3951 109.585 56.5208 109.761 56.6347C110.849 57.3369 112.091 57.6061 113.279 57.482L116.275 68.4126ZM112.334 72.2067C111.812 73.3362 111.603 74.5504 111.671 75.7354L97.1019 78.4056C96.7198 77.3591 96.0208 76.4163 95.0366 75.7474L98.2815 68.6716C100.275 69.2093 102.448 68.5797 103.835 66.9853L112.334 72.2067ZM108.063 54.9048L103.177 59.1551C103.018 59.0274 102.85 58.9018 102.673 58.7879C101.539 58.0552 100.232 57.7948 98.9868 57.9567L95.2572 45.8022C96.287 45.3427 97.2201 44.6458 97.9658 43.7362L107.681 49.9103C106.989 51.5625 107.156 53.4196 108.063 54.9048ZM77.8187 63.7123C76.0553 68.0297 74.7923 71.1208 73.7852 73.8024C72.638 73.528 71.442 73.6387 70.3773 74.1006L64.4385 64.8511C65.0101 64.3789 65.5065 63.8165 65.9279 63.164C66.5619 62.1823 66.9362 61.0996 67.0658 60.0088L75.305 59.9816C75.5572 61.4356 76.3903 62.7899 77.7306 63.6554L77.8187 63.7123ZM75.4042 74.4814L79.5117 64.4058C81.687 64.8942 84.0286 64.0157 85.3079 62.0346C85.4939 61.7466 85.6429 61.4513 85.7705 61.1505L94.2382 63.0785C94.195 63.8419 94.3129 64.6011 94.5775 65.3135L76.7431 75.6459C76.3992 75.2239 75.9803 74.8534 75.4924 74.5384L75.4042 74.4814ZM64.1065 53.1498L67.8529 46.5228C69.1486 46.993 70.561 46.9471 71.7939 46.4439L77.0774 54.9537C76.7114 55.2754 76.3793 55.6607 76.1022 56.0899C75.6808 56.7424 75.4174 57.4469 75.2999 58.1707L67.0607 58.1979C66.8167 56.241 65.7921 54.3965 64.1065 53.1498ZM86.6162 79.0479L77.9733 78.5394C77.9259 78.084 77.8145 77.6372 77.6569 77.2106L95.4913 66.8781C95.8134 67.2694 96.1911 67.6133 96.6303 67.9135L93.3854 74.9893C91.1503 74.3873 88.6843 75.2521 87.3594 77.3037C87.0026 77.8563 86.755 78.4461 86.6162 79.0479ZM94.6392 61.2966L86.1715 59.3686C86.2709 57.6669 85.5647 55.9613 84.1816 54.8266L89.3321 45.8577C90.6797 46.4281 92.1375 46.5698 93.5179 46.3284L97.2476 58.4828C96.3978 58.9087 95.6464 59.5563 95.096 60.4087C94.9196 60.6947 94.7668 60.9958 94.6392 61.2966ZM75.1837 41.7107L84.9726 40.6768C85.3539 42.3308 86.306 43.8619 87.7543 44.9471L82.6039 53.9161C81.2943 53.4286 79.8723 53.4765 78.6259 53.9878L73.3423 45.4779C73.7122 45.1503 74.0405 44.7709 74.3176 44.3418C74.8453 43.5247 75.1309 42.6179 75.1837 41.7107Z" fill="#00AEC7"/>
  </svg>

`;

  return (



    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff',alignItems:'center',justifyContent:'center' }} >
      <StatusBar backgroundColor={THEME_COLOR} barStyle="dark-content"   />





      <View style={{ justifyContent:'center',alignItems:'center',flex:0.5,backgroundColor:'blue',}}>
      <SvgXml xml={logo}  style={{backgroundColor:'red',flexDirection:'row',alignSelf:'center'}} />
      </View>









    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    alignContent: 'center',
    margin: 10,
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 400,
  },
  


});

export default SplashScreen1;

Krismu · Answer 1 · 2022-11-15T11:29:38.730

0

Instead of using Dimensions try useWindowDimensions instead. Dimensions is from class component era and does not update as window dimensions change.

Might also be worth checking this

edited Nov 15 '22 at 11:29

answered Nov 15 '22 at 11:27

Krismu

503
4
14

kindly share some sort of code or a link please. – Junaid Anwar Nov 15 '22 at 11:28
how to use it ? – Junaid Anwar Nov 15 '22 at 11:31
have a look at the example in the first link. Your code does not specify how you were planning to use windowWidth and windowHeight, but treat is as a drop in replacement for that – Krismu Nov 15 '22 at 11:33

How to control the height and width of a svg file by using flex in react native?I am using flex for responsive screen for both portrait and landscape

1 Answers1