I am using checkbox from react-native-element
When i check the box it dose not display checked
how can i display it ?
here is my code
<View>
<FlatList data={all_national_number}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) =>
<CheckBox
title={item}
uncheckedIcon={<Image source={require('../../assets/unchecked.png')} />}
checkedIcon={<Image source={require('../../assets/checked.jpg')} />}
onPress={() => this._onSelect(item)}>
</CheckBox>
}>
</FlatList>
</View>
It is not showing because you are missing a property called checked which should be either true or false. So, ideally your method this._onSelect(item)} should contain logic to alter the checked status.
Something on the lines of
onSelect = (item) => {
this.setState({ isChecked: true})
}
and in your checkbox, you need to add one more prop that is checked={this.state.isChecked}
Hope it helps :)
You need to add the checked property on the checkbox
<CheckBox
title='Click Here'
checked={this.state.checked}
/>
Related
What's happening is on page load, the: form.values.statistics?.ethnicity generates the Chips fine but doesn't set the selected values in the Autocomplete component.
Like in the image below, the Caucasian appears to be not selected when it should be selected from the Autocomplete component
What I've thought of and tried so far in which data.data.attributes.statistics.ethnicity === form.values.statistics.ethnicity:
Maybe I'm missing the "name" property from the Autocomplete component - tried adding so, but I can't. It says the property doesn't exist for the component. Which is weird?
value={ethnicityOptions[arrayOfSelectedIds]} or value={ethnicityOptions[data.data.attributes.statistics.ethnicity]}
Autocomplete code:
<Autocomplete
multiple
options={ethnicityOptions}
getOptionLabel={(ethnicityOptions) => ethnicityOptions.name}
id="multiple-tags"
value={form.values.statistics?.ethnicity}
onChange={(e, newValue) => {
form.setFieldValue('statistics.ethnicity', newValue);
form.handleChange(e);
}}
renderTags={() => null}
renderInput={(params) => (
<Grid className={classes.autoCompleteGrid}>
<TextField
{...params}
variant="outlined"
onChange={form.handleChange}
placeholder="Ethnicities"
/>
</Grid>
)}
/>
Code for generating Chips:
{form.values.statistics?.ethnicity
? form.values.statistics?.ethnicity?.map((v) => (
<Chip
key={v.name}
label={v.name}
onDelete={() => {
onEthnicityChipDelete(v);
}}
/>
))
: ''}
I'm currently stuck on this and I might be just missing something. Any help to breakthrough would be really appreciated!
I already researched similar questions on the topic, so please don't be in a hurry to close this question.
I have a search screen, where I type a search term and I fetch listed results. Once fetched, I want to tap on any one of them and navigate to that page details object. My initial first tap is never been detected, but my second is. My component:
return (
<View>
<TextInput
value={query}
placeholder="Type Here..."
onChangeText={(search) => setQuery(search)}
/>
{fetching ? (
<Spinner
visible={fetching}
textContent={'Fetching data...'}
textStyle={{ fontSize: 14 }}
/>
) : null}
{items ? (
<ScrollView keyboardShouldPersistTaps={true}>
<FlatList
numColumns={1}
horizontal={false}
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() =>
navigation.navigate('Item Details', { id: item.id })
}>
<ItemDisplay item={item} keyboardShouldPersistTaps="always" />
</TouchableOpacity>
)}
/>
</ScrollView>
) : null}
</View>
);
My ItemDisplay is just a row of item's photo and item's id. Nothing fancy.
As suggested on the similar questions, I do use <ScrollView keyboardShouldPersistTaps={true}> and <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> However it doesn't help m, I still need to tap twice. Any ideas on how do I fix this? I am testing it on android, if that matters.
I also tried <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > but this doesnt help as well.
If I understood your problem correctly, you are facing an issue clicking an item when the Keyboard is present.
If so you can simply pass keyboardShouldPersistTaps as always to your FlatList and then the children of the list will receive taps when an item is pressed.
Also, you shouldn't be using a ScrollView to wrap your Flatlist, if they are both having the same orientation, numColumns isn't required as you have passed it as 1
You can read more about keyboardShouldPersistTaps at https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps
Take a look at this Live Snack to see it in action.
I have a TextInput that will render a ListView prompting text to AutoComplete however the TouchableOpacity requires 2 clicks to trigger (first to dismiss the keyboard)
Adding keyboardShouldPersistTaps="always" to the ListView does not fix the problem.
Code:
render() {
const { selected, searched } = this.state;
return (
<View>
<TextInput
onChangeText={this.searchedText}
underlineColorAndroid="transparent"
onBlur={this.blurInput}
/>
<ListView
keyboardShouldPersistTaps="handled"
style={styles.autoCompleteListView}
dataSource={ds.cloneWithRows(searched)}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
...
renderRow = (rowData) => (
<TouchableOpacity
onPress={this._onPressRow.bind(this, rowData)}
>
<Text>{ rowData }</Text>
</TouchableOpacity>
);
https://github.com/facebook/react-native/issues/10138#issuecomment-304344283
All nested components need the keyboardShouldPersistTaps property
Here's my code to generate a paging scrollview in React-native:
<ScrollView
horizontal
pagingEnabled
onScrollEndDrag={this.handlePagerScroll}
scrollsToTop={false}
scrollEventThrottle={100}
removeClippedSubviews={false}
automaticallyAdjustContentInsets={false}
directionalLockEnabled
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
>
{ renderPageHere() }
</ScrollView>
The code above is working.
Function this.handlePagerScroll which attached to onScrollEndDrag event is working too. The problem is that I can't determine which page that's currently active, since onScrollEndDrag has no event paremeter
I think to use simple math using value in x or y to no avail since I have no idea how to obtain them
Does anyone familiar with my problem and can offer me any solution?
Thank you
I have made a horizontal paging view using FlatList and identifying visible item in FlatList is fairly easy like this.
<FlatList
horizontal={true}
pagingEnabled
removeClippedSubviews={false}
data={listData}
onViewableItemsChanged={data => { this.viewableItem(data) }} renderItem={this.renderRow}
keyExtractor={(item, index) => item.id}
/>
UPDATE
As per issue posted on GitHub and also mentioned by #DennyHiu
you can use
viewabilityConfig={this.viewabilityConfig}
like this
this.viewabilityConfig = {
itemVisiblePercentThreshold: 50,
minimumViewTime: 1,
};
<FlatList
key={this.state.key}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
data={this.state.timeline}
renderItem={({item}) => {}}
/>
I'm trying to render a FlatList from json fetched from an api, but I keep getting this error:
Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`.
Relevant code:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
key={item.id}
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
I'm sure there is a simple fix for this, but after a few days of trying different things I haven't found it. Thanks for your help!
Looks like you need to change key to id as you write item.id in keyExtractor and be sure you have id and it's different for each component:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
id={item.id} //instead of key
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
Or if you don't have unique key use keyExtractor={(item, index) => index}