I want the card to expand and shrink with duration
const renderNote = (item) => {
if (item.id === noteId) {
if (item.note) {
return (
<View>
<Title style={{ alignSelf: "center", paddingVertical: 10, color: colors.primary,fontSize:17 }}>Your Note</Title>
<Text style={{ paddingLeft: 10 ,backgroundColor:colors.background,paddingVertical:10,borderRadius:5}}>{item.note}</Text>
</View>
);
}
return (
<View>
<Title style={{ alignSelf: "center", paddingVertical: 10, color: colors.primary ,fontSize:17}}>Your Note</Title>
<Text style={{ paddingLeft: 10 ,backgroundColor:colors.background,paddingVertical:10,borderRadius:5}}>There is no note</Text>
</View>
);
}
};
return (
<View style={{ marginTop: 20 }}>
<Title style={{ alignSelf: "center" }}>{AppointmentTitle}</Title>
<ScrollView style={{ minHeight: 100 }}>
{Appointment.slice(0, 2).map((item) => {
return (
<View key={item.id}>
{item ? (
<TouchableWithoutFeedback
onPress={() => {
noteId === item.id ?
setNoteId(null):
setNoteId(item.id)
}}
>
<Card style={[{ margin: 10, borderRadius: 10 }, styles.shadow]}>
<Card.Content>
<Text style={{ fontSize: 16 }}>
You have an appontment with <Text style={{ color: colors.primary }}>{item.patinetName}</Text>
</Text>
{isTime ? renderFutureTime(item.dateTime) : renderTime(item.dateTime)}
{renderNote(item)}
when renderNote the card expand how to animation on this code
........................................................................................................
Related
I am making Learn Reminder App for that I am mapping a static array of weeks and inside that map i am mapping another array(reminderData) which i am fetching it from database to compare both array and if the weekDay matches with the Parent Map that is weeks array than I am just showing the time. But due to my turnary Operator condition my data is mixed with Set Time and data present in database. How do I optimize my code to show time for that particular week if present in db or show set time instead.
const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
<View style={{ flex: 1, borderWidth: 1, borderRadius: 10, marginTop: "3%", height: "50%" }}>
{
weeks.length > 0 &&
weeks.map((week, index) => (
<View key={index}>
<View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>
<Text style={{ flex: 1, paddingTop: 13, color: 'black', fontSize: 18, fontWeight: 'bold' }} >{week}</Text>
{
reminderData.map((data, index2) => (
<React.Fragment key={index2}>
{
(data.WeekDay == week) ?
<Pressable onPress={() => updateTimePicker(data, index)}>
<Text onPress={() => updateTimePicker(data, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>{moment(data.Time).format('hh:mm A')}</Text>
</Pressable> :
<Pressable onPress={() => openTimePicker(week, index)}>
<Text onPress={() => openTimePicker(week, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>Set Time</Text>
</Pressable>
}
</React.Fragment>
))
}
</View>
<View
style={{
marginTop: 8,
borderBottomColor: 'black',
borderBottomWidth: StyleSheet.hairlineWidth,
}}
/>
</View>
))
}
</View>
try this:
import React,{useState,useEffect} from 'react';
import moment from 'moment'
import { Text, View, StyleSheet,FlatList,Pressable,Image } from 'react-native';
const WeekComponent = ({ week,reminderData }) => {
const [data,setData]=useState({})
useEffect(()=>{
const foundData=reminderData.find(data=>data.weekDay ===week) //you can use filter if you want to return all data that have weekDay===week
setData(foundData)
},[reminderData,week])
return (
<View>
<View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>
<Text style={{ flex: 1, paddingTop: 13, color: 'black',
fontSize: 18, fontWeight: 'bold' }} >
{week}
</Text>
{data ? (
<Pressable onPress={() => updateTimePicker(data)}>
<Text onPress={() => updateTimePicker(data)}
style={{ justifyContent: 'flex-end', paddingTop: 13,
color: 'black', fontSize: 18, }}>
{moment(data?.Time).format('hh:mm A')}
</Text>
</Pressable>
):(
<Pressable onPress={() => openTimePicker(week)}>
<Text onPress={() => openTimePicker(week)}
style={{ justifyContent: 'flex-end', paddingTop: 13,
color: 'black', fontSize: 18, }}>
Set Time
</Text>
</Pressable>
)}
</View>
</View>
);
};
export default function App() {
const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"];
const reminderData=[{weekDay:'',time:''},{weekDay:'',time:''},{weekDay:'',time:''}]
return (
<View >
<FlatList
data={weeks}
renderItem={({ item }) => <WeekComponent week={item} reminderData={reminderData}/> }
// keyExtractor={(item) => item.id}
/>
</View>
);
}
I try to do a profil update with a flatlist to catch all my value and attribute. but when i want to write something new is not working. i tried to take off my placeholder and my default value with my actual value, then write something but i have the same problem.
const Item = ({ attribute, value, item }) => {
return (
<View
key={item}
style={{
flex: 1,
flexDirection: "column",
marginBottom: 20,
paddingLeft: 10,
}}>
<View
style={{
flexDirection: "row",
flex: 1,
alignItems: "center",
marginBottom: 5,
}}>
<View style={{ marginRight: 10 }}>
<Feather
onPress={() => {
setOnEdit(true);
}}
name="edit"
size={24}
color="#8E8E8E"
/>
</View>
<Text style={{ color: "#FF6B35", fontWeight: "bold" }}>
{attribute}
</Text>
</View>
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{onEdite ? (
<TextInput
defaultValue={value}
placeholder={value}
placeholderTextColor={"black"}
onChangeText={(text) => {
createHandler(text, attribute);
}}
/>
) : (
<Text style={{ color: "#8E8E8E" }}>{value}</Text>
)}
</View>
</View>
</View>
)
);
};
this is also my createHandler method of all my textInput
const createHandler = (text, fieldName) => {
console.log(text, fieldName);
setForm((oldValue) => {
return {
...oldValue,
[fieldName]: text,
};
});
};
I have some flat lists in my app with an item width of 160. For some reason when I reduce the width to 130 it will work as planned but with a width of 160px it starts to rerender again and again. What will be the possible reason for this and how to fix the issue.
My code
<FlatList
horizontal
inverted={getFlatListOrientation()}
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => renderItem(item, index)}
contentContainerStyle={styles.listContainerStyle}
showsHorizontalScrollIndicator={false}
/>
this is my render item component
<TouchableWithoutFeedback
onPress={() => {
this.onSelect();
}}
>
<View style={{ height: 168,
width: 130,
marginRight: 10,
backgroundColor: kBackgroundWhiteColor,
shadowColor: kSeparatorTintColor,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5,
borderRadius: 5,
elevation: 10,}>
<FastImage
style={styles.imageStyle}
resizeMode={FastImage.resizeMode.cover}
source={
loadingError
? PLACE_HOLDER_IMAGE
: {
uri: photoUrl,
priority: FastImage.priority.normal,
}
}
onLoad={() => {
this.setState({ loadingImage: false });
}}
onError={() => {
this.setState({ loadingError: true });
}}
>
<View
style={{
flexDirection: "row",
flexGrow: 1,
justifyContent: "space-between",
alignItems: "center",
transform: [
{
rotateY: isKSA() ? "180deg" : "0deg",
},
],
}}
>
<TouchableOpacity
style={{
right: 0,
bottom: 0,
position: "absolute",
}}
onPress={() => this.onAddCarTofavorites()}
>
<View style={{ paddingLeft: 8, paddingTop: 8 }}>
<View
style={{
width: 26,
height: 26,
alignItems: "center",
justifyContent: "center",
borderRadius: 13,
backgroundColor: "#00000033",
marginRight: 5,
marginBottom: 5,
}}
>
<Image
source={
isFavorited
? IC_HEART_FILLED
: IC_HEART_OUTLINE
}
style={styles.favoriteImageStyle}
backgroundColor="clear"
/>
</View>
</View>
</TouchableOpacity>
{seenCarsIdlist &&
seenCarsIdlist.indexOf(id + "") != -1 && (
<Seen />
)}
{cappasity_link && <Tag3D />}
</View>
</FastImage>
{loadingImage && (
<FastImage
style={{
...styles.mainImageStyle,
position: "absolute",
}}
resizeMode={FastImage.resizeMode.cover}
source={PLACE_HOLDER_IMAGE}
/>
)}
<View style={styles.innerContainerStyle}>
<Text
style={styles.titleTextStyle}
ellipsizeMode={"tail"}
numberOfLines={1}
>
{makeName && modelName
? `${makeName} ${modelName} ${trim}`
: `${title} ${trim}`}
</Text>
<Text style={styles.priceTextStyle}>
{price + translate("filter_label_sar")}
</Text>
<View style={{ flexDirection: "row", paddingTop: 10 }}>
<Text style={styles.yearMileageTextStyle}>
{`${year} ยท ${mileage} ${
mileageUnitTemp
? mileageUnitTemp
: mileageUnit
}`}
</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>
I have a touchableopacity on each card where I want to setstate of expand to true, but I want to do it according to the id, so that state of only one changes, any idea how to do it using map()?
My code:
import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
Text,
Image,
ScrollView,
TouchableOpacity,
View,
} from 'react-native';
import axios from 'axios';
import {ROOT} from '../../../../ApiUrl';
import Icon from 'react-native-vector-icons/FontAwesome';
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState(false);
const [data, setData] = useState('');
let id = props.route.params.id;
const getData = () => {
let url = `some url`;
console.log('bbb');
axios
.get(url)
.then(function (res) {
console.log(res.data.content);
setData(res.data.content);
})
.catch(function (err) {
console.log(err);
});
};
useEffect(() => {
getData();
}, []);
return (
<SafeAreaView>
<ScrollView>
<TouchableOpacity style={{padding: 10}} onPress={()=>setExpand(true)}>
{data != undefined &&
data != null &&
data.map((item) => {
return (
<View
style={{
padding: 10,
backgroundColor: '#fff',
elevation: 3,
margin: '2%',
borderRadius: 5,
}}
key={item.id}>
<View style={{alignItems: 'flex-end'}}>
<Text style={{color: 'grey', fontSize: 12}}>
{item.display_date}
</Text>
</View>
<View style={{flexDirection: 'row'}}>
<View>
<Image
source={require('../../assets/atbirth.jpg')}
style={{height: 40, width: 50}}
resizeMode="contain"
/>
</View>
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', flex: 1}}>
<Text
key={item.id}
style={{
fontFamily: 'Roboto',
fontSize: 18,
fontWeight: 'bold',
}}>
{item.name}
</Text>
</View>
<View style={{flexDirection: 'row', width: '30%'}}>
{item.vaccine_list.map((i) => {
return (
<View style={{flexDirection: 'row'}}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{fontFamily: 'Roboto', fontSize: 15}}>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{alignItems: 'flex-end', marginTop: '1%'}}>
<View style={{flexDirection: 'row'}}>
<Text
style={{
color: 'red',
fontSize: 14,
fontWeight: 'bold',
}}>
{item.child_vacc_status.text}
</Text>
<Icon
name="chevron-up"
color="red"
size={12}
style={{marginTop: '1%', marginLeft: '1%'}}
/>
</View>
</View>
</View>
);
})}
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
Any suggestions would be great, do let mw know if anything else is required for better understanding
As i review your code <TouchableOpacity> wraps all of your cards at once not on each card set. If you implement your code that way if it's not impossible it will be difficult for you to reference each cards id and set the state of expand to true according to cards id.
My suggestion is to include <TouchableOpacity> to map() function nest so that it will be easy to reference each cards function.
I reproduce this specific problem and implement a solution in which I was able to set the state of expand to true according to each cards id.
You may click the sandbox link to see a demonstration.
https://codesandbox.io/s/accordingtoid-4px1w
Code in Sandbox:
import React, { useState, useEffect } from "react";
import {
SafeAreaView,
Text,
Image,
TouchableOpacity,
View
} from "react-native";
// import axios from 'axios';
// import {ROOT} from '../../../../ApiUrl';
// import Icon from "react-native-vector-icons/FontAwesome";
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState({});
const [data, setData] = useState([]);
// let id = props.route.params.id;
// const getData = () => {
// let url = `some url`;
// console.log('bbb');
// axios
// .get(url)
// .then(function (res) {
// console.log(res.data.content);
// setData(res.data.content);
// })
// .catch(function (err) {
// console.log(err);
// });
// };
// useEffect(() => {
// getData();
// }, []);
useEffect(() => {
// In order to simulate and reproduce the problem
// Assume that these are the data that you fetch from an API
const dataContent = [
{
id: 1,
name: "At Birth",
display_date: "02 May - 08 May 16",
vaccine_list: [
{ name: "BCG" },
{ name: "Hepatitis B" },
{ name: "OPV 0" }
],
child_vacc_status: { text: "Missed" }
},
{
id: 2,
name: "At 6 Weeks",
display_date: "02 May - 08 May 16",
vaccine_list: [
{ name: "IPV" },
{ name: "PCV" },
{ name: "Hepatitis b" },
{ name: "DTP" },
{ name: "HiB" },
{ name: "Rotavirus" }
],
child_vacc_status: { text: "Missed" }
}
];
setData(dataContent);
}, []);
function handleOnPress(id) {
setExpand((prev) => {
let toggleId;
if (prev[id]) {
toggleId = { [id]: false };
} else {
toggleId = { [id]: true };
}
return { ...toggleId };
});
}
useEffect(() => {
console.log(expand); // check console to see the value
}, [expand]);
return (
<SafeAreaView>
{data !== undefined &&
data !== null &&
data.map((item) => {
return (
<TouchableOpacity
key={item.id}
style={{
padding: 10
}}
onPress={() => handleOnPress(item.id)}
>
<View
style={{
padding: 10,
backgroundColor: expand[item.id] ? "lightgrey" : "#fff",
elevation: 3,
margin: "2%",
borderRadius: 5
}}
>
<View style={{ alignItems: "flex-end" }}>
<Text style={{ color: "grey", fontSize: 12 }}>
{item.display_date}
</Text>
</View>
<View style={{ flexDirection: "row" }}>
<View>
<Image
// source={require('../../assets/atbirth.jpg')}
style={{ height: 40, width: 50 }}
resizeMode="contain"
/>
</View>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", flex: 1 }}>
<Text
key={item.id}
style={{
fontFamily: "Roboto",
fontSize: 18,
fontWeight: "bold"
}}
>
{item.name}
</Text>
</View>
<View style={{ flexDirection: "row", width: "30%" }}>
{item.vaccine_list.map((item, i) => {
return (
<View key={i} style={{ flexDirection: "row" }}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{ fontFamily: "Roboto", fontSize: 15 }}
>
{item.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{ alignItems: "flex-end", marginTop: "1%" }}>
<View style={{ flexDirection: "row" }}>
<Text
style={{
color: "red",
fontSize: 14,
fontWeight: "bold"
}}
>
{item.child_vacc_status.text}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
})}
</SafeAreaView>
);
}
I haven't tested the code to work correctly, but you could try something similar. You could create a separate component for the items and set a status for each of them.
export default function VaccinationListScreen(props) {
const [expand, setExpand] = useState(false);
const [data, setData] = useState("");
const VaccinationListItem = (item) => {
const [expand, setExpand] = useState(false);
return (
<TouchableOpacity style={{ padding: 10 }} onPress={() => setExpand(true)}>
<View
style={{
padding: 10,
backgroundColor: "#fff",
elevation: 3,
margin: "2%",
borderRadius: 5,
}}
key={item.id}
>
<View style={{ alignItems: "flex-end" }}>
<Text style={{ color: "grey", fontSize: 12 }}>
{item.display_date}
</Text>
</View>
<View style={{ flexDirection: "row" }}>
<View>
<Image
source={require("../../assets/atbirth.jpg")}
style={{ height: 40, width: 50 }}
resizeMode="contain"
/>
</View>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", flex: 1 }}>
<Text
key={item.id}
style={{
fontFamily: "Roboto",
fontSize: 18,
fontWeight: "bold",
}}
>
{item.name}
</Text>
</View>
<View style={{ flexDirection: "row", width: "30%" }}>
{item.vaccine_list.map((i) => {
return (
<View style={{ flexDirection: "row" }}>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{ fontFamily: "Roboto", fontSize: 15 }}
>
{i.name},
</Text>
</View>
);
})}
</View>
</View>
</View>
<View style={{ alignItems: "flex-end", marginTop: "1%" }}>
<View style={{ flexDirection: "row" }}>
<Text
style={{
color: "red",
fontSize: 14,
fontWeight: "bold",
}}
>
{item.child_vacc_status.text}
</Text>
<Icon
name="chevron-up"
color="red"
size={12}
style={{ marginTop: "1%", marginLeft: "1%" }}
/>
</View>
</View>
</View>
</TouchableOpacity>
);
};
return (
<SafeAreaView>
<ScrollView>
{data != undefined &&
data != null &&
data.map((item) => {
VaccinationListItem(item);
})}
</ScrollView>
</SafeAreaView>
);
}
Generally if you want to toggle any single element you should store its id in expand (instead of a boolean), and simply check when rendering the array if any specific element's id matches, i.e. element.id === expand. When any new element is touched, pop its id in there, if the id is already there, set to null to collapse.
export default function VaccinationListScreen(props) {
const [expandId, setExpandId] = useState(null); // <-- stores null or id, initially null
...
// Create curried handler to set/toggle expand id
const expandHandler = (id) => () =>
setExpandId((oldId) => (oldId === id ? null : id));
return (
<SafeAreaView>
<ScrollView>
{data &&
data.map((item) => {
return (
<View
...
key={item.id}
>
<TouchableOpacity
style={{ padding: 10 }}
onPress={expandHandler(item.id)} // <-- attach callback and pass id
>
...
</TouchableOpacity>
{item.id === expandId && ( // <-- check if id match expand id
<ExpandComponent />
)}
</View>
);
})}
</ScrollView>
</SafeAreaView>
);
}
HOW CAN I HANDLE MUCH DATA IN REACT NATIVE FLATLIST?
Is there anyone who can offer an example using React Native Flatlist's ScrollToIndex?
I am working with ScrollToIndex and getItemLayout but it's not working.
There are 185 items on my flatlist and when I have called ScrollToIndex(150), there's no result.
I have worked with Google for getting ScrollToIndex Example but there's nothing.
Thanks for your help.
Here's my code:
<FlatList
ref={ref => setFlatListRef(ref)}
// getItemLayout={getItemLayout}
data={markers}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <Separator color={colors.separator} />}
renderItem={renderItem}
style={{ flex: 1 }}
getItemLayout={getItemLayout}
/>
const getItemLayout = (data, index) => {
return {
length: 120,
offset: 120 * index,
index
}
}
const renderItem = ({ item }) => <MyListItem {...props} item={item} />
class MyListItem extends React.PureComponent {
render () {
console.log('purecom')
let cost = null
if (this.props.item.minCost != -1 && this.props.item.maxCost != -1) {
const entities = new Entities()
if (this.props.item.minCost == 0 && this.props.item.maxCost == 0) {
cost = 'Guide price: Free'
} else if (
this.props.item.minCost == this.props.item.maxCost &&
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price: ` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)}`
} else {
if (
this.props.countries[this.props.item.countryID] &&
this.props.countries[this.props.item.countryID].currencySymbol
) {
cost =
`Guide price from` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.minCost.toFixed(2)} to` +
entities.decode(
this.props.countries[this.props.item.countryID].currencySymbol
) +
`${this.props.item.maxCost.toFixed(2)}`
}
}
}
return (
<TouchableOpacity
style={{
padding: 5,
height: 120,
backgroundColor:
this.props.selectedMarkerID !== this.props.item.ID.toString()
? '#fff'
: colors.separator
}}
activeOpacity={1}
onPress={() => this.props.selectItem(this.props.item)}
>
<Text style={{ fontWeight: 'bold', fontSize: 13 }}>
{this.props.item.Name}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.item.desc}
</Text>
<Text style={{ marginTop: 1, fontSize: 12 }}>
{this.props.markerTypes ? (
this.props.markerTypes[this.props.item.Type].ShortDescription
) : (
''
)}
</Text>
<View style={{ flexDirection: 'row', marginTop: 5 }}>
<View style={{ marginRight: 2 }}>
<MyCustomMarker
source={{ url: markerTypesImages[this.props.item.Type] }}
style={{ width: 25, height: 30 }}
userFavourites={this.props.userFavourites}
Type={this.props.item.Type}
markerID={this.props.item.ID}
/>
<Image
source={{ url: images.compass }}
style={{
marginTop: 2,
width: 20,
height: 20,
marginLeft: 5,
transform: [
{ rotate: `${this.props.item.rotate.toString()}deg` }
]
}}
/>
<Text style={{ fontSize: 9 }}>{this.props.item.distance}km</Text>
</View>
{this.props.item.thumb === '' ? (
<Image
source={{ url: images.noThumb }}
style={{ flex: 0.2, width: 84, height: 65 }}
/>
) : (
<Image
source={{
url: `${this.props.url}${this.props.item.thumb}`
}}
style={{ flex: 0.2, width: 80, height: 60 }}
/>
)}
<View style={{ flex: 0.5 }}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{Object.keys(facilities).map((key, i) => {
if (this.props.item[key] === 1) {
return (
<View
style={{
width: 26,
height: 26,
padding: 2,
margin: 2,
alignItems: 'center',
borderRadius: 3,
borderWidth: 1,
borderColor: colors.dark,
backgroundColor: 'white'
}}
key={key}
>
<Image
source={{ url: facilities[key] }}
style={{ width: 20, height: 20 }}
/>
</View>
)
}
return null
})}
</View>
<StarRatingBar
continuous={true}
score={this.props.item.score / 2}
allowsHalfStars={true}
accurateHalfStars={true}
dontShowScore={true}
/>
<View>
{cost ? <Text style={{ fontSize: 12 }}>{cost}</Text> : null}
{this.props.item.open ? (
<Text style={{ color: this.props.item.style, fontSize: 12 }}>
{this.props.item.open}
</Text>
) : null}
</View>
</View>
</View>
</TouchableOpacity>
)
}
}
setFlatListRef(flatListRef) {
this.setState({ flatListRef })
}
if (index >= 0) {
this.setState({ selectedIndex: index })
setTimeout(() => {
this.state.flatListRef.scrollToIndex({
index,
viewPosition: 0.5
})
}, 100)
}