How to add svg to button in react native-CodePudding

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>
    )
}

CodePudding user response：

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>
  );
}