I installed react-native-popup-dialog and I use it. I get the same warn when I enter the page with the component or when I open the popup dialog. Can you help me?
The error: "Warning: Failed prop type: Prop 'children' has type 'any' or 'mixed', but was not provided to 'PopupDialog'. Pass undefined or any other value"
<Dialog
visible = {this.state.addVisible}
rounded
width = {0.85}
dialogAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
footer = {
<DialogFooter>
<DialogButton
onPress = {() => {}}
textStyle = {styles.buttonText}
text = "Add"
/>
<DialogButton
onPress = {() => this.setState({addVisible: false})}
textStyle = {styles.buttonText}
text = "Cancel"
/>
</DialogFooter>
}
>
</Dialog>
According to issues:
It's type warning. children is required for DialogContent component.
Please add that like this:
<Dialog
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
>
<DialogContent>
{...}
</DialogContent>
</Dialog>
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"
/>
I am trying to open a confirmation dialog when the button is clicked with React Admin. The button click name is 'handleSendItemsToUpdate'.
However the dialog is not opening.
Please find the code below:
const notify = useNotify();
const [open, setOpen] = React.useState(false);
const handleDialogClose = () => setOpen(false);
const handleSendItemsToUpdate = (props) => {
const handleConfirm = () => {
notify('Stuff is done.');
setOpen(false);
};
setOpen(true);
return (
<Fragment>
<SaveButton {...props} />
<Confirm
isOpen={open}
title="Update View Count"
content="Are you sure you want to reset the views for these items?"
onConfirm={handleConfirm}
onClose={handleDialogClose}
/>
</Fragment>
);
}
...
<Button className={classes.button} onClick={() => handleSendItemsToUpdate(props)}>Send Items To
Update</Button>
Any help is appreciated.
Thanks in advance!
Begum
The Confirm dialog is returned in the handleSendItemsToUpdate function, which is not rendered in the component (used in the DOM), that's why it cannot be shown.
You can put the return in the function to the return of component, and of course, it is only shown when the open state is true.
You can check for my demo here: https://codesandbox.io/s/peaceful-dewdney-6pil2?file=/src/App.js
I'm using react-native-testing-library on a react-native-elements Input component. The component shows the clear button while editing.
How can I tap the clear button to test the side effects?
This doesn't work:
const addressField = component.getByPlaceholder("Address");
addressField.clear();
// TypeError: addressField.clear is not a function
You can use the clear option.
handleSearchClear = () => {
this.setState({ query: "" })
}
....
<Input
placeholder='BASIC INPUT'
onClear={this.handleSearchClear}
value={this.state.query}
/>
OR You can use ref
this.input.clear();
...
<Input
placeholder='BASIC INPUT'
ref={ref => {this.input = ref;}}
value={this.state.query}
/>
I have this reply button in my app where when a user press it, it will change the TextInput autoFocus to true. I set the autoFocus value to false as default value and keep it in a state. I see the state will change to true but it doesn't open the keyboard.
This is my TextInput :
<TextInput
autoFocus={this.state.textInputFocus}
selectTextOnFocus={true}
ref={ref => this.textInputRef = ref}
multiline = {true}
placeholder="Write a comment ..."
onChangeText={(postComment) => this.setState({postComment})}
value={this.state.postComment} />
Here is the function to change the state when reply button is pressed :
_openReplyBox(comment_id, commenter){
this.setState({ postComment: commenter, textInputFocus: true })
}
Accordinig to docs:
autoFocus: If true, focuses the input on componentDidMount. The default value is false
You can use refs to achieve the same functionality.
<TextInput
ref={"textRef"}
...
/>
In openReplyBox:
_openReplyBox(comment_id, commenter){
this.refs.textRef.focus();
this.setState({ postComment: commenter})
}
I have a component that renders out a list of buttons, lets call this 'ButtonList'. When one of the buttons is clicked, the event is bubbled up like so:
<ButtonList onButtonPressed={(mins) => { console.log(mins); }} />
In response to this, I want to hide that ButtonList and show another component that is currently hidden. The ButtonList has some state such as "state { visible: true }" that I want to toggle that stops it rendering. How do I make a call to toggle the state of that ButtonList and then also call my other component in this view to also toggle its visible state to show?
Thanks.
swappingComponentsExample = () => {
return (
<View>
{this.state.showButtonList ? (
<ButtonList
onButtonPressed={mins => {
this.setState({showButtonList: false});
console.log(mins);
}}
/>
) : (
<OtherComponent />
)}
</View>
);
};
// Renders both components but passes style override to hide the object
// ButtonList/OtherComponent are not destroyed and recreated using this method
hidingExample = () => {
return (
<View>
<ButtonList
onButtonPressed={mins => {
this.setState({showButtonList: false});
console.log(mins);
}}
style={!this.state.showButtonList && {display: 'none'}}
/>
<OtherComponent
style={this.state.showButtonList && {display: 'none'}}
/>
</View>
);
};