Console.log() is a inbuilt predefine function in react native. This function is created for both Android and iOS applications and used to maintain and debug errors in apps on run time. Console.log() helps us to detect errors in our code. For example : If our application is crashing at a point of stage so by defining Console.log() at multiple places we can detect errors and also know the last line of code which is working. Console.log() display a message in command prompt window in Windows and in MAC it shows a message on Terminal. So in this tutorial we would going to learn about Debug React Native Android iOS App Using Console.log() Tutorial So lets’s get started .
Contents in this example Debug React Native Android iOS App Using Console.log Tutorial:
1. Import StyleSheet, View and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button} from ‘react-native’;
|
2. Create a function named as ConsoleFunction() and define Console.log() code inside it. We are printing 3 different type of statements inside the Console.
|
1
2
3
4
5
6
7
8
9
|
ConsoleFunction=()=>{
console.log(7);
console.log( 8+9 );
console.log(“This is Console Message.”);
}
|
3. Create a Button inside the render’s return block and call the ConsoleFunction() function on Button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer}>
<Button onPress={this.ConsoleFunction} title=‘Click Here To Print Console’ />
</View>
);
}
|
4. Create Style for Root View.
|
1
2
3
4
5
6
7
8
9
10
11
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 20
}
});
|
5. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button} from ‘react-native’;
export default class Mynewproject extends Component {
ConsoleFunction=()=>{
console.log(7);
console.log( 8+9 );
console.log(“This is Console Message.”);
}
render() {
return (
<View style={styles.MainContainer}>
<Button onPress={this.ConsoleFunction} title=‘Click Here To Print Console’ />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 20
}
});
|
Screenshot :
6. Run react-native run-android command in Command Prompt in windows to run android apps and In MAC run react-native run-ios to run iOS application.
7. After successfully starting the app in emulator or real device, we do not close the NPM server and we would again execute
react–native log–android command in command prompt in windows and In iOS we would use
react–native log–ios command in terminal.
Screenshot of command prompt in Windows after executing react-native log-android command :
As you can see in above screenshot three different type of values is printing on command prompt passed in console.log() function after button click.
Also Read :
React Native set View Align Horizontally Center dynamically on button click
Create File Picker in React Native Android iOS Example Tutorial
Add border to Image in React Native using custom style sheet
React Native ActivityIndicator Android iOS Example Tutorial
React Native Disable Remove All Yellow Warning Messages Box
