Simple component which renders all keys and values of an object as debug output, inspired by @andruschenko

DebugOutput.js

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;