I'm using react native text field component how can i remove bottom underline in textfield
this is my code
i followed this link: https://github.com/n4kz/react-native-material-textfield
constructor(props) {
super(props);
this.state = {
userName:'',
password:''
}
}
componentWillMount() {
}
componentDidMount(){
}
render() {
//let { userName } = this.state;
let { password } = this.state;
return (
<View style={{flex:1,justifyContent:'center'}}>
<View style={{flex:0.2,justifyContent:'center',flexDirection:'row'}}>
<View style={{flex:12}}></View>
<View style={{flex:76,borderWidth:1,borderColor:'black',borderRadius:5,marginBottom:13.7}}>
<TextField style={{ color: 'black',borderColor:'transparent'}}
label='Phone number'
textColor={'black'}
value={this.state.userName}
labelHeight={40}
labelPadding={8}
padding={10}
Bottom padding= {10}
Top padding={4}
//width={50}
//borderColor={'black'}
// textFocusColor={'orange'}
//underlineColorAndroid='transparent'
baseColor={"black"}
labelHeight={32}
blurOnSubmit={true}
//characterRestriction={10}
onChangeText={(data) => this.setState({ userName: data })}
/>
</View>
)
}
You can try underlineColorAndroid='rgba(0,0,0,0)'
Hope it helps
Other TextInput properties will also work
Ref: https://github.com/n4kz/react-native-material-textfield
React native material text field component (<TextField />) can also use all of the properties from text input component (<TextInput />). So, you can remove the underline border using underlineColorAndroid props. Set this prop to be transparent.
<TextField underlineColorAndroid="transparent" />
Try this: lineWidth={0} if you want to hide the default underline and if you want to hide the line after which appears after click try this: activeLineWidth={0}.
Fine, after using this library I end up with this solution:
You can use one of the props of react-native-material-textfield activeLineWidth with 0 as an argument.
underlineColor="transparent"
Related
I have a simple TextInput that I want to put a reference on in my render:
<View>
<TextInput ref={(component) => this._inputElement = component}>Input</TextInput>
{console.log(this._inputElement)}
<Button
onPress={this.addAddress}
title="Submit"
color="#841584"
/>
</View>
I want to then use that ref in a function above that is bound in my contructor:
constructor(props) {
super(props);
this.state = {
addresses: []
};
this.addAddress = this.addAddress.bind(this);
}
addAddress function:
addAddress(event, result) {
console.log("reference:", this._inputElement.value);
}
The console log in both the render and addAddress are always undefined.
I have looked around but no one seems to be having my problem, usually they have a typo or didn't bind the function they then want to call.
Why do I seem unable to have references?
Using State
Usually the way to use TextInput is to store the value in state.
Remember to initialize the address in your state as an empty string, otherwise having a null value for address could cause an error.
constructor(props) {
super(props)
this.state = {
....
address: ''
}
}
Then you could define your text input as follows
<TextInput
onChangeText={address => this.setState({address})}
value={this.state.address}
/>
Then in your addAddress
addAddress(event, result) {
console.log("reference:", this.state.address);
}
Using Refs
Alternatively you could use ._lastNativeText to access it from the reference
<TextInput
ref={ref => { this._inputElement = ref }}>
Input
</TextInput>
then in your addAddress
addAddress(event, result) {
// I always check to make sure that the ref exists
if (this._inputElement) {
console.log("reference:", this._inputElement._lastNativeText);
}
}
I wouldn't recommend the second method as you are accessing private methods that could be liable to change in a future release.
Textinput self-encloses
<View>
<TextInput ref={ref=> (this._inputElement = ref)}/>
<Button
onPress={this.addAddress}
title="Submit"
color="#841584"
/>
</View>
addAddress(event, result) {
console.log("reference:", this._inputElement._lastNativeText); //this get's the value, otherwise it's undefined
}
This snippet works properly in react native and react native web:
const txtRef = useRef(null)
return(
<TextInput
ref={txtRef}
onChangeText={text => txtRef.current.value = text}
/>
<Button
title='log and reset'
onPress={() => {
console.log(txtRef.current.value)
txtRef.current.clear()
txtRef.current.value = ''
}}
/>
)
`
I am creating dinner decider app and want to add items into an array from the user input. input added to an array list and shows in alert box but not reloat the FlatList. Please help
Here is my code for the same.
constructor(props){
super(props);
this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
}
render() {
return (
<Container>
<Header></Header>
<Content style={{padding:20}}>
<Text style={{fontSize: 30, textAlign:'center', marginVertical:30,}}>Food Decider</Text>
<Item floatingLabel>
<Label>Add Item</Label>
<Input
onChangeText={(text) => this.setState({userdata:text})}
/>
</Item>
<Button block success style={{marginTop: 20,}}
onPress={this.onSubmit.bind(this)}
>
<Text>Add Item</Text>
</Button>
<FlatList
data = {this.state.items}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</Content>
</Container>
);
}
onSubmit(){
this.state.items.push({key:this.state.userdata});
alert(JSON.stringify(this.state.items));
}
Thanks.
You need to use prop legacyImplementation=true in FlatList so that it does the real time changes to the FlatList.
Use:
<FlatList legacyImplementation=true />
first of all in you onSubmit function you didn't set the state just push a value
onSubmit(){
this.state.items.push({key:this.state.userdata});
alert(JSON.stringify(this.state.items));
}
whereas it should be something like this
onSubmit(){
let newState = this.state.items;
newState.push({key:this.state.userdata});
this.setState({items:newState});
alert(JSON.stringify(this.state.items));
}
and also bind your onSubmit function in the constructor like this
constructor(props){
super(props);
this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
this.onSubmit = this.onSubmit.bind(this);
}
In Flat list there is also one more option
"extraData={this.state.metaData}"
you can use this to reset/reload the FlatList on your action complete ,you can use like this:
constructor(props){
super(props);
this.state={
metaData:false,
}
}
<FlatList
data = {this.state.items}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
extraData={this.state.metaData}
/>
after button click you can use this
onSubmit(){
let {metaTAbBarData}=this.state
this.state.items.push({key:this.state.userdata});
this.setState({metaData:!metaData})
}
it will reload when you click on submit button
it will help you , its help me
onSubmit(){
/*
* FlatList is a PureComponent which means that it will not re-render
* if props remain shallow-equal So, We are Cloning the items array to
* clonedArray, So that the reference to this.state.items will change.
* Means this.state.items === clonedArray will give false value.
*/
let clonedArray = this.state.items.slice();
clonedArray.push({key:this.state.userdata});
this.setState({items: clonedArray});
}
I am following the documentation on InputAccessoryView here: https://facebook.github.io/react-native/blog/2018/03/22/building-input-accessory-view-for-react-native.html
with code:
export default class Debug extends Component {
constructor(props) {
super(props);
this.state = {text: 'Hello world from debug'};
}
render() {
const inputAccessoryViewID = "uniqueID";
const accesory = (
<InputAccessoryView nativeID={inputAccessoryViewID}>
<Button
onPress={() => this.setState({text: 'You didnt enter the magic word'})}
title="Reset Text"
/>
</InputAccessoryView>
)
return (
<View>
<ScrollView keyboardDismissMode="interactive">
<TextInput
style={{
padding: 10,
paddingTop: 50,
}}
inputAccessoryViewID={inputAccessoryViewID}
onChangeText={text => this.setState({text})}
value={this.state.text}
/>
</ScrollView>
{accesory}
</View>
);
}
}
But the docs do not explain where I can get this id uniqueID. Is it something I can find in xcode?
InputAccessoryView is expecting a unique id for nativeID property to match with a TextInput that has the same unique id set on inputAccessoryViewID property. This way it knows to activate on that input. This way you can have different InputAccessoryViews for different TextInputs.
nativeID
An ID which is used to associate this InputAccessoryView to specified
TextInput(s).
So that uniqueID is some string that is unique which you can set to anything yourself to match with the TextInput.
I have a Text, and I want to get text value on click.
for example
click()
{
// how to get text value here
}
<Text style={{color: 'red,textAlign:'center'}} onPress={this.click.bind(this)}>
Name
</Text>
Can be done this way too...
<Text onPress={(event) => console.log(event._dispatchInstances.memoizedProps.children)} >{value}</Text>
You may use ref attribute to access Text's value.
<Text ref='myText'>This is my text</Text>
<Button onPress={()=>alert(this.refs.myText.props.children)} title='Press Me'/>
You can do maintaining the text inside the state and get the text value when button is clicked.
export default class SampleApp extends Component{
constructor(props){
super(props);
this.state = {
titleText: "Click to get text! - ",
count:1
};
}
render() {
return (
<View style={{flex:1}}>
<Text style={{color:'black'}} onPress={()=>{this.onPressTitle()}}>
{this.state.titleText}
</Text>
</View>
);
}
onPressTitle(){
alert(this.state.titleText+this.state.count);
this.setState({count:this.state.count+1});
}
}
Works fine with dynamic text.
For me, it has worked with console.log(event._dispatchInstances.memoizedProps.children[0].props.children)
Is there a way to programmatically highlight/select text that is inside a TextInput component?
You can use selectTextOnFocus to achieve this. This will ensure that all text inside the TextInput is highlighted when the field is tapped into.
Actually you can, by accessing textInput's method by refs.
<TextInput ref={input => this.myInput = input} selectTextOnFocus style={{height: 100, width: 100}} defaultValue='Hey there' />
and where you want to select all text programmatically you can
this.myInput.focus()
works on iOS, not sure about android.
Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate
I don't know if there's a better way, but I found a workaround. The text has to be focused first. Here's an example
import React { Component } from 'react';
import { Button, TextInput, findNodeHandle } from 'react-native';
import TextInputState from 'react-native/lib/TextInputState';
class MyComponent extends Component {
render() {
return (
<View style={{ flex: 1, }}>
<Button
title="select text"
onPress={() => {
TextInputState.focusTextInput(findNodeHandle(this.inputRef))
}}
</
<TextInput
selectTextOnFocus
ref={ref => this.inputRef = ref}
/>
</View>
);
}
}
I'm here to share my findings. In a List, you might encounter that selectTextOnFocus is broken. In this case you can use this method selection. From React-Native I found this:
In my case I had trouble with the selectTextOnFocus prop in a list. So I had to add a debounce function to work with selection prop.
const [shouldSelect, setShouldSelect] = useState(undefined);
const onFocus = () =>{
setShouldSelect({start:0, end:String(text).length});
}
const focus = useCallback(_.debounce(onFocus,500),[shouldSelect]);
<TextInput
selection={shouldSelect}
onBlur={()=>setShouldSelect(undefined)}
onFocus={()=>focus()}// this is important
selectTextOnFocus
ref={r=>onRef(r)}
keyboardType={'number-pad'}
autoCorrect={false}
blurOnSubmit={false}
returnKeyType={'done'}
underlineColorIos={'transparent'}
underlineColorAndroid={'white'}
allowFontScaling={false}
value={String(text)}
/>
this.inputRef.focus() sets focus to the TextInput component, and then the flag you set in the attributes selectTextOnFocus does the rest.
Note: For those who wants to use selectTextOnFocus short answer. Actually, it works fine in IOS, but doesn't work in Android.
Thanks to Arnav Yagnik; Following is a similar approach in a functional component:
const inputRef = React.useRef(null);
React.useEffect(() => {
if (inputRef.current) {
console.log('focusing !');
inputRef.current.focus();
}
}, []);
return <TextInput
multiline
label="Amount"
selectTextOnFocus
placeholder="Write Count"
value={stockCount.toString()}
/>