i need to show svg files and find react-native-remote-svg package. but i cant find it and not sure how to solve it anyone can help about that?
there is the warning
import {View, Text} from 'react-native';
import Image from 'react-native-remote-svg';
const App = () => {
return (
<View>
<Image
source={{
uri:
'https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg',
}}
style={{width: 200, height: 532}}
/>
</View>
);
};
export default App; ```
Use this react native library
https://github.com/vault-development/react-native-svg-uri
it depends on the react-native-svg library so you need both
For rendering remote SVG images better way is using https://github.com/react-native-svg/react-native-svg.
For your case:
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="200"
height="532"
uri="https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg"
/>
);
Related
I am a beginner in React Native. I started learning it today. I was trying to display an image on the screen but I am having some problems here.
my Code
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg' }} />
</View>
);
}
when I go to this URL in the browser it shows the image, but no success in the device.
The same image when I download and use it locally, then it works
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={require('./assets/myViewScene.jpg')} />
</View>
);
}
Any help is appreciated.
You will have to provide Dimensions to the remote images in order to show them. As mentioned in the docs here, Unlike with static resources, you will need to manually specify the dimensions of your image for remote images.
For Example -
<Image source={{ uri: Some_Remote_Image_URI }} />
// This will not load and the image would not be shown.
<Image source={{ uri: Some_Remote_Image_URI }} style={{ width: 100, height: 100 }} />
// This will load perfectly and the image will be shown.
<Image source={require("./path_to_local_image")} />
// This will load perfectly and the image will be shown even if you don't provide the Dimensions.
Working Example Here
For people coming from Google: if your image is an SVG, check SvgUri component from react-native-svg:
<SvgUri
width="50"
height="50"
uri="https://images.com/your.svg"
/>
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>
)
I am using React Native version 0.63.4. There is a bug that I just noticed and that didn't happen before. It does -width: '100%' - as if I added it myself to the style of any object (Text, View) I created. This was not the case before. For example, I want to paint the background of a text red. But just as much space as it is. Not all. I would add -width: '100%' - if I wanted this. But now it adds this automatically. What is the cause and solution?
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
<View style={{flex: 1}}>
<Text style={{marginTop: 80, backgroundColor: 'red'}}>EXAMPLE</Text>
</View>
);
};
export default App;
Try this way because It will take full width by default, If you want to wrap then try adding alignSelf:"flex-start" like
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
...
<Text style={{... , alignSelf:"flex-start"}}>EXAMPLE</Text>
...
);
};
export default App;
I am developing a react-native app. I have a bunch of SVG files locally in my project. I would like to use my custom component to render Text and SVG image.
Here is my custom component which is supposed to render a Text and a Image for static SVG file:
import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<Image source={svgFile} />
<Text>{text}</Text>
</View>)
}
In my screen I try to show several MyComponent each renders a specific SVG image:
<View>
<MyComponent
svgFile={require('../assets/images/tiger.svg')}
text="tiger"
/>
<MyComponent
svgFile={require('../assets/images/elephant.svg')}
text="elephant"
/>
...
</View>
But only text is shown, the image is not shown. How to show a SVG file with a Image component ? I need to have it work on both Android and iOS.
The Image component in React Native doesn't support SVG rendering. I would suggest utilizing react-native-svg to render your SVGs in your custom component. Import your svg file into the component, and render it using <SvgXml />:
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
<SvgXml xml={svgFile} />
<Text>{text}</Text>
</View>)
}
I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.
Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);
You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example