Code

The Code component is used to display blocks of pre-formatted text, typically code snippets. It provides a monospaced font, an optional header with a title, and copy-to-clipboard functionality.

Installation

$ cbui-cli install code

Import

index.tsx
1import { Code } from '@/crossbuildui/code'; 2// Required for copy functionality: 3// import * as Clipboard from 'expo-clipboard'; 4// For default copy icon (or custom icons): 5// import Icon from 'react-native-vector-icons/MaterialIcons';

Basic Usage

Pass a string as children to display it as a code block.

index.tsx
1<Code> 2 const greeting = "Hello, World!"; 3 console.log(greeting); 4</Code>

Sizes

Adjust the text size, padding, and icon size using the size prop: 'sm', 'md' (default), or 'lg'.

index.tsx
1<Code size="sm" showHeader title="Small Code"> 2 {'const small = true;'} 3</Code> 4 5<Code size="md" showHeader title="Medium Code (Default)"> 6 {'const medium = "default";'} 7</Code> 8 9<Code size="lg" showHeader title="Large Code"> 10 {'const large = 123;'} 11</Code>

Radius

Control the border radius of the code block container with the radius prop.

index.tsx
1<Code radius="none" showHeader title="No Radius"> 2 {'border-radius: 0;'} 3</Code> 4 5<Code radius="sm" showHeader title="Small Radius"> 6 {'border-radius: 4px;'} 7</Code> 8 9<Code radius="lg" showHeader title="Large Radius"> 10 {'border-radius: 12px;'} 11</Code>

Copy Functionality

When showHeader is true, a copy button is displayed. You can provide custom text to be copied via copyText (otherwise, string children are copied). A custom copyIcon can be supplied, and an onCopy callback is fired upon successful copy.

index.tsx
1// Using a custom icon (example with MaterialCommunityIcons) 2// const CustomCopyIcon = <Icon name="content-duplicate" size={16} color="#d9d9da" />; 3 4<Code 5 showHeader 6 title="Custom Copy Icon" 7 // copyIcon={CustomCopyIcon} 8 copyText={"console.warn('Custom text copied!');"} 9 onCopy={(text) => alert("Copied: " + text)} 10> 11 {'// This text will be displayed, but copyText will be copied. 12console.log("Original text");'} 13</Code>

Theming and Colors

The Code component uses theme-derived colors for a consistent appearance:

  • Background: In light mode, uses a light gray (theme's content1['50']). In dark mode, it uses a very dark gray (theme's content1['900']), unless the glass effect is active.
  • Text Content: Inherits color from its parent. For optimal contrast, especially with the glass effect, you might need to set it via the textStyle prop or styles.content.color.
  • Border: Uses theme-derived grays (e.g., content1['300'] in light, content1['700'] in dark, or content1['500'] for glass).
  • Header: Background uses theme's content1['100'] (light) or content1['300'] (dark). Title and icon colors use theme's default['800'].

Automatic Glass Effect (Dark Mode Only)

If the color prop is set to its default value ('default') AND the application is in dark mode, the Code component will automatically render with a frosted glass background using expo-blur. The blur effect has a dark tint and an intensity of 100. The component's main background becomes transparent to show the blur. If any other value is provided for the color prop, the glass effect will be disabled, and the standard dark mode background will be used.

Glass Effect Example

index.tsx
1// In Dark Mode: 2// This will have a glass effect because color is 'default' (or omitted) 3<Code showHeader title="Glass Effect (Dark Mode)"> 4 const isDarkMode = true; 5 if (isDarkMode) { 6 // This code block will appear on a blurred background 7 } 8</Code> 9 10// This will NOT have a glass effect in dark mode. 11// It will use the standard dark solid background. 12<Code color="primary" showHeader title="No Glass (Dark Mode)"> 13 {'// Setting color to anything other than "default" disables the glass effect.'} 14</Code> 15 16// In Light Mode: 17// Glass effect is not applicable. Standard light background will be used. 18<Code showHeader title="Standard (Light Mode)"> 19 const isLightMode = true; 20</Code>

Props Overview

PROPTYPEDEFAULTDESCRIPTION
childrenReactNode-The code string or ReactNode to display. String children are used for copying by default.
size'sm' | 'md' | 'lg''md'Size of text, padding, and icons.
colorCodeColor (e.g., 'default')'default'If 'default' and in dark mode, enables automatic glass effect. Other values disable glass effect but do not change component colors.
radiusCodeRadius'md'Border radius of the container.
showHeaderbooleanfalseShow header with title and copy button.
titlestring"Code"Title in header if showHeader is true.
copyIconReactElement-Custom copy icon element.
onCopy(text: string) => void-Callback after successful copy.
stylesCodeSlotsStyles-Custom styles for component slots (base, header, title, copyButton, content for text).
styleStyleProp<ViewStyle>-Style for the main wrapper View. Overrides styles.base.
textStyleStyleProp<TextStyle>-Style for the code text. Merged after styles.content.
copyTextstring-Explicit text to copy. Overrides string children for copy action.

Styling

Customize the appearance using:

  • style: Applied to the outermost wrapper View of the component.
  • styles (slot styles): An object to style specific internal parts:
    • base: Styles the main wrapper, merged with default wrapper styles.
    • header: Styles the header container.
    • title: Styles the title text in the header.
    • copyButton: Styles the Pressable area for the copy icon.
    • content: Styles applied to the code Text component itself.
  • textStyle: Additional styles applied directly to the code Text, merged after styles.content.
  • Glass Effect Styling: When the automatic glass effect is active (dark mode with color="default"), a BlurView is rendered as the background. The main style prop and styles.base apply to the container View that sits *on top* of the BlurView. The component sets this container's background to transparent for the blur to be visible. If you apply a backgroundColor here, it will cover the blur. Ensure code text color (via textStyle or styles.content.color) contrasts well with the blurred background.
index.tsx
1<Code 2 style={{ marginVertical: 10, opacity: 0.9 }} // Styles the outermost wrapper 3 styles={{ 4 base: { borderColor: 'green', borderWidth: 2 }, // Overrides default border, applied to wrapper 5 header: { backgroundColor: '#333' }, 6 title: { color: 'lightgreen', fontStyle: 'italic' }, 7 copyButton: { padding: 8, borderRadius: 5, backgroundColor: 'rgba(255,255,255,0.1)' }, 8 // 'content' slot styles the Text component wrapping the code string. 9 // Ensure text color contrasts with background, especially for glass effect. 10 content: { color: 'cyan', lineHeight: 20 } 11 }} 12 textStyle={{ fontWeight: 'bold' }} // Additional direct style for the text, merged after styles.content 13 showHeader 14 title="Styled Code Block" 15> 16 const styledCode = true; 17 if (styledCode) { 18 // Apply custom styles 19 } 20</Code>

Accessibility

The Code component aims to be accessible:

  • The code content, if provided as a string, is rendered within a Text component and is readable by screen readers.
  • The copy button in the header is a Pressable. While it uses icons, ensure that if you provide a custom copyIcon that is not inherently descriptive, you might need to consider adding accessibility labels if the context requires it (though typically the visual context of a copy icon next to code is clear). The default icons are standard UI elements.
  • The "copied" state provides visual feedback with a checkmark icon.
Card Listbox