I'm trying to see what's wrong with my code, as the IOS simulator is showing an error. The issue is I am lost in the debug world of JavaScript. In my limited experience, other programming languages usually said something like "Error at line 6 column 8" or similar. Here it just says text string must be rendered within a Text component in the simulator, and VS Code is completely silent. When I try to use the 'Attach to Packager' feature in the debug module, it says:
An error occurred while attaching debugger to the application. Seems to be that you are trying to debug from within directory that is not a React Native project root (error code 604) (error code 1410). Here are a few screenshots. How can I make it so that it tells me whereabouts the error is. Do interpreters not have this feature?
I also tried to debug from Chrome, but there is also does not say which line has the issue.
Here is the code and the errors:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Text, View, SafeAreaView, Image, ImageBackground } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Text>Hire!</Text>
<ImageBackground> source={require("./assets/favicon.png")}</ImageBackground>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
An error occurred while attaching debugger to the application. Seems to be that you are trying to debug from within directory that is not a React Native project root.
If so, please, follow these instructions: https://github.com/microsoft/vscode-react-native#customization (error code 604) (error code 1410)
"text string must be rendered within a <text> component"
Related
I'm newly developing in react native.
To start I used npx react-native init hello_world --template react-native-template-typescript to create the basic code and then I replaced app.tsx with this code:
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
const App = () => {
return (
<View style={styles.helloWorldContainer}>
<Text style={{fontSize: 18}}>Hello, world!</Text>
</View>
);
};
const styles = StyleSheet.create({
helloWorldContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
And these are the errors that I get when I am in debug mode:
If I remove the style of the component Text the error disappears.
My question is how can I fix the error while keeping the style in the component Text.
I saw that chrome has a lot of errors, exist another better debugger?
As what Lucas Azambuja Santos referred to, it's a bug in react-native 0.65.* check out the new issue https://github.com/facebook/react-native/issues/32197
it should be fixed with 0.66, to workaround downgrade to 0.64.x and rebuild:
cd android && ./gradlew clean cleanBuildCache
I made expo initial app
My code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NfcManager, {NfcEvents} from 'react-native-nfc-manager';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
When I trying to import NFC manager Im getting error: Native module cannot be null
screenshot
Google said that its error with IOS notifications, Im coding from windows VScode and cannot link push notifications, how I can solve this error? I cannot code without expo because this is only one way to simulate my app from windows on iphone as I understand
I solve it: expo not allowing additional libraries
I am experiencing some difficulty when using flex for layout in React Native. I have reduced the behaviour I am experiencing down the the following problem.
I have one container which fills the available space since it has flex set to 1. I then have a child within that container which should fill the container, so I have set it's flex to 1. I also want the container to have padding at the top. I would therefore expect the child to fill all of the parent apart from the top 20%. However, what I am seeing is that there is equal padding at the top and bottom of the container around the child (as if I had set paddingVertical instead of paddingTop).
Is anyone able to explain why this behaves as it does? I am also intrigued by the behavior I saw when creating a snack to illustrate this problem. On the iOS and Android simulators I am experiencing the behaviour which seems erroneous to me whereas the Web view seems to work as I would expect with only a gap at the top.
Thanks!
Snack example code
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.child}>
<Text>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'green',
paddingTop: '20%'
},
child: {
flex:1,
backgroundColor:'red'
},
});
Android - 'broken' behaviour
Web - 'expected' behaviour
I'm trying to set a background Image in React-Native but it is not appearing on my screen. However, the text inside <ImageBackground></ImageBackground> is getting displayed.
Here's my code:
import React, { Component } from 'react';
import { View, ImageBackground, Text, StyleSheet } from 'react-native';
type Props = {};
export default class App extends Component {
render() {
return (
<ImageBackground style={styles.container} source={require("./Assets/bg.png")}>
<Text>Inside</Text>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%'
}
});
Here is my directory structure below. You can see there bg.png exists.
And Here is the output that I'm getting.
Here is my bg.png
I can't find what's wrong with this. Everything seems ok, Also I'm not getting any error message. Please Help
Here's the link to the expo.
It appears that there happens a crash in android for large images the bitmap becomes out of memory.
Therefore a workaround for that is to resize the image and use it.
For more info checkout this link
I am learning react native, so when the program crash it only shows 15:31:42: Failed building JavaScript bundle that's all it says. So is there any file or tools i can use to look for more detail error like Eclipse or dotCMS log file or which line of my code have syntax error ?
Hope This example will help you..
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
state = {
items: [],
errorMessage : 'Server Error!'//You have to set this message depends on your server response
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 23 }}> { this.state.errorMessage } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: 20,
alignItems: 'center',
marginTop: 50,
justifyContent: 'center'
}
});
For development simply use console.log and debug while remote debugging is enabled. For production you can use Fabric, i love it. For more information about debugging follow the docs
You can use Chrome Developer Tools.
First open Developer Tools in Simulator. Then press Command+D keyboard shortcut. It will open the developer tools.
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
Then you can use "Inspect Element" on chrome browser. Then you can select console.
When ever there is some issue in the app, you can track it from the console in google chrome.
http://facebook.github.io/react-native/releases/0.49/docs/debugging.html#chrome-developer-tools