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
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';
I've been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.
This is the simplest I could reduce the issue down to.
https://codesandbox.io/s/rough-tree-fqj7o
Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.
As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.
The things I've found that fix this are:
Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
Commenting out the TopNav component in main.js (...also not an option for us)
Importing the TopNav component in App.vue with a relative import or #/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or #/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I'd prefer the #/components shorthand and that still leaves the root cause undetermined.
I'm using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.
I've been spinning my wheels for a week trying to figure this out and just...cannot. Does anyone have any ideas for what may be happening?
It seems like a race condition in Webpack, using parallel builds, but I'm honestly not sure. I can see CreateDogsModal being pulled in from two places, starting from main.js:
'main.js'
- import 'App.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
- import 'router/index.js'
- import '#/views/Dogs/DogsCreate.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
One workaround is to remove the race by making the CreateDogsModal an async component in DogsCreate:
// DogsCreate.vue
import { defineAsyncComponent } from "vue";
import { CreateTemplate } from "#/components";
export default {
name: "DogsCreate",
components: {
CreateTemplate,
CreateDogsModal: defineAsyncComponent(() => import("#/components/CreateDogsModal.vue")),
},
};
demo
I am not sure if anybody tried redux with framework 7 react template before but I think this is a more general error. I successfully install and run framework 7 react template, then I wanted to try redux. I installed redux, react-redux and tried to integrate todoList example in redux website into same template. I get unexpected character error for some files and I do not know why this happens.
I tried to remove brackets when importing, or added ; end of import lines but didnt change anything.
I copy and paste code directly from redux website, maybe some hidden character problem, how can I test and get rid of that ?
./src/components/Footer.js
Syntax error: D:\client\src\components\Footer.js: Unexpected character ‘’ (4:0)
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
const Footer = () => (
./src/reducers/index.js
Syntax error: D:\client\src\reducers\index.js: Unexpected character ‘’ (5:0)
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
export default combineReducers({
If you copy/paste directly from the redux examples it looks like there is a zero width space on the blank lines. In the top right hand corner of the examples there is a copy icon which will copy the actual source code, try that.
This is a general ES6 question, but I've encountered it in the context of React Native. The basic problem is that I want to override some components that I usually import from the 'react-native' module with my own components. My method for doing this looks like the following:
Instead of requiring components with import { Text, View, etc } from 'react-native'
require them like this: import { Text, View, etc } from './ui_components'
where ui_components.js looks something like:
export * from 'react-native'
The issue is, how do I add my own components to this export? Ideally I'd be able to add them in ui_components.js by doing something like this:
import * as RN from 'react-native'
RN.Text = myTextComponent
RN.View = myViewComponent
export * from RN
But this doesn't quite work. Any ideas?
You need to import React Native's component and reexport it, with or without extensions from your side - it's up to you.
But remember - don't ever override React's internals (or any other's internals). Components are composable, yay!
For example, here, I am creating my custom Text component cause I want all texts in my app to be red by default. Also I want it to be configurable if I need different color for title/subtitle/whatever...
import React from 'react';
import { Text as NativeText } from 'react-native';
export default function Text({ style, ...props}) {
return <NativeText style={[ { color: 'red' }, style]} {...props} />
}
Got an idea?
Good, now to folder structure...
ui_components
| - index.js
| - Text.js
// Text.js
// See example above...
// index.js
export { default as Text } from './Text';
// In your app
import { Text } from './ui_components';
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.