This is not an official Expo SDK package.

❎ Expo Clear Input 📝

A cross-platform clear button to use in a TextInput for React Native apps built with Expo.

📲 Demo

🔬 Why This Library?

The TextInput component has a clearButtonMode prop but it only support ios and not android. In addition to that, it only works in single-line mode and not multiline.

This library is a solution to the above by working on any platform (web, ios, android) and in both single and muilti line <TextInput>s.

☑️ Prerequisites

• React Native version 0.63 or higher
• Expo version 42 or higher
• React version 17 or higher

📠 Installation

npm install expo-clear-input

📎 Usage

import React from 'react';
import { StyleSheet, SafeAreaView, View } from 'react-native';
import { ClearControlTextInput } from 'expo-clear-input';

export default function App() {
    const [ text, setText ] = React.useState('');

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#000', alignItems: 'center', justifyContent: 'center', }}>
            <View style={{ marginHorizontal: 20, marginBottom: 20, width: "80%" }}>
            <ClearControlTextInput
                textInputProps={{
                    onChangeText: (text) => setText(text),
                    value: text,
                    placeholder: 'enter search...',
                    returnKeyType: 'done',
                }}
                showButtonMode={'always'}
            />
            </View>
        </SafeAreaView>
    );
}

Supports custom icon for the button or use the default(recommended)

// this is the default icon used
<Octicons name="x-circle-fill" size={16} color="#ccc8c8" />

🎛️ Options

| Prop | Type | Description | Default | | ----------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | textInputProps | AccessibilityProps & Partial<TextInputProps> | All cross-platform-compatible props from TextInputProps except for style, which is handled by this component | same defaults as <TextInput> | | textColor | string | The color of the text | "#fff" | | backgroundColor | string | The background color of the input field | "#252326" | | verticalPlacement | 'top''center''bottom' | The vertical placement of the input field (always on the right side) | 'center' | | showButtonNode | boolean | Whether to show the button node; always: visible whether or not its in focus. while-editing: visible only when the input is in focus. unless-editing: visible only when the input is not in focus | while-editing | | icon | ReactNode | The icon to be displayed | <Octicons name="x-circle-fill" size={16} color="#ccc8c8" /> |

👥 Contributing

• Please create your own branch off of main to get started
• Then develop, build, test, and create a Pull Request to main to trigger a review.

Pre-requisites

• must be on WSL, Linux, or mac for local development or else you won't be able to run the scripts
• Node.js version 18 or higher

Development

• during development of your new code, you may want to have an example app up in parrallel to view your changes in real time.
• YMMV but the recommended approach to this is to create a local expo project using expo-template-blank-typescript and import your ./src/* files into its App.tsx.
  • Then view your changes in real time.

Test Locally

• After you've finished your changes, test that the packaged module works as expected.
  • Set up the testing suite with a local package of the module with your changes:
    • run from project root: npm run setuptest
  • once that runs successfuly, start up the test:
    • run from project root: npm run test

Before Submitting a Pull Request

• No PR will be accepted without a copy of the testing report
• Please ensure you add new tests if applicable for your new feature.