Skip to content

A simple lib to share an easy to implement animated custom text input for React native

License

Notifications You must be signed in to change notification settings

AlejandroFabianCampos/react-native-awesome-text-input

Repository files navigation

<AlejandroFabianCampos> codecov npm bundle size npm npm Conventional Commits GitHub closed issues GitHub issues npm peer dependency version NPM GitHub watchers GitHub Repo stars

react-native-awesome-text-input

A simple lib to share an easy to implement animated custom text input for React native

Awesome Text Input Demo Awesome Text Input Demo

How to install

With npm: npm i react-native-awesome-text-input

With yarn: yarn add react-native-awesome-text-input

Examples

Simple label input

import { AwesomeTextInput } from 'react-native-awesome-text-input';

export default function App() {
  return (
    <AwesomeTextInput label="Simple label" />
  );
}

Password input

import { AwesomeTextInput } from 'react-native-awesome-text-input';

export default function App() {
  return (
    <AwesomeTextInput label="Password" secureTextEntry={true} />
  );
}

All round bordered input

import { AwesomeTextInput } from 'react-native-awesome-text-input';

export default function App() {
  return (
    <AwesomeTextInput 
      label="Bordered input" 
      customStyles={{ 
        container: { 
          borderWidth: 1, 
          borderColor: 'grey', 
          borderRadius: 10 
        }, 
        title: { 
          backgroundColor: "white" 
        } 
      }} />
  );
}

API

Prop Values Example
label string Example label
customStyles {
container?: ReactNative.ViewStyle,
title?: ReactNative.TextStyle,
inputContainer?: ReactNative.ViewStyle
}
{
container: { borderRadius: 5, backgroundColor: 'purple' } ,
title: { color: "white" },
inputContainer: { backgroundColor: 'blue' }
}
...any ReactNative.TextInput props ReactNative.TextInput props secureTextEntry: true

// Hide the text input for passwords

Are pull requests and feature requests welcomed?

For sure! Don't hesitate to open issues with the enhancement tag or open pull requests for bugfixes/enhancements.

About

A simple lib to share an easy to implement animated custom text input for React native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •