n4kz / react-native-material-textfield Goto Github PK

This code generate a error value is not defined:

<TextInput
    label={'Email'}
    keyboardType="email-address"
    value={email}
    onChangeText={this.updateEmail}
/>

I think problem is here https://github.com/n4kz/react-native-material-textfield/blob/master/src/components/field/index.js#L134, need change value to this.value().

Thanks for component!

When i set the value of the error, the error message desapears if characterRestriction is exceeded.

Note that if the title and error are set it behaves normally and the error message appear even if the characterRestriction is exceeded.

The RN 0.46.1 release notes state that the contentSize property was removed from the onChange event (and now onContentSizeChange is invoked when it is supposed to). This breaks this event delegation, since contentSize is null.

To continue supporting older versions of RN, a null check for contentSize in the same if statement should fix the issue.

Hey,
I found that error message under input filed will be clipped if text is too long.
Could you please make it configurable to be able to show in multiline?

I have a TextField that should only allow numeric characters. For this I implemented a onChange-callback that filters everything except 0-9 and sets it to state.

class SomeComponent extends React.Component {
    onChange = (value) => {
        this.setState({ value: value.replace(/[^0-9]+/, "") })
    }

    render() {
        return <TextField value={this.state.value} onChangeText={this.onChange} />;
    }
}

When the filtered value is the same as the initial value, the TextField won't update the displayed text.

1. initial state of SomeComponent: { value: "1970" }
2. user enters: 1970aaa
3. state of SomeComponent stays on { value: "1970" }
4. (expected) TextField is re-rendered with "1970" as its text (this works with RNs TextInput)

Actual behaviour: TextField still shows "1970aaa", only when the user enters another number the actual current state will be displayed.

When testing on both iOS and Android emulators, the iOS shows the underline for the field but the Android emulator does not. Is there a fix for this?

I read all properties, but i didn't get how can i remove the border bottom line

I have been trying to augment the example code to pull it into my application. Currently everything is working with the exception of the error messages not being generated.

I can pause the debugger before the render method returns and guarantee that my error object has the appropriate error messages contained within it. More than that, if I hard-code an error message onto the Textfield component, it does not render at all.

I can include my code if you would like to take a look at it. I am currently running RN 0.46.1

Hi,

how i could put label and error in center?

I'm trying this:

<TextField
    textAlign="center" // align input text :)
    labelTextStyle={{flex: 1,flexDirection: 'row', flexGrow: 1, textAlign: 'center'}} // not align label :(
    // without prop to error text :(
/>

thanks in advance

One small thing: when running jest, line 13 of /src/components/field/index.js throws the following error: Cannot find module 'react-native/package' from 'index.js' link to file

I found that replacing
import RN from 'react-native/package';
with
import RN from 'react-native/package.json';
solves that problem.

Hello! First let me say congrats on an awesome component!

I recently upgraded to v 0.9.0 and now I'm forced to explicitly set blurOnSubmit to true for single-line text inputs. This behavior is opposite to react-native's TextInput:
https://facebook.github.io/react-native/docs/textinput.html#bluronsubmit

I was not experiencing this behavior prior to upgrading.

Wrong height if user doesn't use break in input, like this

prop underlineColorAndroid="transparent" not working

Is there an easy way to add icon(s) to the left of the input field? Like #28 ?

Thanks for the great work!

I think it will be cool to stop firing onChangeText event when user types new value which length is more than defined characterRestriction.

Hi, is there a way to change to width of the bottom line?

Cheers

I'm trying to simulate a textarea component using the TextField. When i add numberOfLines property on the TextField no effect takes place.

               <TextField
                   label={label}
                   multiline={true}
                   numberOfLines={5} />

Like this?

https://i.stack.imgur.com/YxAJd.png

I want to remove the underline of textfield.. (Red box marked in image).
I tried with 'underlineColorAndroid' and 'tintColor' properties.

Hello,

thx very much for that nice component.
Now I'm looking for how to change that component's width.
Did I miss something?

If your text inside the input doesn't fit in one line, there is a different spacing. When the line increases, the margin is consistent.
Here is the expected correct spacing:

If you have more than one line of text, the spacing between the text and the highlight line is too narrow:

I Want to apply my styles to Animated.View for example Default padding top is 32.I want to apply my own padding and some other attributes

First of all, congrats for the component, it's very nice!

Can you consider making floating labels optional? If we don't provide a label param, and provide a placeholder, we get the exact visual effect I want. But I get a warning: Failed prop type: The prop 'label' is marked as required in 'TextField'.... That's great for places where you want to save some vertical space.

Although MD spec says "Every text field should have a label", I don't think they mean that for its floating state too. If you open Android's built-in contacts and start adding a new one, you'll notice those fields don't have a floating label, just a placeholder.

I could think about two ways to implement that:

A) Just make label optional. But if clients don't use placeholder either, we end up with a blank field. If we want to prevent that state we could enforce label OR placeholder to be present.

B) Add a floatingLabel={true|false} extra param (true as default to keep consistency).

Let me know what you think.

if placeholder and label is provided to the textfield the label appears over the placeholder

When selecting multiline mode, the line overlaps the input content as you can see in the image below.

Hi! After the commit where you allowed not showing the bottom line I can't figure out how to actually SHOW it when the field is NOT disabled.
This kind of works, but messes things up when the field is disabled.

inputContainerStyle={{
                        borderBottomColor: 'red',
                        borderBottomWidth: 1,
                    }}

Thank you!

I want to suggest to either make the dotted line not show when disabled is set to true or add a property called showDottedUnderline which would default to true to retain current functionality and thus allow me to hide for my use case.
I'd like to show something like this.

In my opinion, I think to still have a line underneath text when it is set to disabled will give the user the false assumption that the text is still editable.

I'm happy to submit a PR with this feature request, I would like to know what option I should go with if this makes sense to you as well. 😄

Thank you for this great library - we are using it in our App already and are very satisfied.

One thing, that is kind of important for us, is the support of custom fonts. Would it be possible to add a fontFamily for the text views used in the TextField?

In an effort to scroll a field into view when it grows, I wanted to use the onContentSizeChange event.
It seems it is not called from the event handler within the code:

onContentSizeChange({ nativeEvent }) {
    let { fontSize } = this.props;
    let { height } = nativeEvent.contentSize;

    this.setState({ height: Math.max(fontSize * 1.5, Math.ceil(height)) });
  }

Whereas in other events the handler is called like this:

onChangeText(text) {
    let { onChangeText } = this.props;

    if ('function' === typeof onChangeText) {
      onChangeText(text);
    }
   ...
}

I wouldn't mind adding the missing lines and add a couple of tests. PR?

<TextField label={'Hello'} style={{ letterSpacing: 10 }} value={'World'} />

This should change the letter spacing of the entered text like it does for a normal TextInput but it has no effect for TextField.

I set A Touchable* besides of this component ,and this component editable={false},when I touch this button,there had no touchable event happend.

Hi there. I've tried to style title and label using the labelTextStyle and titleTextStyle but nothing happens. Adding i.e. containerStyle works fine.

Here is an example of what i'm doing:

inputContainerStyle={styles.inputContainerStyle}
labelTextStyle={styles.label}
titleTextStyle={styles.title}

When i enter just textColor='white' it works also fine. Thanks!

Please help me :))

        <TextField
          tintColor='#A72822'
          selectionColor={tintColor}
          ref={this.first_nameRef}
          label='Нэр'
          value={first_name}
          onFocus={this.onFocus}
          onChangeText={ (first_name) => this.setState({ first_name }) }
          multiline={true}
          maxLength={30}
          error={errors.first_name}
          returnKeyType = {"next"}
          onSubmitEditing={(event) => {
            this['last_name'].focus();
          }}
        />

Hi, i have updated to react-native 45.1 and the error view takes the background of the parent view:

This is my code

<View style={styles.textInputView}>
          <TextField
            label='Email'
            tintColor='rgb(19,41,76)'
            onChangeText={(email) => this.setState({email})}
            value={this.state.email}
            accessibilityLabel='Email'
            autoCapitalize='none'
            autoCorrect={false}
            keyboardType='email-address'
          />
        </View>
        <View style={styles.textInputView}>
          <TextField
            label='Password'
            tintColor='rgb(19,41,76)'
            onChangeText={(password) => this.setState({password})}
            value={this.state.password}
            accessibilityLabel='Password'
            secureTextEntry={true}
            autoCapitalize='none'
            autoCorrect={false}
          />
        </View>

and my styles:

textInputView: {
    padding: 5,
    marginTop: 20,
    backgroundColor: '#CFD3DE',
    borderColor: 'gray',
    borderRadius: 5,
    borderWidth: 1
  }

Example:

<TextField
    label='Answer'
    value={'42'}
    error={''}
 />

Temp. fix is change from '' tonull.

Hi! Thanks for nice component, lots of use!

I've encountered issue when I tried to focus next field with react-redux lib.
I saved the function reference to state in componentDidMount():

componentDidMount() {
    this.setState({
      focusPassword: this.refs.passwordField.getRenderedComponent().focus
    });
}

And tried to attach it to onSubmitEditing prop in react-redux/Field component. As a result when I'm trying to press Next I get Cannot read property disabled of undefined pointing me to this line
https://github.com/n4kz/react-native-material-textfield/blob/master/src/components/field/index.js#L165

I noticed that function is not bound (this.focus = this.focus.bind(this)) within constructor of component, but instead it has this.onPress = this.focus.bind(this).
After changing my componentDidMount() from focus to onPress everything works as expected.

Documentation on README page seems to refer to focus function and onPress is not present at all. Looks like either code or docs should be fixed. I suppose it's better to fix code in order to maintain expected behavior after using plain TextInput component.

Thanks in advance!

Hi,

I wanted to know if there is any way to make the text field label fall back to its place when the user click anywhere else,other than on the next/other text fields (and also if nothing entered to it)

Similarly as when a click is done on the field the label goes up and falls down if nothing entered to it and next text field is clicked on. In the same manner,the label has to collapse down (when nothing is typed) and the user clicks on the screen some where else.

Thanks for fixing my issue with internal state! Been using the 0.2.7 tag for a while without issues now.

I did notice that this version is not yet on NPM though… do you plan to do a release soon?

or is it me ?

thank you :)

I've used the example of this repo. So basically, tap on the first field and you see.

Without KeyboardAvoidingView:

With KeyboardAvoidingView:

Here is my changes to the original example:
xvonabur@8e8cbdd

Hello and thank you for sharing this component.
Its probably the most stable floating-label type Input out there.
Would be good if defaultValue would be implemented instead of value just to keep the default pattern.

Is it possible to change de label (after animating) fontSize? Couldn't find any reference in either the code or the docs.

And since you let us define disabled , there should be disabledStyle.
Container styles would also be appreciated. Since you define the paddingTop per example, and In my use case it was just too much.
Just a couple enhancements. I can probably make a pr in the future if you don't have the time

Unknown padding top in every input, I think it's the reserved space for labels, but in many cases it's disturb.

I cloned the repository and changed the version of react native to this :

"react": "15.4.1",
"react-native": "0.42.0",

I get this error
undefined is not an object (evaluating "_reactnative.ViewPropTypes.style")

I tried switching to this component from standard TextInputs and noticed that the text field content disappears on re-render when the outer components state changes in onChangeText.

I think this happens because onChangeText is called before changing the internal state, though I'm not sure.

https://github.com/n4kz/react-native-material-textfield/blob/master/src/components/field/index.js#L176

Its not that big of a deal as long as you set the value property on the TextField, but its not behaving like the default TextInput, since that one doesn't loose its internal state when adding a onChangeText handler.

// TextField will loose the current value on each onChangeText
<TextField
    onChangeText={(example) => {this.setState({example: example})}}
    />

// TextField will still show the current value on each onChangeText
<TextField
    value={this.state.example}
    onChangeText={(example) => {this.setState({example: example})}}
    />

Hi,

I guess i do it wrong... So i'm just asking for help or informations.
When i set multiline={true} and try to press return, the text input doesn't grow in height and it unfocus.

Is it normal? Or there is another way?

Thx !

According to the documentation:
https://facebook.github.io/react-native/docs/textinput.html
blurOnSubmit should be false if multiline is true.
Of course it is possible to pass it explicitly as props, but it would be nice if the default value respects the wrapped native component convention.