useColors()

useColors() returns the native colors according to the platform and version used, respecting the light or dark theme.

Usage

import React from 'react';
import { Text } from "react-native";

// React Native UI DevKit
import { useColors } from 'react-native-ui-devkit';

const App = () => {
    const colors = useColors();

    return (
        <Text style={{ color: colors.text }}>Text</Text>
    );
}

export default App;

Type Definitions

useColors()

useColors() type definitions.

Type: object

{
  background: string, // background color of the system
  border: string, // border color of the system
  card: string, // card color of the system
  notification: string, // notification color of the system
  primary: string, // primary color of the system
  text: string, // text color of the system
  secondary: string, // secondary color of the system
  tertiary: string, // tertiary color of the system
  button: string, // default button color of the system
  ios: {
    headerBackgroundColor: string, // iOS header background color of the system
    item: string, // iOS item color of the system
    underlay: string, // iOS underlay color of the system
    line: string // iOS line color of the system
  },
  android: {
    headerBackgroundColor: string, // Android header background color of the system
    item: string, // Android item color of the system
    underlay: string, // Android underlay color of the system
    line: string // Android line color of the system
  }
}