I am trying to make an app in react native and am starting to at least place an image as the screen when you click on the app.
The problem is that the app is unable to find the image or the javascript file that I call. I tried to change the location of the files and it seems to not be doing anything.
Here is the code for the Start Screen file
import React, {Component} from 'react';
import {Image} from 'react-native';
const StartScreen = () => (
<Image source = {require('./src/assets/images/StartScreen.png')} />
)
export default StartScreen
Here is the code for the App.js file
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import StartScreen from './src/screens/StartScreen'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<StartScreen />
</View>
);
}
}
I should be getting the picture but am instead getting told that the picture or the file do not exist. The App.js file is in the top level of the folder, while the picture and StartScreen.js are in a src folder.
It sounds like your problem lies in your folder structure & the path you're using to require your image.
From what I can gather, your StartScreen.js file is in a screens folder (which is in src), and your image is in an assets folder (which is also in src).
So in your StartScreen component your relative path for your image is wrong. Take a look here for an explanation of how relative paths work.
Try the below:
<Image source = {require('../assets/images/StartScreen.png')} />
Related
I'm creating a react app. I have an image folder with a few files. In order for React to render the image I have to import it like I import other modules. Something like this:
What I want to do is import the whole image folder, and then find a way to access each file in my Component. for example:
import img from '.../img'
In my JSX, I want to be able to access each of the files from the imported image folder.
Is it possible to do?
You still need to import those images in some place. For cleaner syntax in your main component file, I will group the image files in 1 file
//grouping images in one module. Let's say it is image.js
import imageA from <your-patha>
import imageB from <your-pathb>
import imageC from <your-pathc>
export default {
imgA: imageA,
imgB: imageB,
imgC: imageC
}
//Home component
import Images from '<image.js path>'
const Home = () => {
return (
<img src={Images.imgA} //...other props />
)
}
The best way to do this is you can put all your images in the public folder and refer like below on component.
<img src="/image.jpg" alt="image" />
I am creating a solitaire game in React. I have a Card component that renders a card to the screen based on the state of its suit, number etc. At the top of Card.js is a series of imports for image sources like so:
import cardFrontTexture from '../assets/card_front.png'
I have many of these imports so I figured I would move them all to another JS file and call it CardImages.js. I changed Card.js to import CardImages.js instead.
But I am having trouble figuring out how to export all of the imported images inside of CardImages.js
Essentially, is there a way to export everything all imports in a file such that I don't have to import everything individually by name in Card.js? I want to avoid doing import { image1, image2, image3... } from './CardImages'; if possible.
// Card,js
...
import * as cardImages from './CardImages';
...
export class Card extends Component {
render() {
return (
<div>
<img
onClick={this.handleClick}
className=""
src={ cardImages.image1 } // This is what I figured would work
/>
...
</div>
);
}
}
// CardImages.js
import image1 from '../../assets/image_1.png';
import image2 from '../../assets/image_2.png';
import image3 from '../../assets/image_3.png';
...
export ? // Not sure what to put here
I figured it out. Thank you Alif for pointing me in the right direction.
I changed CardImages.js to this:
export const image1 = require('../../assets/image_1.png');
export const image2 = require('../../assets/image_2.png');
export const image3 = require('../../assets/image_3.png');
...
And I left Card.js as shown in the original question. I was able to use import * as cardImages from './CardImages.js'; and avoid importing each export via its name.
I'm new to React Native and I wanted to implement a floating button in my React Native App like the one here: https://bit.dev/khaledebdelli/components/fancy-floaty-button
I tried importing the package for the button using npm from Terminal but it said the file didn't exist so I saved the scss file provided in my project directory.
I exactly followed the instructions from this link: https://github.com/kristerkari/react-native-sass-transformer in order to use scss files in React Native.
However, the floating button did not appear in my app. Here is what I tried to do in code:
Inside BackButton.js:
import 'react-native-gesture-handler';
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '#react-navigation/native';
{/* CSS file imported in below line of code */}
import styles from './styling/floatButton.scss'
export default function BackButton(props) {
const navigation = useNavigation();
console.log(props.title)
return (
<TouchableOpacity
style={styles.btn}
onPress={() => navigation.navigate(props.to, props.toTransfer)}
>
<Text>
{props.title}
</Text>
</TouchableOpacity>
);
}
Inside hash-tables.js where I imported BackButton.js and rendered the BackButton component:
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import BackButton from '../Components/BackButton';
{*/Below line of code is inside the render function of a class component/*}
<BackButton title='Previous' to='Topics' />
This is what I see in my app instead of the floating button:
Would appreciate it if someone could point out where I may have gone wrong :)
Im guessing you don't have sass installed correctly, I usually just do: "npm install node-sass" in the front-end and works everytime :)
I am adding multiple images in my web page by placing each image in same directory that of components (see screenshot) How can I place the image files in another folder and then access them inside my components.
content.js:
import React, { Component } from 'react';
import java from './java.png';
import neural from './neural.png';
import future from './future.gif';
import neuralnet from './neuralnet.jpg';
import dsa from './dsa.png';
import dl from './dl.jpg';
import ml from './ml.jpg';
import python from './python.png';
import ai from './ai.jpg';
<img className="futuregif" src={future} alt="gif" height="240" width="320"></img>
<img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
<img className="neuralcardimg" src={neural} alt="neural" height="65" width="65"></img>
and so on.. for all other images
Components and image files are getting mixed together is there any other specific way to do it by making a image folder but then what should be the path in src="".
File structure:
To clarify my comment.
Create a directory assets containing all your assets like images.
Then import the right path and load your content like:
import neural from './assets/images/neural.png';
class myComponent extends Component {
render() {
return (<div><img src={neural} alt=""/></div>);
}
}
In my point of view you can create a js file and export const imageName. in const you can specify your image path.
constant.js
import React from 'react';
import java from './java.png';
export const javaImg = java;
Then in your component file you need to import that js file and you can use those const according to your requirement.
Component
import constant from './constant';
class x extends Component {
constructor(props) {
super(props);
console.log(constant.javaImg);
}
}
export default x;
If you are importing images in same component it'll work but the component will become a lengthy and complex looking.
so my suggestion is like this.
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));