How to make the image to align on left when using SvgUri?

[harshal-moneylion]

Currently i have below sample code no matter how much i try the image is always center align. Is there a way to make it align to left?

import { View, SafeAreaView, StyleSheet, Text } from 'react-native';
import { SvgUri } from "react-native-svg";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>"start"</Text>
        <View style={{ height:400, backgroundColor:'red', justifyContent:'left', alignSelf: 'flex-start',width:'100%' }}>
          <View style={{ alignSelf: 'flex-start', backgroundColor:'blue',width:"100%",height:300,justifyContent:'left' }}>
            <SvgUri
              width={"100%"}
              height={32}
              resizeMode={"contain"}
              style={{backgroundColor:"pink",marginTop:30, justifyContent:'left', alignSelf: 'flex-start'}}
              uri={'https://swmansion.com/assets/logo.svg'}
            />
        </View>      
      </View>
    <Text>"End"</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'left',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Link to expo snack with above code

https://snack.expo.dev/@hb2708/svguri

[bohdanprog]

Hi @harshal-moneylion, if you remove width 100% for SvgUri everything should work well, here is an example:
https://snack.expo.dev/80s8ochV3DrxaVa8FjJq8