Background Color

A straightforward reference for setting layout view backgrounds, including support for absolute values, theme palettes, and dynamic dark mode styling rules.

---

Background Utilities

Style Property / Function	Type / Value	Description	Reference
rncStyles.bg_white	{ backgroundColor: "#ffffff" }	Sets background to absolute white.	—
rncStyles.bg_black	{ backgroundColor: "#000000" }	Sets background to absolute black.	—
rncStyles.bg_transparent	{ backgroundColor: "transparent" }	Makes the background completely transparent.	—
rncStyles.bg_color(color, range)	Function	Sets a custom theme background based on a name and numeric shade step (50-950).	Color Palette Reference
rncStyles.d_bg_color(color, range)	Function	Applies the background choice only when Dark Theme is active.	Color Palette Reference

---

Usage Example

BackgroundPreview.tsx

import React from 'react';
import { View, Text } from 'react-native';
import rncStyles from 'rncstyles';

export default function BackgroundPreview() {
  return (
    <View style={[rncStyles.bg_white]}>
      
      {/* Container with standard theme background */}
      <View style={[rncStyles.bg_color('slate', 100)]}>
        <Text>Light Slate Background</Text>
      </View>

      {/* Adaptive Card (Swaps color automatically in Dark Mode) */}
      <View style={[
        rncStyles.bg_color('zinc', 50),
        rncStyles.d_bg_color('zinc', 900)
      ]}>
        <Text>Responsive Layout Card</Text>
      </View>

      {/* Transparent overlay container */}
      <View style={[rncStyles.bg_transparent]}>
        <Text>See-through Layer</Text>
      </View>

    </View>
  );
}