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
Related
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"
I have a React Native - Expo Android mobile app that we are using to send text messages out to customers to let them know when we arrive, currently using Twilio and it is expensive, I have tried many code examples to send a text message directly from the phone and they all seem to go outside the app and want to send the text message through the phone's default message app eg Messages, we want to stay in our app and send them.
My question is:
Is there a way to do this? If so how?
If not what is a cheaper solution than Twilio to send texts that will work in a React Native - Expo app?
I have been trying to find a solution now for quite awhile.
Thanks in advance for your help!
I have tried many code examples with no luck, here is an example of the code I have tried:
Here is an example of the code I am trying:
/** #format */
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { Entypo } from "#expo/vector-icons";
import Communications from "react-native-communications";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>SmS App</Text>
<Entypo
name="message"
size={70}
color="#202668"
onPress={() => Communications.text(
'3435447131',
'Hello'
)}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textStyle: {
fontWeight: "bold",
fontSize: 30,
color: "#2AB4F3",
bottom: 10,
},
});
Does anyone know how to configure stylelint for react native (typescript) and StyleSheet?
src/sample.tsx
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: "#20232a",
borderRadius: 6,
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
fontSize: 30,
fontWeight: "bold"
},
example: {
unknown: "property"
}
});
export default App;
.stylelintrc.js
module.exports = {
"plugins": ["stylelint-react-native"],
"rules": {
"react-native/css-property-no-unknown": true
}
}
When I run stylelint '/src/**/.tsx'*, I got error like "you need use postcss". Ok, I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works.
In the best case, the command runs without errors, although I added a property of which does not exist.
PS. stylelint version - 14, react native version - 0.66.4
You can use the #stylelint/postcss-css-in-js custom syntax.
test.ts
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
color: "#eaeae",
background: "linear-gradient(#e66465, #9198e5)",
},
title: {
fontWeight: "bold",
},
});
export default App;
.stylelintrc.json (with three example rules turned on)
{
"customSyntax": "#stylelint/postcss-css-in-js",
"rules": {
"color-no-invalid-hex": true,
"font-weight-notation": "numeric",
"function-disallowed-list": ["linear-gradient"]
}
}
output
% npx stylelint "test.ts"
test.ts
12:12 ✖ Unexpected invalid hex color "#eaeae" color-no-invalid-hex
13:17 ✖ Unexpected function "linear-gradient" function-disallowed-list
16:17 ✖ Expected numeric font-weight notation font-weight-notation
You may want to use both Stylelint and the eslint-plugin-react-native plugin for ESLint together as they are complementary tools that do different things.
The ESLint plugin has 7 rules. Only one of which, sort-styles, overlaps with Stylelint. The other rules don't touch on the actual CSS inside your object notation. So you can use that plugin and then use Stylelint to spot possible errors and limit what language features are used in your CSS.
I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works
You may have encountered a bug in the package. It is a monolithic package that tries to support every flavour of CSS-in-JS. It'll likely be deprecated in the future in favour of leaner packages dedicated to specific CSS-in-JS libraries, the first of which is postcss-lit.
That's what happens when you recycle. In fact, we shouldn't use the stylelint, because we have a typescript. Just use eslint for this. For example: https://github.com/Intellicode/eslint-plugin-react-native
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