Drawer Navigation background Image SVG

Question

I am working on drawer navigation. I am rendering my custom contentComponent to edit my drawer navigation but problem is when i call my SVG component it doesn't show any content except the SVG. I tried this way.

const CustomDrawerContentComponent = (props) => (

    <SafeAreaView>
      <Svg/>

     <DrawerItems {...props} /> 
    <Text>HI</Text>

  </SafeAreaView>


);

I have also tried to use my SVG as ImageBackground as shown in the code below.

    import { createDrawerNavigator,DrawerItems  } from 'react-navigation-drawer';
    import { createAppContainer } from 'react-navigation';
    import { Dimensions, ScrollView, Image, View,Text,SafeAreaView,ImageBackground } from 'react-native';
    import React from 'react';
    import Svg from '../Common/svgMenuTranformer'

    import mainScreen from '../screens/main';


    const CustomDrawerContentComponent = (props) => (

        <SafeAreaView>
          <ImageBackground style={{width:'100%',height:'100%'}} source={()=> <Svg/>}>
         <DrawerItems {...props} /> 
        <Text>HI</Text>
        </ImageBackground>
      </SafeAreaView>


    );


    // drawer navigation options
    const RootDrawerNavigator = createDrawerNavigator({
      HomeScreen: {
        screen: mainScreen,
      },
      // About: {
      //   //screen: AboutStack,
      // },,

    },
      {
        //drawerPosition: 'right',
        //useNativeAnimations : true,
        drawerBackgroundColor: 'transparent',
        contentComponent: CustomDrawerContentComponent,
        // contentOptions: {
        //   activeTintColor: 'black',
        //   activeBackgroundColor: 'transparent',
        //   inactiveTintColor: 'black',
        //   itemsContainerStyle: {
        //     marginVertical: 0,
        //   },
        //   iconContainerStyle: {
        //     opacity: 1,
        //   },
        //   itemStyle: {
        //     height: 50,
        //   }

        // }
      });

    export default createAppContainer(RootDrawerNavigator);

import * as React from "react"
import Svg, { Defs, Path } from "react-native-svg"
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function SvgComponent(props) {
  return (
    <Svg width={"100%"} height={"100%"} viewBox="0 0 454 1536" {...props}>
      <Defs></Defs>
      <Path
        d="M-128.13 904s707.552 181.69 512 804H-166z"
        fillRule="evenodd"
        fill="#2196f3"
        filter="url(#prefix__a)"
      />
      <Path
        d="M-84 1456s594-172 494-584c0 0-90.022-228.968-18-378 69.979-144.8 54-384-64-496H-84v1458z"
        fill="#fff"
        filter="url(#prefix__b)"
        fillRule="evenodd"
      />
    </Svg>
  )
}

export default SvgComponent

How can i show my SVG component as background image and add content to it like text,navigation routes etc in contentComponent?

Answer 1

You cannot use svg inside ImageBackground.

You need to render the svg. and the content with absolute position

const CustomDrawerContentComponent = (props) => (

        <SafeAreaView>
            <View>
              <Svg style={{//passs your style here}}/>
                <View style={{position:'absolute', top:0, left:0, right:0, bottom:0,}}>
                    <DrawerItems {...props} /> 
                    <Text>HI</Text>
                </View>            

            </View>

      </SafeAreaView>
);

//.....

Answer 2

try this:

  return(
      <SafeAreaView style={{ flex:1 }}>
        <View style={{ position:'absolute', top:0, bottom:0, right:0, left:0 }}>
    <BGImage />

</View>
        <Text>Testklasdmklasmdas</Text>
        <Text>Testklasdmklasmdas</Text>
        <Text>Testklasdmklasmdas</Text>
        <Text>Testklasdmklasmdas</Text>
        <Text>Testklasdmklasmdas</Text>
        <Text>Testklasdmklasmdas</Text>
      </SafeAreaView>
    );