I'm using react-native-phone-number-input and i want to delete the call code from the number if the user types it.
my solution is :
class PhoneUserInput extends PureComponent {
...
<PhoneInput
ref={this.myRef}
onChangeFormattedText={(value) => {
if (value.substr(`+${this.myRef.current?.getCallingCode()}`.length)
.startsWith(`+${this.myRef.current?.getCallingCode()}`)) {
value = value.substr(`+${this.myRef.current?.getCallingCode()}`.length)
.replace(`+${this.myRef.current?.getCallingCode()}`, ''));
}
onChangeFormattedText(value);
console.log('formated value'+value);
}
}}
/>
}
I tried to the same thing on onChangeText props but it's doesn't give the effect instantly on the component.
Please try to do your work with
onChangeText={ (_text)=>{ //Your code} }
AND add :
value={value}
Here is a working example :
<PhoneInput
ref={phoneInput}
defaultValue={value}
value={value}
defaultCode="FR"
layout="first"
placeholder={label}
containerStyle={styles.phoneContainer}
onChangeText={(text) => {
setValue(text)
}}
onChangeFormattedText={(text) => {
setFormattedValue(text)
}}
withDarkTheme
withShadow
/>
Related
Version react hook form
^7.27.0
What I tried to follow and without successful
react hook form - Discussions 7818
react hook form - Issues 230
About what I have
I have 4 text field components at my screen, the name of each text field is name, documentation, email, password and I would like to know how can I setup some configuration that it will be pressed the NEXT button at keyboard and will focus the following text fields?
An example that I have inside at my component file, again I would like to press the next button and the next component that I will config, will be focus.
<TextField
name="name"
label={I18n.t('registerPersonal.fullNameLabel')}
placeholder={I18n.t('registerPersonal.fullNameInput')}
icon={<TypographyIcon fill={!!errors.name && theme.colors.attention} />}
error={errors.name?.message}
errors={errors}
control={control}
returnKeyType="next"
/>
<TextField
name="documentation"
label={I18n.t('registerPersonal.documentIdentificationLabel')}
placeholder={I18n.t('registerPersonal.documentIdentificationInput')}
icon={
<DocumentIcon
fill={!!errors.documentation && theme.colors.attention}
/>
}
error={errors.documentation?.message}
control={control}
returnKeyType="next"
/>
Some properties that I get at my personal hook
const {
control,
handleSubmit,
formState: { errors, isValid }
} = useForm({ resolver: yupResolver(schema) })
My component TextField
import { TextInputProps, Text } from 'react-native'
import { Control, useController } from 'react-hook-form'
import { Container, Wrapper, TextInput, Label } from './styles'
import theme from '../../global/styles/theme'
type TextFieldProps = {
placeholder?: string
label?: string
icon?: React.ReactNode
error?: string
errors?: {
[x: string]: any
}
name: string
control: Control
} & TextInputProps
export function TextField(props: TextFieldProps) {
const { placeholder, label, icon, error, errors, name, control, ...rest } =
props
const { field } = useController({
control,
defaultValue: '',
name
})
return (
<>
<Container>
{!!label && <Label>{label}</Label>}
<Wrapper hasLabel={!!label} hasError={!!error}>
{!!icon && icon}
<TextInput
value={field.value}
onChangeText={field.onChange}
placeholder={error ? error : placeholder}
placeholderTextColor={
error ? theme.colors.attention : theme.colors.grayColor
}
{...rest}
/>
</Wrapper>
{errors && errors.name && errors.name.type === 'matches' && (
<Text>{errors.name.message}</Text>
)}
</Container>
</>
)
}
your component must include ref prop like
<TextInput
ref={inputRef} // this one
value={field.value}
onChangeText={field.onChange}
placeholder={error ? error : placeholder}
placeholderTextColor={
error ? theme.colors.attention : theme.colors.grayColor
}
{...rest}
/>
then, you need to create ref from parent for each field
const emailRef = useRef(null);
const passwordRef = useRef(null);
after this, you need to add the props that is
onSubmitEditing={() => passwordRef.current.focus()} // to auto focus password field
finally,
<TextField
onSubmitEditing={() => passwordRef.current.focus()} // here
name="name"
label={I18n.t('registerPersonal.fullNameLabel')}
placeholder={I18n.t('registerPersonal.fullNameInput')}
icon={<TypographyIcon fill={!!errors.name && theme.colors.attention} />}
error={errors.name?.message}
errors={errors}
control={control}
returnKeyType="next"
/>
Hi Experts i'm a newbie in react-native, help will appreciated.
I need to call a method name openModel() which is globally declared in Component and i have a method renderInput which renders each Input passed in Field tag. When openModel() is call inside renderInput of its Inputs on Focus. Error shows _this4.openModel is not a function. Its clearly understood that this is getting incremented because of multiple time renderInput method is called.
How do i fix this ?
Below is short code
class AddPatientForm extends Component {
constructor(props) {
super(props);
openModel = () => {
this.refs.bGroup.open();
}
renderInput({ input, label, type, meta: { touched, error, warning } }) {
return (
<View style={{ flexDirection: "row", height: 25, paddingRight: 5, }}>
<Input
ref={c => { this.textInput = c }}
returnKeyType={input.name === "Password" ? "" : "next"}
onSubmitEditing={() => { this.textInput._root.focus(); }}
blurOnSubmit={false}
secureTextEntry={input.name === "Password"}
{...input}
onFocus={() => this.openModel()}
keyboardType={input.name === "mobile" || input.name === "age" ? "numeric" : "default"}
autoCapitalize="none"
/>
</View>
);
}
<Field name="patientId" component={this.renderInput} type="" validate={[alphaNumeric,required]} />
}
you can simply write OpenModel() like this -
openModel() {
this.refs.bGroup.open();
}
Hope it works !
Please remove your openModel() function from constructor it will work for you if you define your function outside of constructor
openModel = () => {
this.refs.modal2.open();
}
you can call your function and define inside of class then directly using this.openModel();
if you have globally function and define outside of class then you don't need to use this keywords.
I want to get checked friends using checkbox. But I not quite sure how i will achieve it, hope someone can help me.
This is my state:
state = {checked: false}
This is where I want to map array
{this.props.navigation.getParam('friends').map((name, key) => (
<View>
<Text>{name}</Text>
<CheckBox
checked={this.state.checked}
onPress={(val)=>{}}
/>
</View>))}
Note: Or Could someone write me an app/code snippet in snack.expo.io how to get only checked checkbox value
You can write a custom checkbox component
export default class CustomCheckbox extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
}
toggleChange(){
this.setState({checked: !this.state.checked});
}
render() {
return (
<View>
<Text>{this.props.name}</Text>
<CheckBox
checked={this.state.checked}
onPress={() => this.bind.toggleChange(this)}
/>
</View>
);
}
}
and import your CustomCheckbox component
import CustomCheckbox from "your CustomCheckbox.js path"
{this.props.navigation.getParam('friends').map((name, key) => (
<View>
<CustomCheckbox name={name} />
</View>
))}
Your code is pretty good to go, you just need to update a bit. You have following two options:
Your friend's array should have checked key within each containing object, then you can simply do something like this.
{
this.props.navigation.getParam('friends').map((item, key) => (
let {name, checked} = item // item is an object from friends array,the and it have name, checked and other keys
<View>
<Text>{name}</Text>
<CheckBox
checked={checked}
onPress={(val)=>{}}
/>
</View>))
}
Other is you to save the name of the person as key and true/false as the checked state, eg :
toggleCurrentFirendState = (item)=>{
this.setState((prevState)=>{
let {name} = item //get name from clicked friend from the list
return {
...prevState, //used spread operator, so that other states doesn't get mutat.
[name]:!prevState[name] //toogle state of clicked item
}
})
}
//within your render
{
this.props.navigation.getParam('friends').map((item, key) => (
let {name} = item // item is an object from friends array,the and it have name, checked and other keys
<View>
<Text>{name}</Text>
<CheckBox
checked={name ===this.state[name]} //see change
onPress={(val)=>{this.toggleCurrentFirendState(item)}}
/>
</View>))
}
I have a child Picker and it should pass selected value to it's parent. Components are in different .js files if it's important.
How can I pass the states of selected items?
parent
<RegionPicker regions={this.props.navigation.state.params.regionsJSON}/>
child:
export default class RegionPicker extends Component {
constructor(props) {
super(props);
this.state = {
selected1: '1',
selected2: '1'
};
}
onValueChange1(value: string) {
this.setState({selected1: value},
()=>{ console.log('new',this.state.selected1)}
);
}
onValueChange2(value: string) {
this.setState({selected2: value},
()=>{ console.log('new',this.state.selected2)}
);
}
render() {
return (
<View>
<Form>
<Item inlineLabel>
<Label style={{fontSize:16}}>Region</Label>
<Picker
iosHeader="Select one"
mode="dropdown"
placeholder='...'
selectedValue={this.state.selected1}
onValueChange={this.onValueChange1.bind(this)}
>
{this.getRegions(this.props.regions).map((item, index) => {
return (<Picker.Item label={item} value={item} key={index}/>)
})}
</Picker>
</Item>
<Item inlineLabel last>
<Label style={{fontSize:16}}>Suburb</Label>
<Picker
iosHeader="Select one"
mode="dropdown"
placeholder='...'
selectedValue={this.state.selected2}
onValueChange={this.onValueChange2.bind(this)}
>
{this.getSuburbs(this.state.selected1).map((item, index) => {
return (<Picker.Item label={item} value={item} key={index}/>)
})}
</Picker>
</Item>
</Form>
</View>
);
}
}
I would appreciate for any help and ideas.
In your parent, create a function that will capture your RegionPicker value. In this example, myFunction.
myFunction = (value) => {
console.log(value);
}
Then pass down your function as a prop, like so:
<RegionPicker
regions={this.props.navigation.state.params.regionsJSON}
onChange={e => { this.myFunction(e) }}
/>
Inside of RegionPicker you can simply call your function within onValueChange1() and onValueChange2().
this.props.onChange(value);
You should also .bind() your functions within the constructor. So inside of your RegionPicker you can add
this.onValueChange1 = this.onValueChange1.bind(this);
this.onValueChange2 = this.onValueChange2.bind(this);
And then just call
this.onValueChange1 in your Picker's onValueChange function.
As i thing you can do one thing you can get the value in the parent component
onValueChange={()=>{this.props.onValueChange1()}}
And in the component you call this function so you will get value
<RegionPicker onValueChange1={()=>{this.calculate()}}/>
calling the function in parent state will be
calculate (value: string){
**Do you logic stuff here **
}
May you get the value now
I've trying to set up a change event if someone modifies a switch component. The approach is to design a view that contains multiple switches and allows the user to set the state per each notification that will end up in a POST api-call. Futher, I'd like to load the initial values from a api-call.
How can I access the state (weather it's checked / unchecked) in my onChangeFunction? And how can I get an element using their ID or name? (same as in HTML/CSS with #mySwitch.setValue(true)?
Given code:
class Settings extends Component {
onChangeFunction(type, props) {
Alert.alert("changed", "==> " + props.state)
}
render() {
return (
<View style={styles.container}>
<Switch onValueChange={this.onChangeFunction.bind(this, "TASK_CREATED", this.props)} value={this.state} />
</View>
);
}
}
You have a mess there between the propsand the state concept. You can do:
class Settings extends Component {
state = {
taskCreated: false,
};
onChangeFunction(newState) {
this.setState(newState, () => Alert.alert("Changed", "==> " + this.state));
}
render() {
return (
<View style={styles.container}>
<Switch onValueChange={(value) => this.onChangeFunction({taskCreated: value})}
value={this.state.taskCreated}
/>
</View>
);
}
}
Notice that this.setState is asynchronous so you can safely read its value using the callback that the method provides.