I'm a bit perplexed on what should be a simple fix. I'm running a react-native project on version 0.27.2, and all of my ios.js files successfully import Stylesheet except one.
The import looks like this:
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
ScrollView,
Text,
View,
} from 'react-native';
import {
Cell,
CustomCell,
Section,
TableView
} from 'react-native-tableview-simple';
const styles = Stylesheet.create({
container: {
backgroundColor: 'rgb(20,25,30)',
}
}
);
The Stylesheet.create({}) function is what ultimately causes the error Can't find variable Stylesheet to be thrown. However, I've declared styles the same way in every other file with the same imports, and those rendered the styles with no error.
The only thing that's different in this file is that multiple classes have been declared. I'm new to React, so I don't know if this could cause an issue. Does anyone have any idea what could be causing this?
You mixed the case, you need to write
const styles = StyleSheet.create({
like you named it when you imported it.
I just run into same issue and found out that types are in different module. If you have correct case(StyleSheet) and still doesn't work, it's very likely that you do not have type module installed. Just execute this line in cmd -
npm install --save #types/react-native
It should do the trick.
Related
So, I'm new to React Native, and I'm trying to build out a basic app, but every time I launch it on my android emulator, I get a syntax error telling me that 'none of these files exist" and it is referring to an image. Here is a screen capture of the emulator, as well as my vs code workspace.
Here is the code if anyone wants to copy it and mess with it.
WelcomeWindow.js:
import React from 'react';
import { ImageBackground } from 'react-native-web';
function WelcomeWindow(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
}
})
export default WelcomeWindow;
App.js:
import WelcomeWindow from './app/screen/WelcomeWindow';
export default function App() {
return (
<WelcomeWindow />
);
}
I'm certain the path is correct, I'm thinking this is more of a bug somewhere, and I don't really know how to fix it. I've tried looking for a solution, and I've come across a sources saying this is specifically an issue when using android studio, which I am using. Again, I'm not sure about that. If anyone can help me out, it would be greatly appreciated!
I figured out what was going on. For some reason, the automatic import for ImageBackground is from react-native-web.
import React from 'react';
import { ImageBackground } from 'react-native-web';
It should only be react-native.
import React from 'react';
import { ImageBackground } from 'react-native';
[enter image description here][1]Problem: no CSS in output.
Methods tried to fix:
renaming styles.css to styles.module.css -- fail
manual load Webpack in terminal even though it shouldn't need it with create-react-app -- fail
Tried the syntax - import styles from ./styles.module.css; - and also just import ./styles.module.css; and import styles.module.css; -- fail
So I've been googling for hours and nothing has seemed to do the trick. A link is provided with what the code. when it runs, the terminal clearly says line 4 is defined but never used as is evident by the greyed out line in visual studio code.
https://i.stack.imgur.com/X4PdW.png
https://i.stack.imgur.com/cdKYB.png
I appreciate any help. Thank you in advance
What i have seen you did was import styles from "./styles.module.css" but not used styles
As well as import "./styles.module.css" not sure this will work as well because your styles will be scoped. (This i did not test it is just assumption)
This is from create react app docs
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
If you add module in file name of styles.
Use import styles from './Button.module.css'; and then use styles to access content in file something like styles.[class-name-from-Button.module.css]
If you just have Button.css just call import './Button.css'; somewhere on top, do not add module in between Button and css
So I tried to use some image inside my javascript code in React Native. This is are my folders:
enter image description here
As soon as I try to import it with:
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { SimpleAnimation } from 'react-native-simple-animations';
//here i try to import my picture
import iconBright from 'testproject/pictures/iconBright.png';
export default function Welcome() {
return (
<View style={styles.container}>
<SimpleAnimation delay={500} duration={1000} fade staticType='zoom'>
//also here i am trying to import it but same error
<Image source={require('testproject/pictures/iconBright.png')}></Image>
</SimpleAnimation>
</View>
);
}
const styles = StyleSheet.create({
container: {
},
});
And whe I compile it I get always this error:
Unable to resolve "pictures/iconBright.png" from "screens\Welcome.js"
I tried many different ways from the internet and other stackoverlow suggestions but nothing worked. I also tried:
./pictures/iconBright.png
../pictures/iconBright.png
But nothing works. Can someone help me or explain me how this path-system works, because I havent found any usefull guides for it yet.
EDIT:
here the error on the device:
Unable to resolve module `../pictures/iconBright.PNG` from `screens\Welcome.js`:
None of these files exist:
* pictures\iconBright.PNG(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
* pictures\iconBright.PNG\index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
You images are in .PNG capital and in the import it's .png
I would rename the images to .png and try
I was putting together a react-native app and noticed one glaring annoyance. Every time I wanted to use a theme when creating a stylesheet, I had to import the theme from an external file to use it.
Something like this
import { StyleSheet } from 'react-native'
import { theme } from 'path-to-theme/theme.js'
const styles = StyleSheet.create({
container: {
backgroundColor: theme.background
}
})
Coming from a React background, what I was wanting to do is get the theme provided to the constructor of sorts, so I don't have to do an import every time. Kind of like material-ui does it
import { StyleSheet } from 'custom-stylesheet-path/stylesheet.js'
const styles = StyleSheet.create(theme => {
container: {
backgroundColor: theme.background
}
})
But I'm not sure how to go about the implementation. Especially providing the theme to the stylesheet constructor. Anybody got any experience with this? Even just a starting point
NativeBase is able to implement themes in react native. The way that it does it, is to create the standard set of react native components and then require that you import those elements from native-base rather than react-native.
Example:
import { Label } from 'native-base'
Rather than:
import { Text } from 'react-native'
My code errors in NativeEventEmitter.js, and the stack shows PushNotificationManagerIOS.js as the lower file. I never used any notification features in my app, what's wrong?
Though sometimes it might be related to a misinstalled library, replacing:
import * as ReactNative from "react-native";
with:
import { Text, View, /* and the other classes you want to use*/ } from "react-native";
fixed it for me. Remember to change ReactNative.Foo to just Foo