n4kz / react-native-material-textfield Goto Github PK
View Code? Open in Web Editor NEWMaterial textfield
License: Other
Material textfield
License: Other
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.
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?
<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
.
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?
or is it me ?
thank you :)
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.
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!
Hello,
thx very much for that nice component.
Now I'm looking for how to change that component's width.
Did I miss something?
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
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?
I think it will be cool to stop firing onChangeText event when user types new value which length is more than defined characterRestriction.
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.
if placeholder and label is provided to the textfield the label appears over the placeholder
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!
Hi, is there a way to change to width of the bottom line?
Cheers
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
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!
Is there an easy way to add icon(s) to the left of the input field? Like #28 ?
Thanks for the great work!
Example:
<TextField
label='Answer'
value={'42'}
error={''}
/>
Temp. fix is change from ''
tonull
.
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.
Like this?
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. ๐
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?
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!
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
}
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
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.
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})}}
/>
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")
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.
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.
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
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} />
I set A Touchable* besides of this component ,and this component editable={false},when I touch this button,there had no touchable event happend.
Unknown padding top in every input, I think it's the reserved space for labels, but in many cases it's disturb.
prop underlineColorAndroid="transparent" not working
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
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();
}}
/>
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.
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 !
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.
Actual behaviour: TextField still shows "1970aaa", only when the user enters another number the actual current state will be displayed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.