I get an error with this code. However, changing to react-native's removes the error. Can you use div with react-native? If not, why is this error so obscure...?
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
Text,
View,
} = ReactNative;
let Auto = React.createClass({
getInitialState: function() {
return { value: 'Ma' }
},
render: function() {
return (
<div className="fuck-react">
Blah blah blah
</div>
)
}
});
No you cannot use div tag in react-native. Since, react-native is based on JSX syntax which are automatically dispatched to native components by abstract Dom parser. you can get your answer here:https://facebook.github.io/react-native/docs/tutorial.html
Also, react-native is upadated to new version that is 0.29 , you probably should ignore old ECMA script and use new ECMA script for javascript syntax. Since, react-native uses reactjs for its javascript so better learn from here: http://reactjs.net/guides/es6.html
Instead of DIV use View.
<View style={{flex: 1}}>
<Text>Blah blah blah</Text>
</View>
You can not use in react native. Use native component instead.
<View>
<Text>text text text</Text>
</View>
Do not forget to import before with:
import {
Text,
View
} from 'react-native';
You may be using ReactJS component in a React Native App. I accidentally installed a component with <div> tags in React Native project.
Related
i installed tailwind-rn for my react native project
i did the configuration and used this syntax provided in the console after installation
import {useTailwind} from 'tailwind-rn';
const MyComponent = () => {
const tailwind = useTailwind();
return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
};
but for me i have a class component so i did this
render() {
const tailwind = useTailwind();
return (
<View style={tailwind("style classes...")}>
...
<View/>
);
}
and i got this error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
i searched how to use tailwind-rn for a class component and i didn't find something usefull.
Code:
import { ImageBackground,StyleSheet } from 'react-native';
function WelcomeScreen(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background:{
flex: 1
}
});
export default WelcomeScreen;
Output:
To explain why:
import * as React from 'react';
fixed your problem...
You are not using just plain JavaScript in this file.
Anything that looks like a HTML tag e.g. <ImageBackground> is JSX and needs to be transpiled to plain JavaScript by babel (or some other transpiler).
Your transpiler needs use the React library for JSX and therefore any files using JSX require this import.
I'm developing my first app with React Native and i'm stuck in a problem with dynamic component name.
I call a class named IconAccounts with two props: icon and bgColor. The props icon represent the component (a react native SVG component) that need to render inside IconAccount.
Everything should work but i have an error:
Invariant Violation: View config not found for name iconName
IconAccount :
import iconName from "../path/to/iconName"
someMethods(){}
render(){
const TagName = this.props.icon
return (
<View style={{backgroundColor: '#'+this.props.bgColor}}>
<TagName/>
</View>
)
}
Call of IconAccount :
<IconAccounts icon="iconName" bgColor="#ffffff"/>
icon code example (generate with svg-to-react-native-cli)
export default function iconName(props) {
return (
<Svg>
//SvgThings
</Svg>
);
}
I'm developing an social apps whereby user can simply attach a website URL, and when other user click on it it will show a webpage within the apps.
For example as below
I'm using react navigation, is there a way can achieve this ?
RN > 0.59
Use react-native-webview.
Use WebView.
Example from official link.
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
It will be better use WebView in your component having header and basic control as backbutton and closebutton.
I want to turn this section of code into a reusable component so I don't have to write the same thing out 5 times.
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
The new component I made to mirror this is as follows:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButton = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButton };
After importing this component ImgButton I call it with this block of code:
<ImgButton
onPress={console.log("pressed")}
img={'../img/button_australia.png'}
/>
I get the error: "Requiring unknown module '../img/button_australia.png'"
I assume I've gone wrong when passing the string down as a prop but from the examples I've looked I don't see what's wrong with what I've done. Thanks :)
As discussed in this react-native issue, it's not possible to require assets or javascript modules with dynamically generated names, e.g. variables.
This is because the React Native packager uses require (and import) statements to generate the module and asset bundles at compile-time, so the value of the variable is not known.
The simplest way is to just pass the image source to the component directly:
<ImgButton
onPress={console.log("pressed")}
img={require('../img/button_australia.png')}
/>