Как окружить элемент с пользовательской формой, сделанной SVG в реагировать родной?

Question

 renderUserProfile() {
        const headerHeight = this.state.deviceHeight * 0.45
        const headerRadius = 16
        const imageRadiusPercentage = 0.3
        const imageRadius = this.state.deviceWidth * imageRadiusPercentage
            const restImageRadiusPercentage = (1 - imageRadiusPercentage) * 0.5
            const imageTop = headerHeight - imageRadius * 2.3
            const footerHeight = this.state.deviceHeight - headerHeight - (imageRadius * 0.5)
            return (
                <View style={[{
                    borderBottomRightRadius: 20,
                    borderBottomLeftRadius: 111
                }]}>
                    <Animatable.View
                        animation={'fadeInDown'}
                        useNativeDriver={true}
                        style={{

                            width: this.state.deviceWidth,
                            height: headerHeight,
                        }}>
                        <LinearGradient
                            style={{ height: '100%' }}
                            colors={['#1E1E1E', '#797979']}>
                        </LinearGradient>
                        <Text style={[styles.fontFamily, {
                            fontSize: 25,
                            position: 'absolute', color: 'white',
                            width: this.state.deviceWidth, top: this.state.deviceHeight * 0.24, textAlign: 'center'
                        }]}>
                            {this.state.userInfoList.fullName}</Text>
                        <View style={[{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: this.state.deviceWidth,
                            position: 'absolute',
                            top: this.state.deviceHeight * 0.315,
                        }]}>
                            <Text style={[styles.fontFamily, { fontSize: 18, color: 'white' }]}>
                                شیراز</Text>
                            <Entypo size={20}
                                style={{ paddingHorizontal: '1%' }} name="location-pin" color={"white"} />
                        </View>
                        <View style={{
                            position: 'absolute',
                            bottom: 0, left: this.state.deviceWidth * 0.08
                        }}>
                            <Text style={[styles.fontFamily, { fontSize: 25, color: 'white', textAlign: 'center' }]}>
                                {this.state.barterLstLength}</Text>
                            <Text style={[styles.fontFamily, {
                                fontSize: 25,
                                color: 'white'
                            }]}>
                                تاخت شده</Text>
                        </View>
                        <View style={{
                            position: 'absolute',
                            bottom: 0, right: this.state.deviceWidth * 0.08
                        }}>
                            <Text style={[styles.fontFamily, { fontSize: 25, color: 'white', textAlign: 'center' }]}>
                                18</Text>
                            <Text style={[styles.fontFamily, {
                                fontSize: 25,
                                color: 'white'
                            }]}>
                                برای تاخت</Text>
                        </View>
                    </Animatable.View>
                    <Animatable.View
                        delay={200}
                        animation={'fadeInUp'}
                        useNativeDriver={true}
                        style={{
                            position: 'absolute',
                            overflow: 'hidden',
                            backgroundColor: colors.background2,
                            top: imageTop,
                            left: this.state.deviceWidth * restImageRadiusPercentage,
                            width: imageRadius,
                            borderWidth: 4,
                            borderColor: 'white',
                            height: imageRadius,
                            borderRadius: imageRadius,
                            shadowRadius: imageRadius,
                            shadowColor: '#ffffff',
                        }}>
                        <TouchableOpacity style={{
                            width: imageRadius,
                            height: imageRadius,
                            borderRadius: imageRadius,
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <Animatable.View
                                delay={300}
                                animation={'fadeInDown'}
                                useNativeDriver={true}>
                                {this.renderProfilePhoto()}
                            </Animatable.View>
                        </TouchableOpacity>
                    </Animatable.View>
                </View>
            )
        }

/ * У меня проблема с svgs. Я не могу поместить какие-либо реагирующие нативные базовые элементы, такие как изображения, тексты и представления, в svg в ситуации, когда svg полностью покрывает этот элемент без какого-либо изгнания внутреннего элемента с какой-либо границы контейнера svg. Я имею в виду, что он полностью подходит, и svg действует как рамка для этого элемента. Это часть заголовка профиля пользователя в мобильном приложении, и я хочу поместить основную информацию о пользователе в svg, такую ​​как фотография профиля, имя, дата и т. Д. Кроме того, я должен сказать, что мой SVG - это пользовательская форма, а не какая-то особая форма. Здесь я положил свою часть кода.

Буду очень признателен, если кто-нибудь сможет мне помочь * /