TextArea

TextArea is a multi-line text input for longer content like notes, descriptions, or comments. Supports labels, validation, and character counting.

Preview

Reading Notes

Enter your thoughts about this reading…

Basic Usage

Notes

The hexagram speaks of patience and waiting for the right moment. I feel this relates to my current project where rushing could lead to problems.

const [notes, setNotes] = useState('');

<TextArea
  value={notes}
  onChangeText={setNotes}
  label="Notes"
  placeholder="Enter your thoughts..."
  numberOfLines={4}
  accessibilityLabel="Reading notes"
/>

With Helper Text

Journal Entry

Reflect on your reading…

Your notes are saved automatically

<TextArea
  value={entry}
  onChangeText={setEntry}
  label="Journal Entry"
  placeholder="Reflect on your reading..."
  helperText="Your notes are saved automatically"
  accessibilityLabel="Journal entry"
/>

With Character Count

Description

A moment of transition and change.

35/500

<TextArea
  value={description}
  onChangeText={setDescription}
  label="Description"
  maxLength={500}
  showCharacterCount
  accessibilityLabel="Description"
/>

Error State

Required Notes

Enter notes…

Notes are required

<TextArea
  value={notes}
  onChangeText={setNotes}
  label="Required Notes"
  placeholder="Enter notes..."
  error={!notes ? "Notes are required" : undefined}
  accessibilityLabel="Required notes"
/>

Disabled

Locked Notes

These notes cannot be edited.

<TextArea
  value="These notes cannot be edited."
  onChangeText={() => {}}
  label="Locked Notes"
  disabled
  accessibilityLabel="Locked notes"
/>

Different Heights

Short (2 lines)

Brief note…

Medium (4 lines)

Standard note…

Tall (8 lines)

Detailed entry…

<TextArea numberOfLines={2} ... />  // Short
<TextArea numberOfLines={4} ... />  // Medium (default)
<TextArea numberOfLines={8} ... />  // Tall

API Reference

Props

Prop	Type	Default	Description
`value`	`string`	Required	Current value
`onChangeText`	`(text: string) => void`	Required	Change handler
`label`	`string`	-	Label above input
`placeholder`	`string`	-	Placeholder text
`helperText`	`string`	-	Helper text below
`error`	`string`	-	Error message
`numberOfLines`	`number`	`4`	Visible lines
`maxLength`	`number`	-	Max characters
`showCharacterCount`	`boolean`	`false`	Show count
`disabled`	`boolean`	`false`	Disable input
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	A11y label

Complete Example

import { TextArea, Button, Card } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ReadingJournal({ reading }) {
  const [notes, setNotes] = useState(reading.notes || '');
  const [question, setQuestion] = useState(reading.question || '');
  const [saving, setSaving] = useState(false);

  const handleSave = async () => {
    setSaving(true);
    await saveReading({ ...reading, notes, question });
    setSaving(false);
  };

  return (
    <Card>
      <TextArea
        value={question}
        onChangeText={setQuestion}
        label="Your Question"
        placeholder="What question did you have in mind?"
        numberOfLines={2}
        maxLength={200}
        showCharacterCount
        accessibilityLabel="Your question for this reading"
      />

      <TextArea
        value={notes}
        onChangeText={setNotes}
        label="Reflection Notes"
        placeholder="What insights did you gain from this reading? How does it relate to your situation?"
        numberOfLines={6}
        maxLength={1000}
        showCharacterCount
        helperText="Take your time to reflect on the reading's meaning"
        accessibilityLabel="Reflection notes"
        style={styles.notesArea}
      />

      <Button
        onPress={handleSave}
        loading={saving}
        disabled={saving}
      >
        Save Notes
      </Button>
    </Card>
  );
}

const styles = StyleSheet.create({
  notesArea: {
    marginTop: 16,
    marginBottom: 24,
  },
});