react-native-typerich

Drop in TextInput replacement with inbuilt support for Image Pasting and Gboard stickers

Installation

npm install react-native-typerich

Note

you will need to prebuild app in expo

Usage

import { TypeRichTextInput } from 'react-native-typerich';

// ...
<TypeRichTextInput
  ref={inputRef}
  value={value}
  style={styles.typeRichTextInput}
  placeholder="Type here..."
  placeholderTextColor="rgb(0, 26, 114)"
  editable={true}
  selectionColor="deepskyblue"
  cursorColor="dodgerblue"
  autoCapitalize="words"
  autoFocus
  onChangeText={(text: string) => console.log(text)}
  onFocus={() => console.log('focused')}
  onBlur={() => console.log('blurred')}
  onChangeSelection={(e: { start: number, end: number, text: string }) =>
    console.log(e)
  }
  onPasteImageData={(e) => {
    setImage(e);
    console.log(e);
  }}
  androidExperimentalSynchronousEvents={true} // not tested very well
  multiline
  numberOfLines={5}
  lineHeight={22}
  fontFamily="serif"
  fontStyle="italic"
  fontWeight={'700'}
  fontSize={26}
  color="darkgreen"
/>;

Props

• Props that works Same as React Native's Default TextInput:

value?: string;
autoFocus?: boolean;
editable?: boolean;
defaultValue?: string;
placeholder?: string;
placeholderTextColor?: ColorValue;
cursorColor?: ColorValue;
selectionColor?: ColorValue;
autoCapitalize?: string;
scrollEnabled?: boolean;
secureTextEntry?: boolean;

• Styling Props you need to pass externally:

color?: ColorValue;
fontSize?: Float;
fontFamily?: string;
fontWeight?: string;
fontStyle?: string;
lineHeight?: Float;

• props that have some bugs:

multiline?: boolean;
numberOfLines?: Int32;

using this togather adds some extra height sometimes. use multline without numberOfLines and it works fine use maxHeight instead of number of lines

Note

This is not a Major bug and the change is unnoticable

Events

1. onFocus

callback signature

onFocus?: () => void;

2. onBlur

callback signature

onBlur?: () => void;

3. onChangeText

callback signature

onChangeText?: (value: string) => void;

4. onChangeSelection

callback signature

onChangeSelection?: (event: {
  start: number;
  end: number;
  text: string;
}) => void;

4. onPasteImageData

fires on when user paste image

callback signature

onPasteImageData?: (data: {
  uri: string;
  type: string;
  fileName: string;
  fileSize: Double;
  source: 'keyboard' | 'clipboard' | 'context_menu'; // it never receives source as 'context_menu' and will be removed in future we suggest not using it
  error?: { message: string };
}) => void;

Event props

• uri: uri of the image, can be directly used or passed to Image comp
• type: mime type of image
• fileName: File name of image (always starts with typerich_ prefix)
• fileSize: File Size in bytes
• source: its enum with two possible values
  • keyboard: if its pasted from gboard's clipboard or is a sticker or something similar
  • clipboard: if its pasted from context menu (long press)
• error: error message if there is any

Commands

1. focus()

use to get programmatic focus on TextInput

Command signature

focus: () => void;

useage

inputRef.current?.focus();

2. blur()

use to programmatically blur TextInput

Command signature

blur: () => void;

useage

inputRef.current?.blur();

3. setText(text)

use to set the value of TextInput (replaces whole content)

Note

it does not updates selection automatically use have to call setSelection()

Command signature

setText: (text: string) => void;

useage

inputRef.current?.setText('This is Text');

4. insertTextAt(start, end, text)

use to insert value at specific position (keeps content of TextInput)

Note

it preserves the cursor and updates the selection no need to call the setSelection after this

Command signature

insertTextAt: (start: number, end: number, text: string) => void;

useage

inputRef.current?.insertTextAt(4, 6, 'This is Text');

5. setSelection(start, end)

use to set the value of TextInput (replaces whole content)

Command signature

setSelection: (start: number, end: number) => void;

useage

inputRef.current?.setSelection(4, 6);

6. getNativeRef()

use to get the internal ref object of the TypeRichTextInput

Note

you mostly does not need to use this only use this when you need to use the ref in certain cases like following

const hostRef = input?.getNativeRef?.();
const node = findNodeHandle(hostRef); // findNodeHandle is from 'react-native'

Command signature

getNativeRef: () => any | null;

useage

inputRef.current?.getNativeRef();

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with create-react-native-library

Credits

• Divyanshu Patil – Author & maintainer
• Built with help from the open-source community ❤️

special thanks to Software-Mansion for the custom shadow node code

checkout react-native-enriched by software-mansion