React native SVG transformer imported SVG misses coordinates properties

Question

In a previous Ionic app I'v used an SVG viewbox to layout an app screen with multiple SVG files to make a complex combination. The viewbox ensured that the ratio remained correct over all devices. For a new app I'd like to re-use the SVG files and the same layout. I got the react-native-svg and react-native-svg-transformer plugins working and I'm able to load and display the SVG on a screen. I'd like to put them in a view box with some coordinates to re-create the GUI. However the imported SVG objects do not have an x or y property to set and all overlap each other in the top left corner of the viewbox. The standard Rectangular and Circle SVG classes how-ever do posses the x and y properties. From the plug-in documentation I cannot determine if I need to wrap them in an SVG class or put the imported SVG's in a component in order to be able to put them in an Svg viewBox with coordinates. The react-native-SVG documentation examples only shows their own classes in a viewbox and not imported SVG's being used within a viewBox.

Some code for visualization:

import React, { useEffect, useState } from 'react';
import Svg, { Rect} from 'react-native-svg';
import Logo from '../../assets/svg/logoNew.svg';
import Background from '../../assets/svg/background.svg';
import Home from '../../assets/svg/home.svg';
import Button from '../../components/SVG/Button';


const ManualScreen = (props: { navigation: any }) => {


    return (
        <View style={globalStyles.container.spacedBetween}>
            <Text style={globalStyles.text.heading}>Manual page</Text>
            <Svg width="100%" height="80%" viewBox={'0 0 1080 1920'}>
                <Rect x="440" y="800"  width="200" height="200" fill="blue"/>
                <Rect x="440" y="1300" width="200" height="200" fill="blue"/>
                <Rect x="190" y="1050"  width="200" height="200" fill="blue"/>
                <Rect x="690" y="1050"  width="200" height="200" fill="blue"/>

                <Background width="1080" height="1900"/>
                <Home width={"100"} height={"100"}/> 
                <Logo width={"100"} height={"100"}/>                
            </Svg>
            
        </View>
    );
};

export default ManualScreen;

So in the above example I would like to change the Rect class for the Button SVG and apply the given coordinates.

I've tried putting the imported SVG's in a seperate component, wrap it in an Svg or Rect class. I've read the documentaiton of the react-native-SVG-transformer and react-native-SVG plugins, but could not find an answer or whether this was even possible with the imported SVG's