The console API works in React Native almost exactly like in a browser – console.log(), .warn(), .error() land in the Metro terminal, in the dev menu's log, and (with Chrome/Flipper debugging) in DevTools.

1. Description

The four most important methods differ in their VISUAL presentation: console.log() for general output, console.warn() appears highlighted in yellow (and as a "Yellow Box" overlay on the device), console.error() in red (as a "Red Box" in dev builds), console.table() displays arrays/objects as a table.

2. Short example

console.log('User loaded:', user);
console.warn('API response was empty');
console.error('Login failed', error);

3. Complete project: a custom logger with log levels

npx create-expo-app logging-demo
cd logging-demo

const LOGGING_ENABLED = __DEV__; // only log in the development build

export const logger = {
  info(message, ...data) {
    if (LOGGING_ENABLED) {
      console.log(`[INFO] ${message}`, ...data);
    }
  },
  warning(message, ...data) {
    if (LOGGING_ENABLED) {
      console.warn(`[WARN] ${message}`, ...data);
    }
  },
  error(message, errorObject) {
    // Always log errors, even in production builds
    console.error(`[ERROR] ${message}`, errorObject?.message ?? errorObject);
  },
  table(data) {
    if (LOGGING_ENABLED) {
      console.table(data);
    }
  },
};

import { useEffect } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { logger } from './utils/logger';

const SAMPLE_DATA = [
  { name: 'Anna', age: 28 },
  { name: 'Ben', age: 34 },
];

export default function App() {
  useEffect(() => {
    logger.info('App started');
    logger.table(SAMPLE_DATA);
  }, []);

  function simulateError() {
    try {
      throw new Error('Simulated network error');
    } catch (error) {
      logger.error('Request failed', error);
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Log a warning" onPress={() => logger.warning('Unusual state')} />
      <View style={styles.spacing}>
        <Button title="Simulate error" onPress={simulateError} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 100, paddingHorizontal: 24 },
  spacing: { marginTop: 16 },
});

4. Explanation

• __DEV__ is a boolean variable provided GLOBALLY by React Native – true in the development build, false in a published production build, no import needed.
• The custom logger facade makes info/warn logs automatically SILENT in production builds (performance AND prevents leaking internal details to end users), while genuine errors (error()) are deliberately ALWAYS logged.
• ...data (rest parameter) allows passing any number of additional arguments through to console.log/.warn, just like the native console API.
• In a real production app, logger.error() would additionally call an error-tracking service (e.g. Sentry) instead of just writing to the console – the facade makes that later extension possible in ONE central place.

5. Outputs