I am working on react-native-swipeout, but second time I swipe then Swipeout is not working
const SwipeableRow = ({ item, isOpen, onOpen, onPress }) => {
return (
<Swipeout
openRight={isOpen == item.id}
close={true}
onOpen={onOpen}
style={styles.background}
right={[
{
text: 'Delete',
backgroundColor: 'red',
onPress,
},
]}
>
<Row item={item} />
</Swipeout>
)}
Related
I have an accordion inside a flatlist.
Here is the code i have :
const OptionList = (groupOption) => {
return (
<FlatList
data={groupOption.options}
keyExtractor={(result) => result.id.toString()}
renderItem={({ item, index }) => {
const clickedRadio = () => {
const selectedOption = { [item.question]: { ...item } };
setAnswers({ ...answers, ...selectedOption });
};
const status = isOptionSelected(item) ? true : false;
return (
<View key={index}>
<Radio
initialValue={status}
label={item.description}
onChange={() => clickedRadio()}
color="error"
/>
</View>
);
}}
/>
);
};
return (
<View style={styles.container}>
<Text style={{ fontWeight: "bold", fontSize: 16, color:"#6B24AA" }}>
{t("Choose an option/Scroll for more questions")}
</Text>
<FlatList
data={questions}
listKey={(item) => item.id.toString()}
keyExtractor={(result) => result.id.toString()}
renderItem={({ item, index }) => {
const data = [
{
title: item.description,
content: (<><OptionList options=
{item?.question_options}></OptionList></>)
}
];
const status = isOptionSelected(item) ? true : false;
return (
<View style={styles.groupOptions} key={index}>
<Accordion style={styles.accordion}
headerStyle=
{styles.headerStyle} contentStyle={styles.contentStyle}
dataArray={data}
icon={status ? <Icon name="circle"
family="Entypo" size={20} style={{marginLeft: -6,
color: "#6B24AA"}}/>
:
<Icon name="done"
family="MaterialIcons" size={20}
style={{marginLeft: -6}}/>}
expandedIcon={<Icon name="circle"
family="Entypo"/>}
opened={1}/>
</View>
);
}}
/>
</View>
);
The accordion content its anther flatlist component. It shows this error every time i click the accordion.
It shows this error :
VirtualizedList: Encountered an error while measuring a list's offset from its containing VirtualizedList.
at node_modules/react-native/Libraries/Lists/VirtualizedList.js:1411:10 in _scrollRef.measureLayout$argument_2
How can i fix this error? Is it the problem the other flatlist at the content of accordion
Please replace the OptionList component with the given below code.
OptionList
const OptionList = (groupOption) => {
return (
groupOption.map((item,index) => {
const clickedRadio = () => {
const selectedOption = { [item.question]: { ...item } };
setAnswers({ ...answers, ...selectedOption });
};
const status = isOptionSelected(item) ? true : false;
return (
<View key={index}>
<Radio
initialValue={status}
label={item.description}
onChange={clickedRadio}
color="error"
/>
</View>
)
})
);
};
please check and let me know , cheers !
I have a list of category from calling external API and I am displaying it in a flatlist like this in horizontal scroll
but it is not changing state onPress , I want it should change color when user click on particular tab/button
my API json format data is like this
const data = [
{
id: '1',
title: 'General'
},
{
id: '2',
title: 'Student-Visa'
},
{
id: '3',
title: 'Study'
},
{
id: '4',
title: 'Festival'
},
{
id: '5',
title: 'NorthIndian-Food'
},
]
and I am using it as
const renderItem = ({ item, index }) => (
<View key={index} style={selectedCategory === item.title ? styles.activeCategory : styles.categoryContainer}>
<TouchableOpacity
activeOpacity={0.6}
underlayColor={COLORS.white}
onPress={()=>handleCategory(item.title)}
>
<Text>{item.title}</Text>
</TouchableOpacity>
</View>
);
return (
<List
data={data}
renderItem={renderItem}
horizontal={true}
style={styles.container}
contentContainerStyle={styles.contentContainer}
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.id.toString()}
/>
)
const handleSelectedCategory = (title) => {
setSelectedCategory(title);
console.log(selectedCategory);
}
const [selectedCategory, setSelectedCategory] = useState();
I am using it as a separate component in another component
<FAQcategory selectedCategory={selectedCategory} />
any suggestion ? or help what I am doing wrong
Thanks in advance
This might help
const [selectedCategory, setSelectedCategory] = useState(0); // should be item index
const handleCategory = (index) => {
setSelectedCategory(index);
};
const renderItem = ({ item, index }) => (
<View
key={index}
style={
selectedCategory === index
? styles.activeCategory
: styles.categoryContainer
}
>
<TouchableOpacity
....
onPress={() => handleCategory(index)} // send index in param
>
....
</TouchableOpacity>
</View>
);
here is the app, I want to create diferent screens with diferent catergories in this case I have Dermatologista and Hospital, how can I select just one description
const [state, setState] = useState({
places: [
{
id: 1,
title: 'Clinica da pele',
description: 'Dermatologista',
latitude:-2.42206406,
longitude:-54.71947789,
},
{
id: 2 ,
title:'Unimed',
description:'Hospital',
latitude:-2.42501721,
longitude:-54.71146077,
},
{
id: 3,
title: 'Dra. Josimar',
description:'Dermatologista',
latitude: -2.4288346,
longitude:-54.7290553,
}
]
});
return(
I just want to select the items with the description == dermatologista
how can I do this ?
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return(
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
)
}
}
/>
</SafeAreaView>
)
}
You can use array.filter :
const filteredPlaces = state.places.filter( place => place.description === "Dermatologista" )
and pass filteredPlaces instead of the entire object to the child component.
Try this
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
item.description == "dermatologista" ? (
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
):""
}
}
/>
</SafeAreaView>
here I create the data that I called "places" that part is ok, but remember that is not my main page from the app, its a function{navigation}
export default function Search({ navigation }) {
const [state, setState] = useState({
places: [
{
id: 1,
title: 'Clinica da pele',
description: 'Dermatologista',
latitude:-2.42206406,
longitude:-54.71947789,
},
{
id: 2 ,
title:'Unimed',
description:'Hospital',
latitude:-2.42501721,
longitude:-54.71146077,
},
{
id: 3,
title: 'Dra. Josimar',
description:'Dermatologista',
latitude: -2.4288346,
longitude:-54.7290553,
}
]
})
here I tried to reder but dor some reason it didn't work, the error is in item.id but I dont know how to solve
return(
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places.map}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return(
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
)
}
}
/>
</SafeAreaView>
You are binding FlatList to state.places.map, instead it should be state.places:
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return(
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
)
}} />
</SafeAreaView>
I have a list with some items that are added to a state on click, Im using native-base, how can I change the style of the listitem when I press it, or add the "selected" attribute to the list item?
code
const [data, setData] = useState([]);
const _renderItem = ({ item, index }) => {
return (
<ListItem
button={true}
onPress={() => handleItemSelect(item)}
>
<Left>
<Text>{item.Name}</Text>
</Left>
<Right>
<Icon name="add" style={{ paddingHorizontal: 5 }} />
</Right>
</ListItem>
);
};
return(
<Container>
<List>
<FlatList
data={data}
renderItem={_renderItem}
/>
</List>
</Container>
);
Im wondering how am I going to add a style and distinguish between the different list items that I have, if this isn't possible how can I use native-base "selected" and append it to the listitem?
the handleItemSelect adds the item id to a state so im currently managing which items are selected, how can I use this info, or any other way to highlight the selected items?
Edit:
I figured how to easily do this since I have the selected items id's
<ListItem
selected={selectedItems.some((prevItem) => prevItem._id === item._id)}
style={sameasabove ? style1 : style2}
button={true}
onPress={() => handleItemSelect(item)}
>
</ListItem>
You can do some thing like this:
Example
export default class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: "Interstellar" },
{ name: "Dark Knight" },
{ name: "Pop" },
{ name: "Pulp Fiction" },
{ name: "Burning Train" },
],
setData: []
};
for (var i = 0; i < this.state.data.length; i++) {
this.state.setData[i] = "red";
}
this.setState({
setData: this.state.setData
})
}
handleItemSelect(item, index) {
this.state.setData[index] = "green";
this.setState({
setData: this.state.setData
})
}
renderItem = ({ item, index }) => {
return (
<ListItem button={true}
onPress={() => this.handleItemSelect(item, index)} style={{ marginLeft: 0 }}>
<Body>
<Text style={{ color: this.state.setData[index] }}>{item.name}</Text>
</Body>
</ListItem>
);
};
render() {
return (
<FlatList style={{ marginTop: 30 }}
data={this.state.data}
renderItem={this.renderItem}
/>
);
}
}
You can set a color to your ListItem initially and then you can change the color on a click event.
Hope this helps!