Skip to content

bluesky-social/react-native-paste-input

 
 

Repository files navigation

@mattermost/react-native-paste-input

React Native TextInput component have functionality to capture text input from a user by using the soft and hardware keyboards but lacks the ability to restrict copy & paste options as well as allwing pasting different files formats copied from other apps, like images & videos from the Photos gallery app.

PasteInput is a TextInput replacement that solves this issues.

Installation

npm i --save-exact @mattermost/react-native-paste-input

Demo

Android iOS
Android iOS

Usage

import React, { useRef } from 'react';
import PasteInput, { PastedFile, PasteInputRef } from "@mattermost/react-native-paste-input";

const YourTextInput = () => {
    const inputRef = useRef<PasteInputRef>(null);

    const onPaste = (
        error: string | null | undefined,
        files: Array<PastedFile>
    ) => {
        console.log('ERROR', error);
        console.log('PASTED FILES', files);
    };

    return (
        <PasteInput
            ref={inputRef}
            disableCopyPaste={false}
            onPaste={onPaste}
            multiline={true}
            blurOnSubmit={false}
            underlineColorAndroid="transparent"
            keyboardType="default"
            disableFullscreenUI={true}
            textContentType="none"
            autoCompleteType="off"
        />
    );
}

Properties

All properties of the TextInput component plus:

disableCopyPaste: boolean

Indicates if the menu items for cut, copy, paste and share should not be present in the context menu.

onPaste: (error, files) => void

Callback that is called when the pasting files into the text input. Note: On Android this callback is also called when selecting and image / gif from the soft keyboard.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

About

React Native TextInput replacement to allow pasting files

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C++ 32.0%
  • Objective-C 29.6%
  • Objective-C++ 14.0%
  • TypeScript 13.6%
  • Kotlin 8.2%
  • JavaScript 0.9%
  • Other 1.7%