I have something like this:
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
value={0}
onChangeText={(input) => this.setState({ value: input })}
/>
However, the input box is always empty after load, any ideas?
TextInput component only accept strings. Looks like you have a integer there. Try changing that to a string. Heres a link to the doc.
Its caused by an integer value. Do JSON.stringify(value)
just change the value = {this.state.value}
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
value={this.state.value}
onChangeText={(input) => this.setState({ value: input })}
/>
use toString()
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
value={this.state.value.toString()}
onChangeText={(input) => this.setState({ value: input })}
/>
Try this it works with me!
const [_employee, setEmployee]=useState(
{
name: "name"
salary: 0
})
.
.
.
<Input
onChangeText={(salary) =>
(salary = parseInt(salary)) & setEmployee({ ..._employee, salary })
}
value={JSON.stringify(_employee.salary)}
/>
Related
i have a Picker and i have 3 items in an array where i receve tham. I need to put the first item from the array in the picker by default. This is mine picker who receves all items and when i press the dropdown it shows all my drivers but it needs by default to show the first item from the array.
<View style={{width: '50%', paddingRight: 5}}>
<RNPickerSelect
style={{
inputAndroid: styles.dropdownAndroid,
inputIOS: styles.dropdownIOS,
placeholder: styles.dropdownPlaceholder,
iconContainer: styles.dropwownIcon
}}
disabled={this.state.vendorDriverSelectDisabled}
placeholder={{ label: this.props.mainProps.language.selectDriver }}
onValueChange={(value) => this.setState({...this.state, selectedVendorDriver: value})}
value={this.state.selectedVendorDriver}
items={this.state.vendorDrivers}
useNativeAndroidPickerStyle={false}
Icon={() => {
return <EvilIcons name="chevron-down" size={37} color="#333" />
}}
/>
</View>
When you set data for vendorDrivers state, use the code like this?
this.setState({ vendorDrivers: someData })
So, just set selectedVendorDriver state to the first element of the someData
And the code will become
this.setState({ vendorDrivers: someData, selectedVendorDriver: someData[0] })
when I entered any number value in textInput then automatically '$' symbol is generating
<TextInput
style={styles.touchmodelstyle}
autoFocus={true}
keyboardType='number-pad'
>
</TextInput>
Its a little tricky but does the job
<TextInput
value={this.state.value}
onChangeText={(text) => {
text = text.split('$').join('')
this.setState({
value: `${text}$`
})
}
}
/>
I found my question answer so I want to post it.
handleDollar = (value) => {
this.setState({ dollar: value })
};
<View style={styles.touchmodelstyle}>
<Text style={{ marginLeft: RFValue(60),
marginVertical: RFValue(20),
width: wp('4%'),
height: hp('5%'),
elevation: 1 }}>
{this.state.dollar === "" ? "" : "$"}</Text>
<TextInput
autoFocus={true}
placeholder={"other Amount"}
keyboardType='number-pad'
maxLength={3}
value={this.state.dollar}
onChangeText={(value) => this.handleDollar(value)}
>
</TextInput>
</View>
I'm trying to delete the top, right and left borders of my textInput (so obviously, I'd like to have just the bottom border :) ) with the package react-native-autocomplete-input
I tried borderTop : 0 / and 'transparent' but it's not working I still have the borders on top and sides.
borderStyle didn't work either
I get this:
https://zupimages.net/viewer.php?id=20/03/ovck.bmp
my code is this:
<ScrollView style={styles.containerScroll}>
<Text style={styles.h1}>{i18n.t("tripsform.title")}</Text>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_start)}
onChangeText={text => this.setState({ query_start: text })}
placeholder="Enter Start airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_start: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_arrival)}
onChangeText={text => this.setState({ query_arrival: text })}
placeholder="Enter Arrival airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_arrival: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Form ref={c => (this._form = c)} type={Trip} options={options} />
<Text>{"\n"}</Text>
<Text>{"\n"}</Text>
<Button
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
onPress={this.handleSubmit}
>
{i18n.t("tripsform.item.add").toUpperCase()}
</Button>
<Button
onPress={() => this.props.navigation.navigate("MyTrips")}
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
>
Return to my trips
</Button>
<Text>
{"\n"}
{"\n"}
</Text>
</ScrollView>
with this style:
inputContainer: {
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
},
If I can get any help that's really nice, thanks for reading and for any help !
You need to use inputContainerStyle property to apply styles to the input.
You can also use containerStyle to style the container around the AutoComplete so you also don't need to wrap the Autocomplete with View tag.
<Autocomplete
inputContainerStyle={styles.inputContainer}
/>
This Should give you the desired output :) :
<Autocomplete
inputContainerStyle={{width:"100%",borderBottomWidth:1}}
inputStyle={{borderWidth:0}}
data={Options}
handleSelectItem={(item,id)=>optionHandler(item.value,id)}
valueExtractor={item => item.value}
/>
It seems that it's impossible with that package.
I could do what I wanted to do with 'native base autocomplete'.
So, it doesn't completely answer the question but it allows you to do the right thing!
You can set the inputContainer style borderWidth to 0:
// other styles
inputContainer: {
borderWidth: 0,
},
this works absolutely fine on android but not on IOS (not displaying value which user select from wheel picker). Check this Link.
https://drive.google.com/file/d/1y_ULGQuvPlzZj2V2zr1RAynrZKpme4Uc/view?usp=sharing
<Picker
style={{ width: 100, height: 80 }}
selectedValue={this.state.selectedHour}
itemStyle={{ color: "black", fontSize: 20 }}
onValueChange={index => this.onPickerHourSelect(index)}
>
{this.state.hourList.map((value, i) => (
<PickerItem label={value} value={i} key={"money" + value} />
))}
onPickerHourSelect(index) {
var hour = this.state.hourList[index];
this.setState({
selectedHour: hour,
}) }
Please suggest me another component or package of picker(Like Spinner Or Wheel Picker)
I've had the same problem! I solved it using selectedValue instead of selectedItem and passing the pickerItem's value.
This is my code:
<Picker style={{flex: 1, width: 150, height: 180}}
itemStyle={{color: 'black', fontSize: 26}}
selectedValue={this.state.minutes[this.state.indexSelected]}
onValueChange={(index) => {this.setState({indexSelected: index})}}>
{this.state.minutes.map((value, i) => (<PickerItem label={value} value={i} key={i}/>))}
</Picker>
I am using react-native-awesome-alerts plugin to show an alert in my screen. I've created a custom view for the alert but it throws me this error
Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: }]' to a 'RCTView')
My code is like this :
_displayNotifyAlert(){
if(this.state.notifyAlert == true){
return (
<AwesomeAlert
show={true}
title="Service Cancellation"
message="Tell the shop why are you cancelling their services."
messageStyle={{ textAlign: 'center' }}
customView={this.renderCustomAlertView()}
showCancelButton={true}
showConfirmButton={true}
cancelText="Cancel"
confirmText="Cancel Service"
confirmButtonColor={Colors.default}
onCancelPressed={() => this._closeNotifyAlert()}
onConfirmPressed={() => this._cancelServices()}
/>
)
}
}
renderCustomAlertView = () => (
<View style={[ AppStyles.input ]}>
<TextInput
placeholder="Write your reason briefly."
underlineColorAndroid="transparent"
style={{ textAlignVertical: 'top', height: 100 }}
numberOfLines={5}
multiline={true}
maxLength={200}
onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
}
</View>
)
If I remove this line customView={this.renderCustomAlertView()}, the error will disappear. I don't see any incorrect code that I put in the renderCustomAlertView function. So I cannot track down the cause of the error. Is there anybody that faced the same problem before?
There's an extra "}" at the end of your renderCustomAlertView function. Change this function to the following and it should work:
renderCustomAlertView = () => (
<View style={[ AppStyles.input ]}>
<TextInput
placeholder="Write your reason briefly."
underlineColorAndroid="transparent"
style={{ textAlignVertical: 'top', height: 100 }}
numberOfLines={5}
multiline={true}
maxLength={200}
onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
</View>
)
I can't comment in your post because of low reputations so I'm making it as an answer.
As per my knowledge in react native and based on your code You are missing return in renderCustomAlertView .
so your code must be something like
renderCustomAlertView = () => {
return(
<View style={[ AppStyles.input ]}>
<TextInput
placeholder="Write your reason briefly."
underlineColorAndroid="transparent"
style={{ textAlignVertical: 'top', height: 100 }}
numberOfLines={5}
multiline={true}
maxLength={200}
onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
</View>
)
}