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.
Related
I've set up and added a set of fonts under /assest/fonts/, created react-neative.config.js and linked these accordingly.
I can call the custom font in my styles but haven't been able to initialize a global setting for it.
Trying to do this through a component, like so
import React from 'react';
import { Text } from 'react-native';
export default props => <Text {...props} style={[{ fontFamily: 'Roboto-Regular' }, props.style]}>{props.children}</Text>
Then importing this either via App.js or a page component etc by calling CustomFont.
This doesn't render the font though (I'm stuck with the OS default or whatever style has been applied for that particular element). Any ideas?
I think that the problem here is that you inversed the order in the style object. You should assign to the style all the properties of props.style and then apply on them your custom font
import React from 'react';
import { Text } from 'react-native';
export default props => <Text {...props} style={{...props.style, fontFamily: 'Roboto-Regular'}}>{props.children}</Text>
Please correct assest to assets.
module.exports = {
assets: ['./assets/fonts']
}
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
I'm trying to style a View in React-native but I keep getting this Error
(undefined is not an object (evaluating 'styles.screen))
I made a simple code ...
import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
<Text>I am testing</Text>
</View>
);
const styles = StyleSheet.create({
screen: {
padding: 50,
},
});
}
I spent two hours trying to fix this
This should fix it:
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
<Text>I am testing</Text>
</View>
);
}
const styles = StyleSheet.create({
screen: {
padding: 50,
},
});
You need to move the const styles object outside of your App() function. The way you have it will return before initialising your stylesheet. An alternative is to place it before your return() inside App() but it is more standard to have it outside.
So, after troubleshooting for 3 hours and finding no info on this, I finally have the answer. I used a class template search bar React Native Search Bar and created custom styles for said search bar that was being exported from a file, in a folder named 'components' in a parent folder 'app' that was in my '[project]' folder. I imported the class to each screen as it was a header.
The following was an *incorrect import:
import {SearchComponent} from './app/components/searchComponent'
The correct import is:
import SearchComponent from './app/components/searchComponent'
(Because the SearchComponent was exported as a default component and not a named component in the searchComponent.js file.)
Quick reference to default vs named exports
After correctly importing the component, make sure your styles within that component's folder are named correctly and do not share style names with other styles in your destination file; i.e., name of fileA:styleA != name of fileB:styleA.
After checking your exports and imports very, very carefully and checking your style names with the same detail it worked – and it should work for you, as well.
For displaying data, i will used "react-native-render-html",
But for editing records In my React Native app, I am pulling in JSON data that has raw HTML elements like thishello.
so Is there any way to convert html text inside textfield?
Screenshot:
https://prnt.sc/n7ejbw
Use React-native-htmlView
the usage of this plugin is pretty straight forward, even I have implemented this the same way as it is in example below
this example is from the documentation
import React from 'react';
import {StyleSheet} from 'react-native';
import HTMLView from 'react-native-htmlview';
class App extends React.Component {
render() {
const htmlContent = `<p>♥ nice job!</p>`;
return (
<HTMLView
value={htmlContent}
stylesheet={styles}
/>
);
}
}
const styles = StyleSheet.create({
a: {
fontWeight: '300',
color: '#FF3366', // make links coloured pink
},
});
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.