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>
)
}
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>
);
}
Related
I've created SVG component for all svg's. I just want to change width height with props but I couldn't figure out. I'm using icons like this now <SVGCustomIcon name="InboxMenu" />. how can I also add width height props?
custom SVG component
const icons: SVGCustomIconMap = {
InboxMenu: (
<Svg width={18} height={20} viewBox="0 0 18 20" fill="none">
<Path
d="M11.25 17.5c0 .629-.262 1.3-.73 1.77-.47.468-1.141.73-1.77.73a2.5 2.5 0 01-1.77-.73 2.563 2.563 0 01-.73-1.77h5z"
fill="#949494"
/>
.....
),
ProfileMenu: (
<Svg width={20} height={22} viewBox="0 0 20 22" fill="none">
......
),
};
const SVGCustomIcon = ({ name }: SVGCustomIconProps) => {
return <>{icons[name] ? icons[name] : null}</>;
};
export default SVGCustomIcon;
type.ts
export type SVGCustomIcon = React.SVGProps<SVGSVGElement>;
export interface SVGCustomIconMap {
[key: string]: SVGCustomIcon;
}
export interface SVGCustomIconProps {
name: string;
}
you can try this,
export interface SVGCustomIconMap {
[key: string]: any;
}
export interface SVGCustomIconProps {
name: string;
width?: number;
height?: number;
}
export type TSize = {
width?: number;
height?: number;
};
const icons: SVGCustomIconMap = {
InboxMenu: ({ width, height }: TSize) => {
return (
<>
<Svg
width={width || 18}
height={height || 20}
viewBox="0 0 18 20"
fill="none">
{/* .... your rest code .... */}
</>
);
},
ProfileMenu: ({ width, height }: TSize) => {
return (
<>
<Svg
width={width || 20}
height={height || 22}
viewBox="0 0 20 22"
fill="none">
{/* ...... your rest code ....... */}
</>
);
},
};
const SVGCustomIcon = ({ name, width, height }: SVGCustomIconProps) => {
const SvgCustom = icons?.[name] ? icons[name] : null;
if (!SvgCustom) {
return null;
}
return <SvgCustom width={width} height={height} />;
};
export default SVGCustomIcon;
//how to call
<SVGCustomIcon name="InboxMenu" width={20} height={22} />;
I would try adding a `preserveAspectRatio="none" to your svg component. I don't work in React Native a lot but I vaguely remember this issue.
ProfileMenu: (
<Svg width={20} height={22} viewBox="0 0 20 22" fill="none" preserveAspectRatio="none">
)
To change the width and height of an SVG icon in a React Native application, you can use the style prop of the Svg component.
Here is an example of how you can set the width and height of an SVG icon to 50 pixels:
Copy code
import { Svg } from 'react-native-svg';
function MyIcon() {
return (
<Svg width={50} height={50}>
{/* Icon content goes here */}
</Svg>
);
}
You can also use the style prop to set the width and height using a style object:
Copy code
import { Svg } from 'react-native-svg';
function MyIcon() {
return (
<Svg style={{ width: 50, height: 50 }}>
{/* Icon content goes here */}
</Svg>
);
}
Keep in mind that the width and height of the Svg component will determine the size of the entire icon, including any elements inside it. You may need to adjust the size of the individual elements within the icon as well to achieve the desired appearance.
I am using react-native-tvos to create an app.
I am trying to display SVG elements that respond to the remote.
I have tried using TouchableOpacity as well as Pressable on the elements.
Whenever I wrap the elements with those they no longer appear.
I've looked through dozens of S/O posts and have tried various things. Such as zIndex, flex on container. I also tried the react-native-gesture-handler, but that doesn't seem to work for tvos.
I've broken the code down to something very simple. Just a circle in the middle of the screen.
import Svg, {Circle} from 'react-native-svg';
import * as React from 'react';
import {TouchableOpacity, View,} from 'react-native';
const App = () => {
return (
<View>
<Svg x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;">
<TouchableOpacity style={{
opacity: 1,
fill: "#FF0000",
stroke: "5",
zIndex: 100,
}} onPress={() => alert('PRESSED')}>
<Circle cx="960" cy="540" r="100" opacity="1" fill="#FF0000"/>
</TouchableOpacity>
</Svg>
</View>
);
};
export default App;
How to use expo vector icon in react native skia.
I want to use this icon,
<Ionicons name="md-checkmark-circle" size={32} color="green" /> in skia Canvas or Box
Thanks.
You can't use vector icons directly but you can add the icon as an SVG image like this:
import {
Canvas,
ImageSVG,
useSVG
} from "#shopify/react-native-skia";
const ImageSVGDemo = () => {
// Alternatively, you can pass an SVG URL directly
// for instance: const svg = useSVG("https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg");
const svg = useSVG(require("../../assets/checkmark.svg"));
return (
<Canvas style={{ flex: 1 }}>
{ svg && (
<ImageSVG
svg={svg}
x={0}
y={0}
width={256}
height={256}
/>)
}
</Canvas>
);
};
and the checkmark.svg file will be:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 16.518l-4.5-4.319 1.396-1.435 3.078 2.937 6.105-6.218 1.421 1.409-7.5 7.626z"/></svg>
This one is simple, but I'm kind of lost.
How can I make the Text in the middle (vertical and horizontal) of the circle? Or everything in the middle of the Svg (and then the text will be in the middle of the circle)
const size = width < height ? width - 32 : height - 16
const strokeWidth = 25
const radius = (size - strokeWidth) / 2
const circunference = radius * 2 * Math.PI
return (
<Svg width={width} height={size}>
<Text>
Hey
</Text>
<Circle
stroke="#2162cc"
fill="none"
cx={size / 2}
cy={size / 2}
r={radius}
strokeDasharray={`${circunference} ${circunference}`}
{...{ strokeWidth, strokeDashoffset }}
/>
</Svg>
)
You will have to use Text component from react-native-svg as shown below. Hope this helps
import React, { Component } from "react";
import Svg, { Circle, Text } from "react-native-svg";
class Demo extends Component {
render() {
const width = 100;
const height = 100;
const size = width < height ? width - 32 : height - 16;
const strokeWidth = 25;
const radius = (size - strokeWidth) / 2;
const circunference = radius * 2 * Math.PI;
return (
<Svg width={width} height={size}>
<Text
stroke="purple"
fontSize="15"
x={size / 2}
y={size / 2}
textAnchor="middle"
>
Hey
</Text>
<Circle
stroke="#2162cc"
fill="none"
cx={size / 2}
cy={size / 2}
r={radius}
strokeDasharray={`${circunference} ${circunference}`}
/>
</Svg>
);
}
}
export default Demo;
Wrap the top SVG element in a View element, then, use position absolute to position the circle to act as a background (add 'padding' using top: 3, left: 3, if you need some padding for the circle not to be cut out).
Set alignItems:'center', justifyContent: 'center' on the most outer View element, to align the text to the center of the view.
Example
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<View style={{position: 'absolute'}}>
<Svg width={width} height={size} >
<Circle
stroke="#2162cc"
fill="none"
cx={size / 2}
cy={size / 2}
r={radius}
strokeDasharray={`${circunference} ${circunference}`}
{...{ strokeWidth, strokeDashoffset }}
/>
</Svg>
<Text>
Hey
</Text>
</View>
</View>
Note
This solution will work for any type of element you want to center, no matter how complex, not just for simple text.
I am struggling to align an SVG in React Native.
So far I have the following, however the SVG renders in the top-left of the component. I've been battling this for an hour or two.
const Like = () => (
<View
style={{
height: 45,
width: 45,
flex: 1,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Svg width={45} height={45} viewBox="0 0 25 25">
<Path
d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
fill="#f26aa3"
/>
</Svg>
</View>
);
You can import your image file directly.
Example:
import Image from '../assets/image.svg';
The style for image wrapper is
const styles = StyleSheet.create({
image: {
alignItems: 'center',
justifyContent: 'center',
},
});
In Return,
<View style={styles.image}>
<Image width={100} height={100} />
</View>
Path components do not have an adjustable x and y coordinate property, so you can't just provide these properties to center it. Instead, what we can do is create a definition that contains your Path component. Items declared inside of Defs tags are invisible until "used". Then we can utilize the Use component to use the defined component and provide x and y coordinates either as pixel values or percentages.
So, in your context you would end up with something like this:
import { Svg, Path, Defs, Use } from "react-native-svg";
const Like = () => (
<View
style={{
height: 45,
width: 45,
flex: 1,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Svg width={45} height={45} viewBox="0 0 25 25">
<Use href="likeButton" x="50%" y="50%" />
<Defs>
<Path
id="likeIcon"
d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
fill="#f26aa3"
/>
</Defs>
</Svg>
</View>
);