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.
Related
I have a problem because my component keeps rerendering while I'm toggling it.
I have an arrow(up/down) that will show/hide a part of the div.
I wrote console.log('render') to see if its rerendering. I'm only toggling one div at a time but it is rerendering multiples times. How do I fix this?
CODESANDBOX --------> CODESANDBOX
const toggleArrow = (
<IconButton
aria-label="delete"
size="large"
onClick={() => {
handleProductCard(productIndex);
productCardRef.current.scrollIntoView({
behavior: "smooth"
});
}}
sx={{ padding: 0 }}
>
{formik.values.hideProductCard ? (
<KeyboardArrowDownIcon size="large" />
) : (
<KeyboardArrowUpIcon size="large" />
)}
</IconButton>
);
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>
);
};
I have an AutoComplete and it has onSearch event. They are working perfectly. Now, I need to add a dropdown to autocomplete options. The problem is that, when I expect to see opening dropdown, still onSearch is working and dropdown options can't be seen. The thing I am trying to do is that, when user click on dropdown I should show dropdown menu. When user click any other part of the option other than dropdown button, then onSearch should work as expected.
This is autocomplete :
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{
width: 250
}}
options={options}
onSelect={onSelect}
>
<Input.Search size="large" placeholder="input here" />
</AutoComplete>
This is renderItem function for options, it has dropdown :
const renderItem = (title, count) => ({
value: title,
label: (
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
{title}
<span>
<Dropdown overlay={menu} trigger={["click"]}>
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</Dropdown>
{count}
</span>
</div>
)
});
This is a simulation of my situation. Also it does not have to be dropdown. When if it is a button or sth the scenario is the same. I could not prevent onSelect running on click.
In my case, I could use 'dropdownRender' props.
dropdownRender={(menu) =>
<>
{menu}
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</>
}
items passed by options props shall be rendered in {menu} above.
Click me buttons shall not close the dropdown menu.
I have number of card components in which I'm rendering some images inside. What I'm trying to do is onPress of card retrieving the clicked image.
<TouchableOpacity
onPress={this.viewProduct.bind(this)}
>
<Card>
<CardItem cardBody>
<Image source={require('../../assets/images/products/product_1.jpg')} style={{ height: 200, width: null, flex: 1 }} />
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Text>₹3500</Text>
</Button>
</Left>
<Right>
<Button transparent>
<Text style={styles.offText}>50% off</Text>
</Button>
</Right>
</CardItem>
</Card>
</TouchableOpacity>
I'm rendering the component inside a TouchableOpacity to make it as a clickable element and I have attached a function viewProduct as a event listner.
viewProduct = (item) => {
console.log(`Selected image is ${item.uri}`);
}
But when I click the function I'm not getting the clicked Image. Is there anything I have to bind inside the function or how to retrieve the image onPress of Card.
youre directly giving it a source. you need to extract that into a separate obj and parse that as your image source
check out this snippet:
https://snack.expo.io/#karanwadhwa/stack-overflow-62977355
edit: updated above snack to use local files instead
I have the next application:
https://codesandbox.io/s/uwmig?file=/index.js,
There users can add as many fields as they want and add images for each generated input, clicking on add button.
What I want to achieve is to set a default open input in my application and to get something like this:
Now the default section is open by doing:
const firstRowOpen = { name: 0, key: 0, isListField: true, fieldKey: 0 };
and:
{fields.concat(firstRowOpen).map((field, index)... //here i map already concatinated fields and this is why appears first default block
Code:
<Form.List name={[fieldKey, "inner"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.concat(firstRowOpen).map((field, index) =>
!fieldsOnEdit.includes(index) ? (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Demo
idx={index}
upload={upload}
setUpload={setUpload}
field={field}
/>
<Form.Item>
<Button
type="primary"
htmlType="submit"
key="submit"
onClick={() => toggleSmall(index)}
>
Toggle first row
</Button>
</Form.Item>
</Space>
) : (
<Edit value={values} mode={toggleSmall} keyForm={index} />
)
)}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field to inner
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
Issue: when I add an image clicking on add button, and after that click on toggle first row button, appears another buttons bellow.
Question: Why this issue appears? and how to solve the issue?
demo: https://codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js:767-2195
If I understand right you need to use initialValues
Here is an updated example of your code
https://codesandbox.io/s/compassionate-fermi-4oedx?file=/SubForm.js
...
<Form
name="dynamic_form_item"
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
initialValues={{ names: [""] }}
>
...