expo-draggable-textfield

expo-draggable-textfield

Introduction

expo-draggable-textfield is a React Native component designed for the Expo framework. It provides a customizable, draggable text input field with a variety of features, making it a versatile choice for mobile applications requiring interactive text input.

Features

• Draggable text field within the app interface.
• Customizable styles and behaviors.
• Integration with React Native's Animated and Gesture Handler libraries for smooth performance and responsive touch handling.

Example

Installation

To install expo-draggable-textfield, run the following command in your React Native project:

npm install expo-draggable-textfield

Or, if you use Yarn:

yarn add expo-draggable-textfield

Requirements

• react-native-reanimated
• react-native-gesture-handler

Usage

Here's a basic example of how to use expo-draggable-textfield in your app:

import React from "react";
import { DraggableTextEditor } from "expo-draggable-textfield";

const MyComponent = () => {
  return (
    <DraggableTextEditor
      placeholder="Enter text here"
      onChangeText={(text) => console.log(text)}
      // Add other props as needed
    />
  );
};

export default MyComponent;

Props

The DraggableTextEditor component accepts the following props:

Property	Description
onChangeText	Function called when the text changes.
blurOnSubmit	Boolean indicating if the keyboard should be dismissed on submit.
value	The text value of the input.
onBlur	Function called when the input loses focus.
onItemActive	Function called when the item becomes active.
visible	Boolean to control the visibility of the text editor.
externalTextStyles	Styles for the text or the view of the component.
externalBorderStyles	Styles for the border of the component.
placeholder	Placeholder text for the input.
defaultTextValue	Default value for the text input.

Customization

You can customize the style and behavior of the draggable text field by passing style props. For example:

<DraggableTextEditor
  externalTextStyles={{ color: "blue" }}
  externalBorderStyles={{ borderColor: "green" }}
/>

Contributing

Contributions to expo-draggable-textfield are welcome.

License

expo-draggable-textfield is available under the MIT License.

Contact

For support or queries, please open a issue or start a discussion.