I ran the AwesomeProject from environment setup section and I tried to display an image with this code in App.js:
import { View, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={require('./assets/favicon.png')} />
</View>
);
}
I tried all solution from this post already...
Where the folder structure is:
assets/
favicon.png
App.js
package.json
But nothing displays on the front-end, blank screen (I am watching the change on my web browser).
Related
This is my second go around installing tailwind rn for a project and I simply can't get it to work.
I ran npm install tailwind-rn followed by npx setup-tailwind-rn and I'm running it in development mode after changing the tailwind.config.js to scan the only app file:
content: ["./App.js"],
The App.js file in the meantime looks like this:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { useTailwind } from 'tailwind-rn';
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View>
<Text style={tw('text-blue-600')}>Hello world</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
My tailwind.css and tailwind.json are both populated with defitions for .text-blue-600 and I receive no errors when running, but none of the styles I apply work. Very confused.
I would recommend using tailwind-react-native-classnames from jaredh159. No setup or extra configurations needed after installation. It works out of the box.
This package gives the flexibility of mixing styles.
Install using yarn add twrnc or npm install twrnc.
Get more info from the GitHub page
When internet access is on, useAssets returns the localUri as expected. But after going offline, it returns undefined. Even the cached file still exists in the cache folder, it does not reference it. The code is below:
import React from "react";
import { useAssets } from "expo-asset";
import { Image, View } from "react-native";
export default function Avatar({ imageUrl}) {
const [assets, error] = useAssets([imageUrl]);
return (
<View style={[styles.avatar, style]}>
<Image
source={{
uri: assets[0].localUri
}}
/>
</View>
);
}
So I want to access downloaded and cached images offline with useAssets hook but it seems that expo-assets has not such feature, isn't it?
You need to install the 'expo-asset' package.
expo install expo-asset
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 have a folder called "app" which contains a "views" folder. Inside views I have a "Home.js" file in which I've defined a class component "Home". I want to use the Home class in another file "App.js".
The following code is what's in the Home.js file.
import React from 'react';
import {View, Text} from 'react-native';
export class Home extends React.Component {
render () {
return (
<View>
<Text> Some text </Text>
<Text> Some other random text </Text>
</View>
);
}
}
And this is what's in the App.js file.
import React from 'react';
import { Home } from '.app/views/Home.js';
export default class App extends React.Component {
render () {
return (
<Home />
);
}
}
When I try and run it with expo, I get an error "Error: undefined Unable to resolve module '.app/views/Home.js'"
No matter the path I try to bring Home from, I get the same error, even if I copy and paste the path directly from the Home.js file. I'm curious, I wanna know if this is a code error, or maybe the way I'm bringing up the path is wrong? Any ideas as to how to solve this? Thanks a lot.
You need to get in your folder like this:
'./app/views/Home.js';
I can see my Text: I am HomeScreen as well when i compile the project. My problem is when adding a Image , it shows the error HomeScreen.js: Unexpected token .
I can't see my code has any problem . Is any one can tell me what step i miss it ? That would be appreciated.
Here is my HomeScreen.js:
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home'
};
// When i add Image , i will get a error.
render(){
return (
<View>
<Image
source={require(../img/home.png)}
fadeDuration={0}
style={{width: 20, height: 20}}
/>
<Text>I am HomeScreen</Text>
</View>
);
}
};
export default HomeScreen;
Here is my root:
source={require(../img/home.png) should be source={require('../img/home.png') however whenever u add images u need to restart web server .just restart by react-native start
For your webpack to run I think all of your js files should be in components folder try replacing your HomeScreen.js file into components folder and run it again .Hope it works
It is because you missed single quote
source={require('../img/home.png')}