halilb/react-native-textinput-effects

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

react-native-textinput-effects's Issues

Fonts referenced in templates

Got a font family error when I used the Madoka template.

When I removed fontFamily: 'Arial', from /lib/Madoka.js, it uses my default font and no error.

label: {
backgroundColor: 'transparent',
fontFamily: 'Arial',
fontWeight: 'bold',
color: '#6a7989',
},

Feature Request : Disabled Mode

I want to use RNTIE to display a time.

However, I don't want the user to edit the time directly. I want the user's clicking RNTIE to open a time picker dialogue instead. I want the text-editing part of the component to be disabled.

Ideally, it would look something like this.

<TouchableOpacity onPress={openTimeDialogue}>
  <Fumi
    label={'time'}
    iconClass={Icon}
    iconName={'bell'}
    iconColor={colors.primary}

    disabled={true} //NEW
    value={toTimeString(this.props.time)}
  />
</TouchableOpacity>

Here is the current behavior

Using along with masked text?

I wanna format the textinput content by using masked text.
Anyway?

Icon Size

Hi.

can we add a props here that could adjust the size of icon? it's fixed 20.

editable prop doesn't work correctly

i disabled editable,but yet when i click the left side of TextInput it popup(show) the keyboard.

why is that. need a Quick Fix!

  render() {
    const { container, innerContainer, instructionText, inputMarginTop } = styles;

    return (
      <View style={container}>
        <View>
          <Text style={instructionText}> MyCarParks will send a one time SMS message to verify your phone number. Carrier SMS charges may apply. </Text>
        </View>
        <ScrollView style={innerContainer}>
          <Kohana
            style={{ backgroundColor: 'rgba(93, 116, 174, 0.2)' }}
            label={'0121 234 5678'}
            iconClass={FontAwesomeIcon}
            iconName={'phone'}
            iconColor={'#ddd'}
            iconColor={'#5D74AE'}
            labelStyle={{ color: '#5D74AE', fontWeight: '300' }}
            inputStyle={{ color: '#5D74AE' }}
            onChangeText={this.onMobileChange.bind(this)}
            editable={false}
            value={this.state.text}
          />
        <Text style={{ textAlign: 'center', fontWeight: '100', marginTop: 5 }}>We'll send a text to verify your phone</Text>

        <View style={{ marginTop: 80, marginBottom: 10 }}>
            <Keyboard
                keyboardType="decimal-pad"
                onClear={this.handleClear.bind(this)}
                onDelete={this.handleDelete.bind(this)}
                onKeyPress={this.handleKeyPress.bind(this)}
                disableDot={true}
                disableOtherText={true}
                disableBorder={true}
                disableClearButtonBackground={false}
            />
        </View>

        <TouchableOpacity style={[inputMarginTop, styles.button]} onPress={this.onButtonPress.bind(this)}>
            <Text style={styles.buttonText}> NEXT </Text>
        </TouchableOpacity>

        </ScrollView>
      </View>
    );
  }

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!

textInput Compenent from react-native does not work

Hello,
Thank for you great compenent.
but please explain what do you think about the subject
<Kohana
placeholder="Email"
placeholderTextColor="rgba(0,0,0,0.2)"
keyboardType="email-address"
selectionColor="#4c8af0"
style={styles.input}
autoFocus={true}
autoCapitalize="none"
autoCorrect={false}
onChangeType={(email) => this.email = email}
returnKeyType="next"
onSubmitEditing={() => this._passwordRef.focus()}
/>

i got

Exception thrown on input focus animation

Hi,

I tried to use Fumi component (putting exactly the same code as is in README). The component is displayed, but when I tap the input the animation doesn't work and I get the following excpetion:

'Icon "viewConfig" is not defined' (sorry I don't know to to copy and paste full react native stack trace.. I tried to upload a image, but to no avail)

What I did to workaround was: I subclassed FontAwesomeIcon (from 'react-native-vector-icons/FontAwesome') and added viewConfig={} property (valued with empty object); and then used this class in <Fumi ... iconClass={MyIcon} />

class MyIcon extends FontAwesomeIcon {
  viewConfig = {};
}

//...

<Fumi
              label={'Course Name'}
              iconClass={MyIcon}
              iconName={'university'}
              iconColor={'#f95a25'}
            />

I'm new to react-native, still experimenting, so I'm not sure what is the true cause of the issue (maybe this commit - notice the added lines that make viewConfig property required) or what would be the best way to fix it (a fix could be made in either react-native-textinput-effects, by adding viewConfig property somewhere around here, or in react-native-vector-icons, by adding viewConfig to the the root of their Icon classes).

If it helps, I'm using react-native 0.37.0.

keyboardType supports

I confirmed that keyboardType is not supported.
any fixes?

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,

CPU Usage

Hello there,

I am using macbook and Genymotion.

When I add say the FUMI component to my APP my CPU usage is nearly 100% under the Genymotion player, as soon as I remove the component and add a standard one the CPU usage drops completely.

Any ideas?

Components wont display in RN 0.36

see facebook/react-native@0a9b6be

Can't tap on one field when another field is focused. Need to tap twice.

Hi, In many apps, if we try to switch between input fields in a form with multiple form fields by tapping on the second field, the field we currently on will loose focus and the tapped field will be focused. But while using this plugin, it won't happen like this. If we tap on a second field, the already focused field will loose focus and the keyboard will hide. But the tapped field will not be focused. We have to tap on it again! How can I fix this?

how to get input text value?

thankyou your amazing effects.
but,how to get the input value, it is confused me .
i wish could have function like this onTextChange={(value)=>{...}}

Icon appearing left in Kohana

Hi, and thanks for the great component !
I noticed a display issue in the Kohana component with the 'envelope' icon from FontAwesomeIcon.
I did not try more icons, the 'key' one works well.
Here you can see the problem :

The icon still appears a little when the TouchableWithoutFeedback is not touched.
I modified the
transform: [ { translateX: focusedAnim.interpolate({ inputRange: [0, 1], outputRange: [-15 - iconSize, 0], }), }, ]
from Kohana.js
to :
transform: [ { translateX: focusedAnim.interpolate({ inputRange: [0, 1], outputRange: [-20 - iconSize, 0], }), }, ]
and it seems to work. But I don't want to have to modify the Kohana.js as I will likely export the project and my coworkers will npm install without this change made.
I'm not sure my change works on all icons though.
Thanks

Can not get two rows of this text input

Hello,
For some reason i don't understand why i cannot put two rows together:
loginForm =
<View style={{marginHorizontal: Metrics.section, marginTop:7}}>
<Hideo
iconClass={FontAwesomeIcon}
iconName={'user'}
iconColor={'#40243f'}
// this is used as backgroundColor of icon container view.
iconBackgroundColor={'#ffdd71'}
inputStyle={{ color: '#464949' }}
/>
<Hideo
iconClass={FontAwesomeIcon}
iconName={'key'}
iconColor={'#40243f'}
// this is used as backgroundColor of icon container view.
iconBackgroundColor={'#ffdd71'}
inputStyle={{ color: '#464949' }}
/>

Thanks

Icon viewConfig is not defined

I have encountered this
"react-native-textinput-effects": "0.2.0",

"react": "15.3.2",
"react-native": "0.37.0",

Android: Animations not triggered

When I install a clean build from the examples on my Android, the animation won't trigger when textinput get's focus. No errors are generated.

I'll try to debug the issue and when I have a solution I'll create a pull request. But does anyone have an idea why this is? Thanks!

Moto G5
Android 7.0

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 :)

Feature Request: Clear button

It would be great and make the library very complete.

Something like this, it would appear when the textinput is not empty:

What do you think?

underlineColorAndroid not working with kaede

iOS: Lag while using custom keyboard

I'm using Fumi, and it's animation doesn't smooth while using custom keyboard.
With native keyboard, it performs better but i still can see the glitch.

Margin between label and input text on Hoshi

Hi, I can´t seem to edit the "active state" position of the label on Hoshi,

Problem is Im´using a large font (25), my dummy text on the label looks great but when
I select the input field the dummy label seems to animate up the same amount as if I were using a small font, rendering it almost on top of the input field text.

Would need to edit the label offset on active.

how to use icons from '@expo/vector-icons' or custom icons?

keyType doesn't work

I set property as keyType="decimal-pad" or keyType={"decimal-pad"} or 'number-pad', 'numeric'..
it doesn't works on Fumi with iphone simulator iphone7, android.

This problem appears only on me?

Not working on RN 0.43

Receives "undefined is not an object (evaluating '_react.PropTypes.string')".
I believe this is due to the breaking changes introduced in RN 0.40 above.

Allow for a separate placeholder and label for the text input

I wanted to suggest a feature for this component and get some feedback from the users of the component. I think traditionally one may create a text input component by having a separate label and a text input component and the text input component could have a placeholder which may instruct the user what needs to be inputted or some example of valid inputs. With this component, we are going away from an explicit label and specifying the label as part of the text input itself due to which it is not really possible to specify a placeholder for the text input as it would conflict with the label in the rendered component.

I was thinking if it would make sense to add functionality such that if both placeholder and label are specified, then if the text input box is empty, the placeholder is shown and if the text input box has some valid value, the label is shown. By doing this, we can have placeholder such as Enter name of the product as placeholder and Product Name as the label. The placeholder provides a clear instruction to the user what is needed and once the user enters the product name, the label Product Name is shown as expected. Just having Product Name as the placeholder when the text input box is empty may sometimes be confusing to a very layman user.

Additionally, if the placeholder is not specified, we fallback to the current behavior. So, it is not going to break any existing code as the placeholder and label can't be used together right now.

SecureTextEntry doesn't work on Android

I set secureTextEntry as {true} on property

<Fumi style={{flex: 1}}
                              label={'비밀번호'}
                              iconClass={FontAwesomeIcon}
                              iconName={'lock'}
                              iconColor={'#f95a25'}
                              onChangeText={(password) => this.setState({password})}
                              keyboardType="email-address"
                              autoCapltialize={"none"}
                              autoComplete="none"
                              secureTextEntry={true}
                        />

It works on IOS but not on Android
How can I fix it?

Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

I get this warning whenever I try to run my app using some TextFields but the app doesn't even launch on Expo. Please help.

can't find variable : Hideo

I used Hideo once to see how it looks, and now I just removed it and it's working fine in android emulator but when I build it through my device it says

can't find variable: Hideo

improve the animation by using Native Driver

According to the newly release blog, we should be using the useNativeDriver: true from the code.

http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html

example:

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // <-- Add this
  )}
>
  {content}
</Animated.ScrollView>

Feature Request: Autocomplete

Hi guys,
What about implementing autocomplete support?

Cann't focus input with the label if the input is not editable

I notice if I use the props editable={false} of TextInput to put it in read only mode. But I can focus the field if I click on the label because in the code there is:
<TouchableWithoutFeedback onPress={this.focus}>

So I fix the bug for the moment like this in the BaseInput class:

focus() {
    if(!this.props.editable)
        return
  this.inputRef().focus();
}

Error while updating property 'backgroundColor' in shadow node of type: AndroidTextInput

When adding a backgroundColor to Hoshi on android:

setting keyboardType maxLength iosreturnKeyType

setting keyboardType maxLength iosreturnKeyType

Hoshi label to shrink when moving up

Hi,
Just wondering if there is a way to get the label to shrink/change colour when it moves up to the top?

Feature Request : Validation errors with animation

It will be nice, If you add validation also with animation :)

Passing editable={false} not working.

editable={false} prop is not working in any of the inputs.

Makiko Error

Makiko has errors.
Image has errors.

Unable to override border size and color in Hoshi

Looks like it could be fixed by swapping the order of containerStyle and styles.container here: https://github.com/halilb/react-native-textinput-effects/blob/master/lib/Hoshi.js#L51

You should add alignSelf: 'stretch' styles

Thanks for awesome component! I think you should add alignSelf: 'stretch' to all examples.

<Fumi
    style={{alignSelf: 'stretch'}}
    label={'Course Name'}
    iconClass={FontAwesomeIcon}
    iconName={'university'}
    iconColor={'#f95a25'}
/>

code samples and ss for without stretch:

<View style={{flex: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems:'center', backgroundColor: 'red'}}>
          <Text style={{color: 'white', fontSize: 20, fontWeight: 'bold'}}>
            Test
          </Text>
          <Fumi
            label={'Course Name'}
            iconClass={FontAwesomeIcon}
            iconName={'university'}
            iconColor={'#f95a25'}
            />
</View>

with alignSelf: 'stretch'

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.
8e5e4c8

Thank you very much.

Example not running

@halilb, how do you run the example folder?

I'm getting:

error: bundling: UnableToResolveError: Unable to resolve module `react` from `/.../react-native-textinput-effects/lib/Kaede.js`: Module does not exist in the module map

I've follow the instructions, but the error keeps going.

Even cleaning TextInputEffectsExample.js nothing change.

Readonly mode

Is there any way to make the input fields readonly?

Can't focus next TextInput onSubmitEditing

I don't know why but I can't do it and I saw all the questions and answers over stackoverflow and issue #17

I think probably it is because the actual TextInput is inside a component, or refs are no longer working (deprecated?) on react native 0.44

Can anyone enlighten me about this, please?

TextInput secureTextEntry

anyway i was trying to make your custom input as secrueTextEntry to make it as password input
but for example

<Fumi label={'Password'} labelStyle={{ color: '#58595B' }} inputStyle={{ color: '#f95a25' }} iconClass={FontAwesomeIcon} iconColor={'#f95a25'} iconSize={15} secureTextEntry={true} />

this way didnt work so i look into your js(fumi.js) file
added password to the const{}.this.props and to static propTypes as bool
and then under the underlineColorAndroid added secureTextEntry={password}

i dont know why this way worked but it worked anyway with no error
i want you to add this(passwordInput) to this awesome custom input

idk why but if i do that it's kinda laggy on android

Thank you and have a good day

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.

Make the Padding configurable for better styling

Hi,

Great lib, can we make the padding and label height a prop so the user can configure the styling to their needs?

https://github.com/halilb/react-native-textinput-effects/blob/master/lib/Madoka.js#L12-L13
https://github.com/halilb/react-native-textinput-effects/blob/master/lib/Sae.js#L12-L13

The same goes for fontSize, I tried to pass it via a prop, but this is not possible as when merged is overridden.

https://github.com/halilb/react-native-textinput-effects/blob/master/lib/Madoka.js#L118-L121

The ability to style things more would be awesome.
Thanks!

NA

sorry wrong repo 😂

Request: Be able to put the icon on the left or the right

It'd be nice to be able to put the icons on the left or the right side of the input.

I'd also gladly contribute to this if you want!