Light

wrathchaos / react-native-text-input-interactive Goto Github PK

View Code? Open in Web Editor NEW

39.0 3.0 9.0 14.28 MB

Fully customizable, animated text input for React Native with beautiful and elegant design

Home Page: https://freakycoder.com

JavaScript 7.79% Starlark 1.38% Java 35.61% Ruby 3.69% Objective-C 5.45% TypeScript 18.64% CMake 0.62% C++ 16.66% Objective-C++ 10.16%

react-native react reactjs javascript typescript mobile programming ios android google

react-native-text-input-interactive's Introduction

Installation

Add the dependency:

npm i react-native-text-input-interactive

Peer Dependencies

Zero Dependency!

Usage

Import

import TextInput from "react-native-text-input-interactive";

Basic Usage

<TextInput onChangeText={(text: string) => {}} />

Example Project 😍

You can checkout the example project 🥰 There is advanced usage on example.

Simply run

npm i
react-native run-ios/android

should work of the example project.

Configuration - Props

Customization (Optionals)

TextInput and Icon is fully customizable thanks to prop-drilling, you can use any TextInput props.

Property	Type	Default	Description
mainColor	string	#2a41cb	change the main animated color
originalColor	string	transparent	change the original/default animated color
animatedPlaceholderTextColor	string	#757575	change the placeholder text animated color
ImageComponent	Component	Image	set your own image component such as; `FastImage`
IconComponent	Component	TouchableOpacity	set your own icon component such as; react-native-bounceable
enableIcon	boolean	false	set the true for using the right sided icon
iconImageSource	ImageSourcePropType	undefined	set the icon image
onIconPress	Function	undefined	set your own logic for the icon button functionality when the icon is pressed
style	ViewStyle	default	set or override the style object for the main container
textInputStyle	TextStyle	default	set or override the style object for the text input itself
iconContainerStyle	ViewStyle	default	set or override the style object for the icon container
iconImageStyle	ImageStyle	default	set or override the style object for the icon image style
buttonText	string	undefined	change the button's text
ImageComponent	Image	default	set your own component instead of default react-native Image component

Future Plans

~~LICENSE~~
Write an article about the lib on Medium

Credits

Example mobile design is heavily inspired by Firman Praadita Thank you so much for this inspiration :)

Author

FreakyCoder, [email protected]

License

React Native Text Input Interactive is available under the MIT license. See the LICENSE file for more info.

react-native-text-input-interactive's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology daviz00 fukemy monhtornado conorcorp symmacoin ngochiendev anggaprytn sohail-wayland

react-native-text-input-interactive's Issues

change background color and the font for the text

please how can I change the background color and fontFamily for the text

No "fucous()" method

I'm trying to use focus() but it gives me Error: ....current.focus is not a function (it is undefined)

Cannot build project, tslib missing

Dear developers, thank you for releasing this, I tried incorporating it in my project, yet got the following error.
My cmd log:

Failed building JavaScript bundle.
Unable to resolve module tslib from C:\Users\mikel\AwesomeProject\node_modules\react-native-text-input-interactive\build\dist\InteractiveTextInput.js: tslib could not be found within the project.

If you are sure the module exists, try these steps:

Clear watchman watches: watchman watch-del-all
Delete node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });

3 | const tslib_1 = require("tslib");
| ^
4 | const React = tslib_1.__importStar(require("react"));
5 | const react_native_1 = require("react-native");
6 | /**

RTL

How to use RTL with ICONS

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.