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>
)
Related
i am trying to learn react native but i faced with this error:
Element type is invalid: expected a string(for built-in components)or a class/function(for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in or you might hace mixed up default and named imports.
Check the render method of 'GoalInput'(I am sure i didn't made a typo first'l' and after that 'i' letter)
my App.js code:
import { useState } from "react";
import { StyleSheet, View, FlatList, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";
return (
<>
<StatusBar/>
<View>
<Button onPress={startAddGoalHandler}/>
<GoalInput
visible={modalIsVisible}
onAddGoal={addGoalHandler}
onCancel={endAddGoalHandler}
/>
</View>
</>
);
my GoalInput.js code:
import { useState } from "react";
import { StyleSheet,Button,TextInput,View,Model,Image} from "react-native";
const GoalInput = (props) => {
const [enteredGoalText, setEnteredGoalText] = useState("");
const goalInputHandler = (enteredText) => {
setEnteredGoalText(enteredText);
};
const addGoalHandler = () => {
props.onAddGoal(enteredGoalText);
setEnteredGoalText("");
};
return (
<Model visible={props.visible} animationType="slide">
<View>
<Image
source={require("../assets/Images/goal.png")}
/>
<TextInput
onChangeText={goalInputHandler}
value={enteredGoalText}
/>
<View>
<View>
<Button title="Add Goal" onPress={addGoalHandler} color="#b180f0" />
</View>
<View>
<Button title="Cancel" onPress={props.onCancel} color="#f31282" />
</View>
</View>
</View>
</Model>
);
};
export default GoalInput;
I have deleted the style parts for keep question simple and even i search a lot couldn't find the error source on my own thanks for all the attention.
by the way i am using 'expo'
There's no Model in react native , its Modal
SO chnage this first :
import { StyleSheet,Button,TextInput,View,Modal,Image} from "react-native";
And also where youve used in
return(
<Modal>
</Modal>
)
Hope it helps. feel free for doubts
After I read several answers, but I couldn't come up with a solution.
I need to touch on the icon to put the focus on the InputTextMask, but an error occurs:
refInput.current.focus is not a function
import React, {useRef} from 'react';
import {View} from 'react-native';
import {TextInputMask} from 'react-native-masked-text';
export default ({Icon, placeholder, value, onChangeText, mask}) => {
let refInput = useRef(null);
const getFocusInput = () => {
refInput.current.focus();
};
return (
<View>
<Icon width="32" height="32" fill="white" onPress={() => getFocusInput()} />
<TextInputMask
ref={refInput}
placeholder={placeholder}
value={value}
onChangeText={onChangeText}
type={mask}
/>
</View>
);
};
I'm using React Native 0.64 and React 17.
The thing is that react-native-masked-text ref return you a MaskedText class, not the TextInput itself, to get the TextInput you will need to use on method as they show in their documentation, just change:
refInput.current.focus();
to
refInput.current.getElement().focus()
hope it solves your problem.
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"
/>
);
I am trying to built a guided tour for my app using react native copilot
https://github.com/okgrow/react-native-copilot
and i cannot figure out how to use a already built component inside the its CopilotSteps as mentioned in the tutorial.
This is the my code so far and it gives me the following error
<CopilotStep
text="This is a hello world example!"
order={1}
name="hello"
>
{({ copilot }) => (
<Card snow to={`${basePath}/account`} {...copilot}>
<Row inline justify="center" fluid>
<Block inline justify="center">
<FIcon name="shield" size={25} />
</Block>
<Block justify="center">
<P compact>Account and Security</P>
<P compact small helper>
Edit Your Account Information
</P>
</Block>
<Block inline justify="center">
<FIcon name="chevron-right" size={25} />
</Block>
</Row>
</Card>
)}
</CopilotStep>
error =>
D:\My Work\Company Projects\Ongoing\ZappyFoods\Mobile App\zappyfood_app\node_modules\react-native\Libraries\Core\ExceptionsManager.js:63 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
what should i do to get this code run proerly
You have to make the component "walkthroughable", so for example if my original component was a simple TouchableOpacity button.
<TouchableOpacity
onPress={this.callFunction}
>
<Icon name="photo" type="FontAwesome" />
</TouchableOpacity>
Then to make it work with copilot first import walkthroughable.
import {
copilot,
walkthroughable,
CopilotStep
} from "#okgrow/react-native-copilot";
Then call the walkthroughable function passing our TouchableOpacity component.
const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);
Finally add the copilot step and use the new Walkthroughable component in place where you would've used TouchableOpacity.
<CopilotStep
text="Hey! This is the first step of the tour!"
order={1}
name="openApp"
>
<WalkthroughableTouchableOpacity
onPress={this.callFunction}
>
<Icon name="photo" type="FontAwesome" />
</WalkthroughableTouchableOpacity>
</CopilotStep>
So the entire file could look like
import {
copilot,
walkthroughable,
CopilotStep
} from "#okgrow/react-native-copilot";
import { Icon } from "native-base";
import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
const WalkthroughableTouchableOpacity = walkthroughable(TouchableOpacity);
class Example extends Component {
componentDidMount = async () => {
this.props.copilotEvents.on("stepChange", () => {});
this.props.start();
};
callFunction = () => {
console.log("Button Pressed.");
};
render() {
return (
<CopilotStep
text="Hey! This is the first step of the tour!"
order={1}
name="openApp"
>
<WalkthroughableTouchableOpacity onPress={this.callFunction}>
<Icon name="photo" type="FontAwesome" />
</WalkthroughableTouchableOpacity>
</CopilotStep>
);
}
}
export default copilot({
animated: true,
overlay: "svg"
})(Example);
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