How to add svg to button in react native

Question

How to use svg image like background in button in react native?

for example how to put this image to button:

import Svg, {Path} from "react-native-svg";

export function FillPerson({ size }) {
    return (
        <Svg width={size} height={size}>
            <Path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#fff"/>
        </Svg>
    )
}

Please take a look at this https://stackoverflow.com/questions/9185434/using-svg-as-background-image — enxaneta, Jan 03 '23 at 13:29

score 1 · Accepted Answer · answered Jan 03 '23 at 13:33

1

You can wrap your SVG to TouchableHighlight or TouchableOpacity with View container:

function Button({ onPress, size }) {
  return (
    <TouchableHighlight onPress={onPress}>
      <View style={{ width: size, height: size }}>
        <Svg width={size} height={size}>
            <Path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#fff"/>
        </Svg>
      </View>
    </TouchableHighlight>
  );
}

answered Jan 03 '23 at 13:33

Kirill Novikov

2,576
4
20
33

2

There is also neccesary viewBox – Adam Jan 03 '23 at 14:49
And better TouchableOpacity – Adam Jan 03 '23 at 14:49

How to add svg to button in react native

1 Answers1