export const Data = [
{
id:'adkdkdkdk',
title:'first',
},
{
id:'mvmvmvvm',
title:'second',
},
{
id:'newoq',
title:'third',
},
{
id:'dnkdlnsdl',
title:'four'
}
]
this is data
const University = () => {
const navigation = useNavigation();
return (
<Container>
<FlatList horizontal data={Data} renderItem={({item})=> (
<TextContainer onPress={()=> navigation.navigate('Stack',{screen:'Information',params:{item}})}>
<Texts>{item.title}</Texts>
<Texts>{item.id}</Texts>
</TextContainer>
)} keyExtractor={key=>key.id}/>
</Container>
)
}
and this is code
I want to send params to Information screen, so I used navigation and send params but params is 'undefined' when console.log... what is problem?
here is a working code:
const data = [
{
id:'adkdkdkdk',
title:'first',
},
{
id:'mvmvmvvm',
title:'second',
},
{
id:'newoq',
title:'third',
},
{
id:'dnkdlnsdl',
title:'four'
}
];
return (
<View style={styles.container}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<>
<Text>{item.id}</Text>
<Text>{item.title}</Text>
</>
)}
/>
</View>
);
}
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'm trying to implement react-navigation-shared-elements with react-navigation v4, but somthing wrong with the way I'm trying.
I have Screen , that contain component ( SectionList) that rendering and other component ( TaskCard ) that contain the wanted shared element.
I've tried to implement this according to the documentation, but it's not working.
Please see the code:
My Router:
const HomeStack = createSharedElementStackNavigator({
HomeScreen,
TaskDetailsScreen,
EditTaskScreen,
}, {
defaultNavigationOptions: headerDefaultOption,
});
const AppNavigator = createSwitchNavigator(
{
SplashScreen,
AuthStack,
HomeStack,
}
);
HomeScreen that contain the SectionList component:
export const HomeScreen = ({navigation}) => {
const onTaskPressHandler = (task) => {
navigation.push(screens.TASK_DETAILS_SCREEN, {task});
};
return (
<View style={styles.container}>
<TaskList data={tasks} onTaskPress={onTaskPressHandler} onTaskLongPress={openQuickActionsWithData}/>
</View>
);
};
TaskList:
export const TaskList = ({data, onTaskPress, onTaskLongPress}) => {
data.sort((a, b) => (a.taskEndDate > b.taskEndDate) ? 1 : ((b.taskEndDate > a.taskEndDate) ? -1 : 0));
return (
<SectionList
showsVerticalScrollIndicator={false}
sections={sortedData}
keyExtractor={(item, index) => item + index}
renderItem={({item, index}) => {
return (
<TaskCard data={item} index={index} onTaskPress={onTaskPress} onTaskLongPress={onTaskLongPress}/>
);
}}
renderSectionHeader={({section: {title}, section: {data}}) => {
return (
renderTitleIfHasData(data, title)
);
}}
/>
);
};
TaskCard with shared element :
import {SharedElement} from 'react-native-shared-element';
export const TaskCard = ({data, index, onTaskPress, onTaskLongPress}) => {
const onPressHandler = data => {
onTaskPress(data)
};
return (
<Animated.View rkey={index} style={[styles.mainContainer, {transform: [{scale: scaleAnim}]}]}>
<TouchableOpacity
index={index}
activeOpacity={layout.activeOpacity}
style={[styles.taskContainer, {backgroundColor: isFinished ? color.ORANGE : color.GREY,}, renderBorderRadiusPosition()]}
onPress={() => onPressHandler(data)}
onLongPress={() => onTaskLongPress(data)}>
<View style={styles.titleContainer}>
<SharedElement id={`data.${data.taskCreationDate}.sharedTask`}>
<View style={styles.taskImageTypeContainer}>
<Image source={getTaskImageByType(data.taskType)} style={styles.typeImageStyle}/>
</View>
</SharedElement>
</TouchableOpacity>
</Animated.View>
);
};
Details screen with same shared element :
export const TaskDetailsScreen = ({navigation}) => {
return (
<ScrollView style={styles.mainContainer}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<SharedElement id={`data.${task.taskCreationDate}.sharedTask`}>
<View style={styles.taskTypeContainer}>
<Image source={getTaskImageByType(task.taskType)} style={styles.taskTypeImage}/>
</View>
</SharedElement>
</View>
</ScrollView>
);
};
TaskDetailsScreen.sharedElements = (navigation, otherNavigation, showing) => {
const task = navigation.getParam('task');
return [{
id: `data.${task.taskCreationDate}.sharedTask`,
animation: 'move',
resize: 'clip'
}];
};
How to solve this issue ?
i'm new in React Native, i'm try to solve this issue last 2 days.
TypeError: Cannot read property 's_path' of undefined
This error is located at:
in List (at SearchScreen.js:119)
I'm try to get images from server
I have searched a lot, but couldn't solve it. Please help.
SearchPage.js
useEffect(() => {
loadItem();
}, [query, pageCurrent, refreshing]);
const loadItem = async () => {
const response = await client.get(
`api.php?key=test-api-key&type=read&object=search&action=latestItems&limit=${pageCurrent}`
);
if (!response.ok) return setError(true);
setError(false);
setRefreshing(false);
dispatch(adDeatailsRequiested());
dispatch(adsData(response.data.response));
};
handleSearch = (text) => {
setQuery(text);
dispatch(searchQuery(query1));
};
loadMore = () => {
setpageCurrent(pageCurrent + 10);
};
pageRefreshing = () => {
setRefreshing(true);
};
return (
<View style={styles.container}>
<ActivityIndicator visible={loading} />
<View style={styles.listing}>
<FlatList
showsVerticalScrollIndicator={false}
numColumns={!liked ? 1 : 2}
key={!liked ? "ONE COLUMN" : "TWO COLUMN"}
style={styles.list}
data={Data}
keyExtractor={(item) => item.pk_i_id}
initialNumToRender={10}
removeClippedSubviews={true}
onEndReached={loadMore}
onEndReachedThreshold={0}
refreshing={refreshing}
onRefresh={pageRefreshing}
renderItem={({ item }) => (
LINE 119=>>>>> <List
title={item.s_title}
description={item.s_description}
subTitle={"₹" + item.i_price}
location={item.s_city}
region={item.s_region}
date={item.dt_pub_date}
adId={item.fk_i_item_id}
onPress={() =>
navigation.navigate(
routes.ITEM_SCREEN,
{
itemId: item.fk_i_item_id,
title: item.s_title,
description: item.s_description,
price: item.i_price,
date: item.dt_pub_date,
region: item.s_region,
city: item.s_city,
userName: item.s_contact_name,
userId: item.fk_i_user_id,
}
)
}
/>
)}
</>
)}
/>
</View>
</View>
);
}
list.js
useEffect(() => {
loadImage();
}, []);
const loadImage = async () => {
const response = await itemApi.getImage(+adId);
if (!response.ok) return setError(true);
setError(false);
setImage(response.data.response);
};
return (
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={
image
? {
uri: `${baseURL}${image[0].s_path}${image[0].pk_i_id}.${image[0].s_extension}`,
}
: defaultImg
}
/>
</View>
</View>
</TouchableWithoutFeedback>
);
Please add condition to check that image[0] is not null or undefined like that
{image[0] &&
<Image
style={styles.image}
source={
image
? {
uri: `${baseURL}${image[0].s_path}${image[0].pk_i_id}.${image[0].s_extension}`,
}
: defaultImg
}
/>}
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>