I have a requirement to display the polygon on the Map as follows
Can anyone suggest me if there is a way to do that ?
I managed to display using react-native-svg elements inside Marker
import * as React from "react";
import { Marker} from "react-native-maps";
import Svg, { Circle, Rect } from "react-native-svg";
export default function SvgComponent(props) {
const {
coordinate,
} = props;
return (
<Marker coordinate={coordinate} pinColor={pinColor}>
<Svg height="10" width="20" viewBox="0 0 100 100">
<Circle cx="50" cy="50" r="45" stroke="blue" fill="green" />
</Svg>
</Marker>
);
}
Related
ive got an svg im using as a header in my app, i want it to be responsive so it could fit any screen.
the thing is , there is a weird white space on the left and it still not responsive.
thanks!
svg code:
import Svg, { Path, Defs, LinearGradient, Stop } from "react-native-svg"
import { Dimensions } from 'react-native';
const { height, width } = Dimensions.get('window');
function SvgComponent(props) {
const viewBox = '0 0 '+width+' '+height*0.117;
return (
<Svg width={width} height={height*0.117} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<Path
d="M0 99V0h395v99c-19.439-4.282-85.706-7.897-195.26-7.897C85.186 91.103 19.266 94.718 0 99z"
fill="url(#paint0_linear_1134_4959)"
/>
<Defs>
<LinearGradient
id="paint0_linear_1134_4959"
x1={1.8637e-7}
y1={49.5}
x2={505.032}
y2={49.5}
gradientUnits="userSpaceOnUse"
>
<Stop stopColor="#7D55AE" />
<Stop offset={1} stopColor="#5E00D0" />
</LinearGradient>
</Defs>
</Svg>
)
}
export default SvgComponent ```
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>
I have a component that generates a square linear gradient using react-native-svg. When I pass in different hue colors, it stays the same color.
Things I tried:
Passing in hex instead of hsl colors and the issue still arises
What am I missing?
Expo Snack: https://snack.expo.dev/#paulwongx/react-native-svg_color_stop_issue
Gradient.js
import * as React from 'react';
import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
export default function Gradient({hue}) {
return (
<Svg width={128} height={128} viewBox="0 0 24 24">
<Defs>
<LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<Stop offset="0" stopColor={`hsl(${hue}, 100%, 74%)`} />
<Stop offset="1" stopColor={`hsl(${hue}, 100%, 55%)`} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill="url(#gradient)" />
</Svg>
);
}
App.js
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Gradient from './Gradient';
export default function App() {
return (
<View style={{flexDirection: "row", flexWrap: "wrap"}}>
<Gradient hue={20} />
<Gradient hue={50} />
<Gradient hue={100} />
<Gradient hue={150} />
<Gradient hue={200} />
<Gradient hue={250} />
<Gradient hue={300} />
<Gradient hue={350} />
</View>
);
}
Output:
Looking at the rendered code within Inspect Element, the components show different hues but they all render the same colors.
// first component
<stop offset="0" stop-color="hsl(20, 100%, 74%)"></stop>
<stop offset="1" stop-color="hsl(20, 100%, 55%)"></stop>
// last component
<stop offset="0" stop-color="hsl(350, 100%, 74%)"></stop>
<stop offset="1" stop-color="hsl(350, 100%, 55%)"></stop>
I think you have to give a unique id to the linear gradient. The problem is that the id is always the same.
import * as React from 'react';
import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
export default function Gradient({hue, id}) {
return (
<Svg width={128} height={128} viewBox="0 0 24 24">
<Defs>
<LinearGradient id={`gradient_${id}`} x1="0%" y1="0%" x2="100%" y2="100%">
<Stop offset="0" stopColor={`hsl(${hue}, 100%, 74%)`} />
<Stop offset="1" stopColor={`hsl(${hue}, 100%, 55%)`} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#gradient_${id})`} />
</Svg>
);
}
And then
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Gradient from './Gradient';
export default function App() {
return (
<View style={{flexDirection: "row", flexWrap: "wrap"}}>
<Gradient hue={20} id="first" />
<Gradient hue={50} id="second" />
</View>
);
}
I have a bug that has been giving me a lot of headaches, I intend to put .svg images into my project and I have tried several ways although it always gives me an error... I am using the lib react-native-svg and I am doing it the following way:
Error: The above error occurred in the </static/media/igesticon.731bb908.svg> component:
in /static/media/igesticon.731bb908.svg
MedicationScreen
import React from 'react'
import { View, Text, FlatList, StyleSheet, Dimensions } from 'react-native'
import Logo from "../../assets/igesticon.svg";
const MedicationScreen = () => {
return(
<View>
<Logo width={120} height={40} />
</View>
)
}
You can embed SVG the following way:
const MedicationScreen = () => {
return(
<View>
<svg width={120} height={40} >
<image href="../../assets/igesticon.svg" />
</svg>
</View>
)
}
See how it works in the snippet below:
<svg width="64" height="64" viewBox="30 0 200 200">
<image href="https://upload.wikimedia.org/wikipedia/he/a/a7/React-icon.svg"/>
</svg>
Absolutely, you can't import svg like that.
You can use badass packages like SVGR.
This package will auto transforms your svg to react component.
And you can use like this
import Star from './star.svg'
const Example = () => (
<div>
<Star />
</div>
)