I use the input component from native-base (v2). When a user focuses the input, the value scrolls away. The text cursor also disappears.
InputField.js
const InputField = ({
style,
iconStyle,
labelStyle,
type,
value,
disabled,
label,
placeholder,
onChangeText,
}) => {
return (
<Item style={[style]}>
<Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
<Label style={[labelStyle]}>{label}</Label>
<Content
contentContainerStyle={{
flexDirection: "row",
alignItems: "center",
}}
>
<Input
value={value}
disabled={disabled}
autoCompleteType={type.autoCompleteType}
autoCorrect={type.autoCorrect}
autoCapitalize={type.autoCapitalize}
keyboardType={type.keyboardType}
onChangeText={onChangeText}
secureTextEntry={type.secureTextEntry}
maxLength={type.maxLength}
placeholder={placeholder}
/>
</Content>
</Item>
);
};
Profile.jsx
<InputField
style={{ flex: 1, flexDirection: "row" }}
labelStyle={{ flex: 1 }}
type={InputFieldTypes.City}
value={city}
label={I18n.t("profile.city") + ":"}
onChangeText={(text) => {
setCity(text);
setEdit(true);
}}
/>
The behaviour I'm experiencing.
iOs
I have tried giving it more space to see what is going on, but it still scrolls out of view. Android seems fine. Remove padding and margin from input had no effect. Neither did forcing it to only have one line.
I found out that the issue was caused by the Content component. Just removing it fixed the issue.
const InputField = ({
style,
iconStyle,
labelStyle,
type,
value,
disabled,
label,
placeholder,
onChangeText,
}) => {
return (
<Item style={[style]}>
<Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
<Label style={[labelStyle]}>{label}</Label>
<Input
value={value}
disabled={disabled}
autoCompleteType={type.autoCompleteType}
autoCorrect={type.autoCorrect}
autoCapitalize={type.autoCapitalize}
keyboardType={type.keyboardType}
onChangeText={onChangeText}
secureTextEntry={type.secureTextEntry}
maxLength={type.maxLength}
placeholder={placeholder}
/>
</Item>
);
};
Related
I am working on a react native project. I have a password field on the Login page and I want to add an eye icon on the right end of the input field. My code currently looks like this:
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>
This is a normal input field with a placeholder text.
Please find the below code:
const [password, setPassword] = useState('');
const [isPasswordSecure, setIsPasswordSecure] = useState(true);
<View style={styles.viewPassword}>
<TextInput
secureTextEntry={isPasswordSecure}
style={styles.textInputStyle}
right={
<TextInput.Icon
name={() => <MaterialCommunityIcons name={isPasswordSecure ? "eye-off" : "eye"} size={28} color={COLORS.black} />} // where <Icon /> is any component from vector-icons or anything else
onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }}
/>
}
fontFamily={FONTS.ROBOTO_REGULAR}
fontSize={Theme.FONT_18PX}
selectionColor={COLORS.orange}
underlineColor={COLORS.orange}
label={StringsConstants.Password}
value={password}
onChangeText={text => setPassword(text)}
underlineColorAndroid="transparent"
theme={{ colors: { text: COLORS.black, primary: COLORS.orange, placeholder: COLORS.black } }}
/>
</View>
I hope it will help you!
you can put it and style it like this
<View>
<TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' />
<EyeIconOrImage style={{
position: 'absolute',
right: 20,
}} />
</View>
whenever i click an option i want textinput to get cleared
i have tried implementing clearbuttonmod but it doesn't work
<View>
<RadioButton.Group
onValueChange={(value) => setValue(value)}
value={value}
>
<RadioButton.Item label="Hate speech" value="Hate speech" />
<RadioButton.Item
label="I just don't like it"
value="I just don't like it"
/>
</RadioButton.Group>
<Text
value=""
style={{
padding: "3%",
fontSize: 18,
}}
>
Others
</Text>
<TextInput
style={styles.input}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
on the top, import useRef
import {useRef} from "react";
create a ref variable and use it in TextInput
const InputRef = useRef();
then in TextInput
<TextInput
style={styles.input}
ref={InputRef}
clearButtonMode="always"
placeholder="Report..."
onChangeText={(value) => setValue(value)}
/>
adn in RadioButton
<RadioButton.Group
onValueChange={(value) => {
setValue(value)
InputRef.current.clear()
}}
value={value}
>
Working Example Here
I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.
Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>
My use-case is trigger something when click parent component (TouchableOpacity for example), but trigger nothing when click children component (Screen and others for Example). My case is same like prevent bubbling on web. From docs I've read said that it should use onStartShouldSetResponderCapture, but I still don't understand for the usage. Below is the snippet.
<TouchableOpacity style={styles.container} onPress={() => alert('tes')}
>
<Screen style={styles.screenContainer} onStartShouldSetResponderCapture={() => false}>
<Title>Edit Nama Restoran</Title>
<Divider styleName='line' />
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
<View styleName='horizontal' style={styles.nameContainer}>
<Button styleName='confirmation dark' onPress={this.handleSubmit}>
<Text>UPDATE</Text>
</Button>
<Button styleName='confirmation' onPress={onClose}>
<Text>CLOSE</Text>
</Button>
</View>
</Screen>
</TouchableOpacity>
EDIT:
Below is an illustration of my case.
If I click overlay (outside of <Screen>), it triggers an alert (expected).
If I click white dialog (<Screen> and children inside), it triggers an alert too (unexpected). What I need is not trigger alert when click <Screen>.
Updated to show how to do with a modal:
<Modal
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<TextInput
style={{ flex: 1 }}
value={value}
onChangeText={value => this.setState({ value })}
onSubmitEditing={this.handleSubmit}
/>
</Modal>
Not sure if this is the right snippet from your code, but basically the part you want to pop up, pull it out from the touchable opacity and wrap a modal around it. Then on click have it visible/invisible.
I am trying to write a very simple app to test react native.
I have some TextInput components in a big ScrollView, as a register formulary.
Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll.
I can only scroll through the page when I click in blank spaces. Any idea of how to do it?
Thanks.
<ScrollView>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
</ScrollView>
I had the same problem and after searching for a while no answer helped me; so I solved it myself by putting a <TouchableWithoutFeedback /> over each <TextInput> and sending the touch event back to the <TextInput />:
<View>
<TextInput ref ={(ref)=>this.textInput = ref}>
<TouchableWithoutFeedback style={{position: 'absolute', top:0, bottom:0, left:0, right:0}}
onPress={()=>this.textInput.focus()}/>
</View>
You can create a custom component which wraps TextInput like that and use them in your ScrollViews.
I had solve the problem like this:
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1 }}
onPress={() => this.textInput.focus()} >
<View
style={{ flex: 1 }}
pointerEvents="none" >
<TextInput
ref={(ref) => this.textInput = ref}
style={{ fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 }}
placeholder={this.props.placeHolder}
defaultValue={this.props.defaultValue ? this.props.defaultValue + '' : ''}
placeholderTextColor='#aaaaaa'
keyboardType={this.props.keyboardType ? this.props.keyboardType : 'default'}
secureTextEntry={this.props.isSecret}
onChangeText={this._onChangeText.bind(this)} />
</View>
</TouchableOpacity>