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
}
}