javascript - Touchable opacity on press not working inside SVG tags - Stack Overflow

admin管理员组

文章数量:1220789

I have a component inside an <Svg> where I have a button (<TouchableOpacity> with <View>) inside the component.

While the button onClick worked fine standalone, it's not working when I wrap the component inside the SVG.

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
  <Defs>
    <LinearGradient
        id='prefix__b'
        x1={'75.7%'}
        y1={'34.3%'}
        x2={'84.6%'}
        y2={'-9.6%'}
        gradientUnits='objectBoundingBox'
    >
      <Stop offset={1} stopColor='#2ff290' />
    </LinearGradient>
  </Defs>
  <View >
    <TouchableOpacity
                      onPress={() => {
      console.log('DSDA')
      }}
      ><Text>Click me!!</Text>
    </TouchableOpacity>
  </View>
</Svg>

I have a component inside an <Svg> where I have a button (<TouchableOpacity> with <View>) inside the component.

While the button onClick worked fine standalone, it's not working when I wrap the component inside the SVG.

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
  <Defs>
    <LinearGradient
        id='prefix__b'
        x1={'75.7%'}
        y1={'34.3%'}
        x2={'84.6%'}
        y2={'-9.6%'}
        gradientUnits='objectBoundingBox'
    >
      <Stop offset={1} stopColor='#2ff290' />
    </LinearGradient>
  </Defs>
  <View >
    <TouchableOpacity
                      onPress={() => {
      console.log('DSDA')
      }}
      ><Text>Click me!!</Text>
    </TouchableOpacity>
  </View>
</Svg>

https://github.com/react-native-community/react-native-svg/issues/1050

• javascript
• reactjs
• react-native
• svg

Share Improve this question Follow edited Mar 8, 2020 at 15:39 Henfs 5,4111212 gold badges3131 silver badges4747 bronze badges asked Jul 13, 2019 at 12:54 aravind_reddyaravind_reddy 5,46644 gold badges2727 silver badges4141 bronze badges 1

• In case anyone else stumbles here, you can, as of the time of this comment, add an onPress to a Text or Circle element, probably other elements in the library. I just searched "Touchable" in the Issues on the repo and there are several examples of this. That fixed my problem. – Sara Inés Calderón Commented Jul 8, 2024 at 17:43

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 1

You need to wrap your svg with TouchableOpacity tag, Like this:

<TouchableOpacity
    onPress={() => {
        console.log('DSDA')
    }}
>
    <Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
        <Defs>
            <LinearGradient
                id='prefix__b'
                x1={'75.7%'}
                y1={'34.3%'}
                x2={'84.6%'}
                y2={'-9.6%'}
                gradientUnits='objectBoundingBox'
            >
                <Stop offset={1} stopColor='#2ff290' />
            </LinearGradient>
        </Defs>
        <View ><Text>Click me!!</Text>
        </View>
    </Svg>
</TouchableOpacity>

The reason for that is that SVG is at the top as parent element, disabling the accessibility to TouchableOpacity. This means the press command is unreachable for TouchableOpacity. In short use single parent element.

In any case where touchable opacity does not register press event, it may depends on where you import touchable opacity from. try importing it from 'react-native' itself, not some community modules

wrapping your svg inside Touchable should able to make recognise touch for svg.Try wrapping it inside touchable component.

Use TouchableOpacity as a wrapper for the SVG and everything that you need inside.

Get touchable out SVG not a supported component atm

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' 
{...props}>
 <View>
<Defs>
<LinearGradient
    id='prefix__b'
    x1={'75.7%'}
    y1={'34.3%'}
    x2={'84.6%'}
    y2={'-9.6%'}
    gradientUnits='objectBoundingBox'
 >
  <Stop offset={1} stopColor='#2ff290' />
 </LinearGradient>
</Defs>
</View >
 <View>
 <TouchableOpacity
                  onPress={() => {
  console.log('DSDA')
  }}
  ><Text>Click me!!</Text>
 </TouchableOpacity>
 </View>
</Svg>

You can try this just wrap the Defs by View this could work.

本文标签： javascriptTouchable opacity on press not working inside SVG tagsStack Overflow