Text

Requires:
@ray-js/ray≥0.5.10

Description

Text component for displaying text.

Props

PropertyTypeRequiredDefaultDescription
userSelectbooleanNofalseWhether the text is selectable
selectableDeprecatedbooleanNo-Whether the text is selectable
↳ Use userSelect instead

Examples

Basic usage

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>This is a regular text</Text>
    </View>
  );
}

Selectable text

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text userSelect style={{ fontSize: 16, color: '#007aff', lineHeight: '24px' }}>
        This text has userSelect enabled; long-press to select and copy.
      </Text>
      <Text style={{ fontSize: 16, marginTop: 12, color: '#999' }}>
        This text does not have userSelect set and cannot be selected.
      </Text>
    </View>
  );
}