Skip to content

Instantly share code, notes, and snippets.

@ca057
Last active March 28, 2017 16:38
Show Gist options
  • Save ca057/09703800a38234d250d63b78c06bb0e8 to your computer and use it in GitHub Desktop.
Save ca057/09703800a38234d250d63b78c06bb0e8 to your computer and use it in GitHub Desktop.
Simple component which renders all keys and values of an object as debug output, inspired by @Andruschenko
import React, { PropTypes } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';
const styles = StyleSheet.create({
textContainer: {
flexDirection: 'row',
},
text: {
color: 'black',
fontSize: 16,
},
textBold: {
fontWeight: 'bold',
},
container: {
position: 'absolute',
bottom: 0,
padding: 10,
backgroundColor: 'yellow',
},
});
const DebugText = ({ type, value }) => (
<View style={styles.textContainer}>
<Text style={styles.text}>
{type}: {<Text style={styles.textBold}>{value}</Text>}
</Text>
</View>
);
DebugText.propTypes = {
type: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
};
DebugText.defaultProps = {
value: '?',
};
const DebugOutput = ({ output }) => (
<View style={styles.container}>
{
Object.keys(output).map(key => (
<DebugText key={key} type={key} value={output[key]} />
))
}
</View>
);
DebugOutput.propTypes = {
output: PropTypes.objectOf(DebugText.propTypes.value),
};
DebugOutput.defaultProps = {
output: {},
};
export default DebugOutput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment