Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Overview

React Native Textinput Effects

I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native.

There is also a native iOS library called TextFieldEffects which has built some of them in Swift.

Blog Post

I've recently written a blog post about Creating an Animated TextField with React Native. While it isn't directly related to this library, I think you might still find it useful to understand the basics of creating an animated text input with React Native Animated library.

Installation

The latest version of this project needs react-native >= 0.55(March 2018 release) due to createRef usage. Go with the latest version:

$ npm install react-native-textinput-effects --save

You can stick with version 0.4 if you have an older react-native version:

$ npm install [email protected] --save

You also need to install react-native-vector-icons if you'd like to use a TextInputEffect component with an icon. Please check out Installation section on that project.

How to use

Common Props

Prop Type Description
label String Displayed as placeholder string of the input.
style View Style Object Applied to the root container of the input.
labelStyle View Style Object Applied to the container of the label view.
inputStyle Text Style Object Applied to the TextInput component.
value String This value will be applied to the TextInput and change it's state on every render. Use this prop if you want a Controlled Component.
defaultValue String If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. This prop creates an Uncontrolled Component and is only used during initial render.

You can also use default TextInput Props. They'll be passed into TextInput component. E.g., use TextInput's onChange prop to be notified on text changes.

<Sae
  onChangeText={(text) => { this.setState({textValue: text}) }
/>

Props for TextInputEffects with an Icon

This component needs Icon component from react-native-vector-icons to operate with icons. You should import it before creating a TextInputEffects component.

import Icon from 'react-native-vector-icons/FontAwesome';

Prop Type Description
iconClass Object The Icon component class you've imported from react-native-vector-icons.
iconName String Name of the icon that is passed to Icon component.
iconColor String Applied to the Icon component.
iconSize Number Applied to the Icon component.

Example

See TextInputEffectsExample.js file.

Follow those steps to run the example:

  1. Clone the repo git clone https://github.com/halilb/react-native-textinput-effects && cd react-native-textinput-effects/Example
  2. Install dependencies `npm install``
  3. Follow official instructions to run the example project in a simulator or device.

You can also check out the example library without any installation on Appetize.io!

Input Types

Sae

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Sae } from 'react-native-textinput-effects';

const saeInput = (
  <Sae
    label={'Email Address'}
    iconClass={FontAwesomeIcon}
    iconName={'pencil'}
    iconColor={'white'}
    inputPadding={16}
    labelHeight={24}
    // active border height
    borderHeight={2}
    // TextInput props
    autoCapitalize={'none'}
    autoCorrect={false}
  />
);

Fumi

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Fumi } from 'react-native-textinput-effects';

const fumiInput = (
  <Fumi
    label={'Course Name'}
    iconClass={FontAwesomeIcon}
    iconName={'university'}
    iconColor={'#f95a25'}
    iconSize={20}
    iconWidth={40}
    inputPadding={16}
  />
);

Kohana

Kohana supports Animated Native Driver. You can use native driver by passing useNativeDriver.

import MaterialsIcon from 'react-native-vector-icons/MaterialIcons';
import { Kohana } from 'react-native-textinput-effects';

const kohanaInput = (
  <Kohana
    style={{ backgroundColor: '#f9f5ed' }}
    label={'Line'}
    iconClass={MaterialsIcon}
    iconName={'directions-bus'}
    iconColor={'#f4d29a'}
    inputPadding={16}
    labelStyle={{ color: '#91627b' }}
    inputStyle={{ color: '#91627b' }}
    labelContainerStyle={{ padding: 20 }}
    iconContainerStyle={{ padding: 20 }}
    useNativeDriver
  />
);

Makiko

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Makiko } from 'react-native-textinput-effects';

const makikoInput = (
  <Makiko
    label={'Comment'}
    iconClass={FontAwesomeIcon}
    iconName={'comment'}
    iconColor={'white'}
    inputPadding={16}
    inputStyle={{ color: '#db786d' }}
  />
);

Note: Icon component expands and covers the input. So, the icon should not have any blank spaces for the animation experience. This is the limitation for Makiko.

Isao

import { Isao } from 'react-native-textinput-effects';

const isaoInput = (
  <Isao
    label={'First Name'}
    // this is applied as active border and label color
    activeColor={'#da7071'}
    // active border height
    borderHeight={8}
    inputPadding={16}
    labelHeight={24}
    // this is applied as passive border and label color
    passiveColor={'#dadada'}
  />
);

Hoshi

import { Hoshi } from 'react-native-textinput-effects';

const hoshiInput = (
  <Hoshi
    label={'Town'}
    // this is used as active border color
    borderColor={'#b76c94'}
    // active border height
    borderHeight={3}
    inputPadding={16}
    // this is used to set backgroundColor of label mask.
    // please pass the backgroundColor of your TextInput container.
    backgroundColor={'#F9F7F6'}
  />
);

Jiro

import { Jiro } from 'react-native-textinput-effects';

const jiroInput = (
  <Jiro
    label={'Dog\'s name'}
    // this is used as active and passive border color
    borderColor={'#9b537a'}
    inputPadding={16}
    inputStyle={{ color: 'white' }}
  />
);

Kaede

import { Kaede } from 'react-native-textinput-effects';

const kaedeInput = (
  <Kaede
    label={'Website'}
    inputPadding={16}
  />
);

Akira

import { Akira } from 'react-native-textinput-effects';

const akiraInput = (
  <Akira
    label={'First Name'}
    // this is used as active and passive border color
    borderColor={'#a5d1cc'}
    inputPadding={16}
    labelHeight={24}
    labelStyle={{ color: '#ac83c4' }}
  />
);

Madoka

import { Madoka } from 'react-native-textinput-effects';

const madokaInput = (
  <Madoka
    label={'Frequency'}
    // this is used as active and passive border color
    borderColor={'#aee2c9'}
    inputPadding={16}
    labelHeight={24}
    labelStyle={{ color: '#008445' }}
    inputStyle={{ color: '#f4a197' }}
  />
);

Hideo

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Hideo } from 'react-native-textinput-effects';

const hideoInput = (
  <Hideo
    iconClass={FontAwesomeIcon}
    iconName={'envelope'}
    iconColor={'white'}
    // this is used as backgroundColor of icon container view.
    iconBackgroundColor={'#f2a59d'}
    inputStyle={{ color: '#464949' }}
  />
);

Licence

MIT

Issues
  • Change height of the textInput

    Change height of the textInput

    Hi, thanks for this amazing component! Is it possible to change textInput height? I am using multiline={true} and would like to set height 2 times bigger than the current height for Hoshi.

    help wanted 
    opened by grundmanise 11
  • Components wont display in RN 0.36

    Components wont display in RN 0.36

    see https://github.com/facebook/react-native/commit/0a9b6bedb312eba22c5bc11498b1cc41363e5f27

    opened by jjdp 8
  • Feature Request: More customisability of colors in Fumi

    Feature Request: More customisability of colors in Fumi

    Hi, I've been trying out the Fumi textinput and I think it's really nice. Just wondering if a higher degree of customisability of colors could be added as currently any colors passed in through the props labelStyle and _inputStyle are overwritten by their defaults eg:

    <Animated.Text style={[styles.label, labelStyle, { fontSize: focusedAnim.interpolate({ inputRange: [0, 0.7, 0.71, 1], outputRange: [16, 16, 12, 12], }), color: focusedAnim.interpolate({ inputRange: [0, 0.7], outputRange: ['#696969', '#a3a3a3'], })

    and

    <TextInput ref="input" {...this.props} style={[styles.textInput, inputStyle, { marginLeft: ICON_WIDTH + PADDING, color: iconColor, }]}

    I think this would be an awesome addition as with that, this textinput field could be used to fit any UI with its beautiful animation and customisability of colors to fit different color themes.

    Cheers :)

    opened by huangkaiw3n 7
  • the HoshiInput's tail is beyond the border in iOS

    the HoshiInput's tail is beyond the border in iOS

    I use Hoshi follow the example,but the HoshiInput's tail is beyond the border,can you help me? My email is [email protected] Thank you!

    opened by iOSQiao 6
  • Cannot input for the uncontrolled components [0.1.2]

    Cannot input for the uncontrolled components [0.1.2]

    Hi, I think there is a problem with the new 0.1.2 release for the uncontrolled components. With uncontrolled components I don't think the value props would be null or undefined in the componentWillReceiveProps api call which would be set as the new state of the text input.

    I have made the comment in the commit. https://github.com/halilb/react-native-textinput-effects/commit/8e5e4c8494ee0314b1e9dcccb98cfacf9ff83dd1

    Thank you very much.

    opened by mijia 6
  • Native drivers support

    Native drivers support

    opened by Grivel-l 6
  • Ref props of text input does not work

    Ref props of text input does not work

    Hello, This is my code from textinput component: <TextInput placeholder="Residence" ref={(ref) => this._residenceRef = ref} placeholderTextColor="rgba(0,0,0,0.2)" keyboardType="email-address" selectionColor="#61448D" style={styles.input} autoCapitalize="none" autoCorrect={false} onChangeText={(residence) => this.residence = residence} returnKeyType="next" onSubmitEditing={() => this._emailRef.focus()} /> I changed the textinput to Kohana but the ref doesn't work. <Kohana ref={(ref) => this._emailRef = ref}
    style={{ flex: 1, height: 45, backgroundColor: "rgba(0,0,0,0)", padding: 10}} onChangeText={(email) => this.email = email} returnKeyType="next" onSubmitEditing={() => this._passwordRef.focus()} label={'Email'} iconClass={MaterialsIcon} iconName={'email'} iconColor={'#61448D'} labelStyle={{ color: 'rgba(0,0,0,0.2)' }} inputStyle={{ color: "rgba(0,0,0,0.2)"}} /> Please help.

    Thanks,

    opened by Talkwondo 6
  • Fix separator style on Fumi

    Fix separator style on Fumi

    Fixed issues where the separator was positioned at the top of the input instead of centered

    opened by ThePaulMcBride 5
  • Added ability for developer to override the value of the field programatically

    Added ability for developer to override the value of the field programatically

    In my use case I have a typeahead-style field where the user will type the beginning of another user's name and then be presented with a dropdown of options to choose from. When the user selects an option I set the value in the background but I also need the ability to change the text field to reflect the complete name of the user that was selected versus just the first few letters.

    This pull request allows the developer to set a new value by simply passing the value property in to the component but does not interfere with the existing state tracking if a new value is not passed in.

    opened by kevinvangelder 5
  • Components doesn't show properly without ScrollView

    Components doesn't show properly without ScrollView

    img_5081 2018-02-08 10 47 01

    TextInput will cuddle up in a heap after I took the ScrollView off.

    opened by SaveYourTime 5
  • Bump tmpl from 1.0.4 to 1.0.5 in /Example

    Bump tmpl from 1.0.4 to 1.0.5 in /Example

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7 in /Example

    Bump path-parse from 1.0.6 to 1.0.7 in /Example

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump react-native from 0.62.2 to 0.62.3 in /Example

    Bump react-native from 0.62.2 to 0.62.3 in /Example

    Bumps react-native from 0.62.2 to 0.62.3.

    Release notes

    Sourced from react-native's releases.

    v0.62.3

    This patch release is specifically targetted towards Xcode 12.5. The changes done are tailored to unblock developers still relying on v0.62 of RN.

    Aside from bumping your version from 0.62.2 to 0.62.3, please make sure to add this line to your podfile (or modify it if you already had it):

    use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
    

    After which, do all the classic necessary cleans (node_modules, caches, pod folders, etc)(react-native-clean-project is your ally) then do yarn install and a pod install --repo-update (if pod install fails on an error about a Flipper package, just remove the relevant lines from the podfile.lock and run the pod install again).

    The only other commit picked & released along the Xcode 12.5 fixes is:

    • Update validateBaseUrl to use latest regex (commit) which fixes CVE-2020-1920, GHSL-2020-293.

    To help you upgrade to this version, you can use the upgrade helper ⚛️


    You can find the whole changelog history over at react-native-releases.

    Commits
    • 83425fa [0.62.3] Bump version numbers
    • c6f4611 [local] change autolink to match requirements for FlipperFolly working with X...
    • c4ea556 [local] change podfile to rely on the autolink-ios rb file
    • ca09ae8 Update validateBaseUrl to use latest regex
    • 166a5dd Get ReactiveNative compiled with Clang 10 (#28362)
    • 158b558 [local] update detox to work on Xcode 12
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.8.8 to 2.8.9 in /Example

    Bump hosted-git-info from 2.8.8 to 2.8.9 in /Example

    Bumps hosted-git-info from 2.8.8 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.15 to 4.17.21 in /Example

    Bump lodash from 4.17.15 to 4.17.21 in /Example

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.21 to 0.7.28 in /Example

    Bump ua-parser-js from 0.7.21 to 0.7.28 in /Example

    Bumps ua-parser-js from 0.7.21 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • how to include righticon

    how to include righticon

    i try to used as usual style to put the righticon but the icon doesnt appear. Got other style on how to put righticon?

    opened by nuralliffah 0
  • Use with multiline

    Use with multiline

    How can i use your Libraray with multiline ? The Textfield does not grow when typing

    opened by meikbolender 0
  • Prop 'selectTextOnFocus' doesn't work on iOS

    Prop 'selectTextOnFocus' doesn't work on iOS

    I want the text of a Kohona element to be selected as soon as the TextInput is klicked. This works fine on Android, but on iOS it doesn't. I already had a look at the Kohona.js file of the library but I couldn't find the problem.

    I also tried clearTextOnFocus, this works fine on iOS. Also, if I use a normal RN <TextInput ... />, it works as well.

    Some of my dependencies: "react": "16.9.0", "react-native": "0.61.5", "react-native-textinput-effects": "0.6.1",

    This is my code:

    
                        import {Hideo, Kohana, Kaede} from 'react-native-textinput-effects';
                        // ...
                        <Kohana
                            inputStyle={[styles.inputStyle, {color: '#666'}]}
                            labelStyle={styles.label}
                            label={typeOfPoints}
                            labelContainerStyle={{ padding: 5 }}
                            iconClass={AwesomeIcon}
                            iconName={'bar-chart'}
                            iconColor={'#000'}
                            iconContainerStyle={{ padding: 10 }}
                            inputPadding={16}
                            returnKeyType={'done'}
                            keyboardType={'phone-pad'}
                            value={value}
                            onChangeText={(input) => this.setPoints(typeOfPoints, input)}
                            selectTextOnFocus={true}
                            useNativeDriver
                        />
    
    opened by schrulnz 0
  • unable to change font family

    unable to change font family

    export default class Login extends Component { render() { return (
    <View style={styles.input_section}>
    <Fumi style={styles.input} label={'mobile'} iconClass={FontAwesomeIcon} labelStyle={styles.input_label} iconName={'mobile'} iconColor={'#f95a25'} iconSize={20} iconWidth={40} inputPadding={16} /> ); } }

    const styles = StyleSheet.create({
    input_label: { fontFamily: 'yekan', }, });

    opened by kavehnaseri 2
Releases(v0.6.1)
Owner
Halil Bilir
Building web and mobile apps. Open for a new job/contract.
Halil Bilir
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 117 Aug 30, 2021
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

Douglas Nassif Roma Junior 627 Jan 18, 2022
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2k Jan 14, 2022
Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

null 1.1k Jan 11, 2022
Text input mask for React Native on iOS and Android.

Text input mask for React Native, Android and iOS

null 1.1k Jan 11, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Jan 16, 2022
Parse text and make them into multiple React Native Text elements

React Native Parsed Text This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predef

TaskRabbit 1.1k Jan 15, 2022
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Ben-hur Santos Ott 1.5k Jan 12, 2022
A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible.

React Native Search Box A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/

React Native Vietnam 445 Jan 10, 2022
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Paúl 13 Jan 11, 2022
React native custom timepicker (24 hours format) for iOS

React Native TimePicker For iOS React native custom timepicker (24 hours format) for iOS Screenshots Installation $ npm i react-native-timepicker --sa

Rokas Milasevicius 23 Apr 21, 2020
Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)

React Native Navigation Drawer Extension React Native Navigation by Wix does not offer an in-built solution for displaying a drawer on iOS. Their curr

Luke Brandon Farrell 149 Jan 11, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
Custom version of the IOS SegmentedControl component

react-native-custom-segmented-control Native UI component for Segmented Control with custom style animationType: 'middle-line' selectedLineAlign: 'tex

Wix.com 160 Nov 27, 2021
Custom touch bar or digital macropad app for GNU/Linux 🐧 using an Android device 📱

Custom touch bar or digital macropad app for GNU/Linux ?? using an Android device ??

Fabián Velosa 3 Dec 14, 2021
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 24 Jan 21, 2022