packages/demo/App.js
import React from 'react';
import {
StyleSheet,
View,
Button,
KeyboardAvoidingView,
SafeAreaView,
AsyncStorage,
} from 'react-native';
import {
DevTool,
DevToolModal,
log,
network,
show,
} from 'react-native-debug-console/src';
network.attach();
log.attach(true);
console.log('fooo');
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://google.com');
xhr.send();
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://google.com/sdfsfsdfsfdf');
xhr.send();
console.log({
hello: {
world: 1,
earth: 2,
},
});
AsyncStorage.setItem('a', 'b');
AsyncStorage.setItem('b', 'c');
AsyncStorage.setItem('c', 'd');
const t = new Promise((resolve, reject) => {
setTimeout(() => {
throw new Error('everything is broken');
}, 1000);
});
export default class App extends React.Component {
render() {
return (
<SafeAreaView style={styles.container}>
<KeyboardAvoidingView style={styles.wrapper} behavior="padding">
<View>
<Button
style={styles.button}
title="console.log('hello')"
onPress={() => {
console.log('hello');
}}
/>
<View style={{ height: 10 }} />
<Button
title="GET XHR (html)"
style={styles.button}
onPress={() => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://google.com');
xhr.send();
}}
/>
<View style={{ height: 10 }} />
<View style={{ height: 10 }} />
<Button
title="GET XHR (json)"
style={styles.button}
onPress={() => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com');
xhr.send();
}}
/>
<View style={{ height: 10 }} />
<Button
title="POST XHR"
style={styles.button}
onPress={() => {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://google.com');
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(JSON.stringify({
hello: 'world',
}));
}}
/>
<View style={{ height: 10 }} />
<Button
title="Unhandled error"
style={styles.button}
onPress={() => {
const err = new Error('some error');
throw err;
}}
/>
<View style={{ height: 30 }} />
<Button
title="Show modal"
style={styles.button}
onPress={() => {
show();
}}
/>
<View style={{ height: 10 }} />
</View>
<DevTool
style={{
flex: 1,
}}
storageProvider={AsyncStorage}
context={global}
/>
<DevToolModal
storageProvider={AsyncStorage}
context={global}
/>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#efefef',
},
wrapper: {
marginTop: 50,
flex: 1,
},
button: {
margin: 100,
},
});