i have a flatList that renders a component with some props, but the renderItem returns me 'undefined'. I´m new to react-native and I cant´t find a solution. Thanks
edit:
Is it possible that the styles I used in 'posts.js' may affect the flatList render?
Feed.js:
export default function Feed() {
const Posts = [
{ id: 1, title: "eu", photoDesc: 'eu' },
{ id: 2, title: "me", photoDesc: 'me' }
]
console.log;
return (
<FlatList
keyExtractor={props => props.id}
data={Posts}
renderItem={({ item }) => <FeedPosts title={`${item.title}`} photoDesc={`${item.photoDesc}`} ></FeedPosts>}
>
</FlatList>
);
}
Posts.js:
export default function FeedPosts(props) {
return (
<Container>
<Header>
<TouchableOpacity>
<FontAwesome5 name='bell' size={40} style={{ marginLeft: 10 }}></FontAwesome5>
</TouchableOpacity>
<TouchableOpacity>
<Ionicons name='add-circle' size={40} style={{ marginRight: 5 }}></Ionicons>
</TouchableOpacity>
</Header>
<Body>
<Time>15/12/2021 as 17:42pm</Time>
<User>
<Icon source={require('../../assets/vibe.jpg')}></Icon>
<Description>{props.title}</Description>
</User>
<Content>
<PetPhoto source={props.postImg}></PetPhoto>
</Content>
<ContentDesc >
<PhotoDesc> {props.photoDesc}</PhotoDesc>
</ContentDesc>
<Bottom>
<Comment title="Comment" placeholder="Escrever Comentário"></Comment>
</Bottom>
<Buttons></Buttons>
</Body>
</Container>
);
}
Your variable Posts contains an array of React components. Instead, it should contain an array of data that you transform into components.
So your Posts should look more like this:
const Posts = [
{title: "My title", photoDesc: "Desc"},
{title: "My title2", photoDesc: "Desc2"},
{title: "My title3", photoDesc: "Desc3"}
]
Here's an example (straight from the React Native documentation) of how this works in context:
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
(https://reactnative.dev/docs/flatlist)
You can see in the above example that DATA is an array of objects, which gets transformed with the function renderItem into components. Very similar to your use case.
Related
I'm trying to render a flatlist that has 2 labels. I have done few options but nothing happened.
I want to show Title & Serial as Title & subtitle in each Item. If there is a solution really appreciated
Code:
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
Serial: '1254'
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Items',
Serial: '5678'
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
Serial: 'XXoX'
},
];
const Item = ({ title, Serial }) => (
<TouchableOpacity style={styles.ttListButton}>
<View style={styles.TTitem}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.title}>{Serial}</Text>
</View>
</TouchableOpacity>
);
render() {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return(
<View style={{backgroundColor: '#fff'}}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
)
there is a typo in ({ title, Seria })
should be ({ title, Serial })
const renderItem = ({ item }) => (
<Item title={item.title} Serial={item.Serial} />
);
I need to create a screen Catalog(Categories and Products).
I'm using SectionList from React Native in order to achive this.
I need to make that Categories component stick on the top when you scroll product lists.
Is there any library that could help me with this Catalog screen ?
Please look at the image here..
import React from "react";
import { View, StyleSheet, SectionList } from "react-native";
import Text from "../Text";
const DATA = [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"],
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"],
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"],
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"],
},
];
const TabCategories = () => (
<View>
<Text>Horizontal list of categories</Text>
</View>
);
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const TestSectionList = (props) => {
return (
<View style={styles.container}>
<Text style={styles.SRC}>Some React Component</Text>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
StickyHeaderComponent={TabCategories}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {},
SRC: {
fontWeight: "bold",
borderWidth: 1,
borderColor: "#fff",
padding: 10,
},
item: {
padding: 30,
},
header: {
fontWeight: "bold",
fontSize: 20,
},
});
export default TestSectionList;
stickySectionHeadersEnabled
Makes section headers stick to the top of the screen until the next one pushes it up
ListHeaderComponent
Rendered at the very beginning of the list
renderSectionHeader
Rendered at the top of each SECTION
I think this should do:
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
ListHeaderComponent={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
renderSectionHeader={TabCategories}
stickySectionHeadersEnabled
/>
You can try this library react-native-tabs-section-list
https://github.com/bogoslavskiy/react-native-tabs-section-list
If you are talking about react-native-section-list, it inherits ScrollView props, you can check in the docs, in props section, so it has stickyHeaderComponent prop which should be exactly what you want.
I'm struggling to pass props down into some components. I have an array of data that I'm using but cant access the props to be able to use the data.
I can seem to access the props in a components folder but for some reason I cant access the props from within the same folder.
Any ideas would be very much appreciated. Thanks in advance guys.
const homeOptions = [
{
name: "Create A Beast Workout",
body: "Quick Start Workout",
image: require("../assets/images/ChickSquat.jpg"),
id: "1",
},
{
name: "Beast Workout Diary",
body: "Create and manage your workout shedule",
image: require("../assets/images/DoubleBis.jpg"),
id: "2",
},
{
name: "Pre-Made Workouts",
body: "Use one of our pre-made workouts",
image: require("../assets/images/ChickA.jpg"),
id: "3",
},
{
name: "Statistics",
body: "Analyse your personal statistics",
image: require("../assets/images/WorkoutInProgress.jpg"),
id: "4",
},
{
name: "History",
body: "Keep track of your workout history",
image: require("../assets/images/ChickH.jpg"),
id: "5",
},
];
const HomeScreen = (props) => {
console.log(props);
return (
<View style={Styles.containerTop}>
<View>
<HomeScreenImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Beast" />
</View>
</View>
<SafeAreaView style={Styles.flatListContainer}>
<FlatList
data={homeOptions}
renderItem={({ item }) => (
<TouchableOpacity
style={Styles.container}
onPress={() =>
props.navigation.navigate({
routeName: "StackNavigator",
params: {
cardId: props.info.id,
cardImage: props.info.image,
cardName: props.info.name,
cardBody: props.info.body,
},
})
}
>
//////below is where im having the problem accessing props /////////////////
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</TouchableOpacity>
/>
</SafeAreaView>
</View>
);
};
hi im trying to render some user info in my react native page and i dont know why it should render something like this:
list
but instead my output is
list
so my FlatList is working but my ListItem is no rendering any data someone could help me?
i dont know if it is a bug with reactnativeelements or so
User data
export default [
{
id: 1,
name: 'Tiago Almeida',
email: 'tiago#gmail.pt',
avatarUrl:
'https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_960_720.png',
},
{
id: 2,
name: 'Lucas Silva',
email: 'lucas#gmail.com',
avatarUrl:
'https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png',
},
{
id: 3,
name: 'Andre Ferreira',
email: 'andre#gmail.pt',
avatarUrl:
'https://cdn.pixabay.com/photo/2018/05/19/22/03/man-3414477_960_720.png',
},];
and this is my main page
export default props => {
function getActions(user) {
return (
<>
<Button
onPress={() => props.navigation.navigate('UserForm', user)}
type='clear'
icon={<Icon name='edit' size={25} color='orange' />}
/>
</>
)
}
function getUserItem({ item: user }) {
return (
<ListItem
leftAvatar={{ source: { uri: user.avatarUrl } }}
key={user.id}
tittle={user.name}
subtitle={user.email}
bottomDivider
rightElement={getActions(user)}
onPress={() => props.navigation.navigate('UserForm', user)}
/>
)
}
return (
<View>
<FlatList
keyExtractor={user => user.id.toString()}
data={users}
renderItem={getUserItem}
/>
</View>
)
};
At the top in your imports write,
import { ListItem, Avatar } from 'react-native-elements';
After that Change your code to this
You don't need getActions
Instead write like this,
const getUserItem = ({ item: user }) => (
<ListItem
bottomDivider
onPress={() => props.navigation.navigate('UserForm', user)}>
<Avatar source={{ uri: user.avatarUrl }} />
<ListItem.Content>
<ListItem.Title>{user.name}</ListItem.Title>
<ListItem.Subtitle>{user.email}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron
name="edit"
size={25}
color="orange"
onPress={() => props.navigation.navigate('UserForm', user)}
/>
</ListItem>
);
return (
<View>
<FlatList
keyExtractor={(user) => user.id.toString()}
data={users}
renderItem={getUserItem}
/>
</View>
);
Working Example here
I'm using using this data to fill a FlatList, each item contains a LinearGradient
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
firstColor: "#f472a7",
secondColor: "#d84351"
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
firstColor: "#50be71",
secondColor: "#50be71"
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
firstColor: "#e2bd4f",
secondColor: "#e49074"
}
];
I added two properties called "firstColor" and "secondColor", to fill the LinearGradient colors, but I'm having some issues doing that. I'm receiving this error:
TypeError: undefined is not an object (evaluating '_ref3.secondColor')
Code:
const Item = ({ title }, { firstColor }, { secondColor }) => (
<LinearGradient
colors={[{firstColor}, {secondColor} ]}
style={styles.item}
>
<Text style={styles.title}>{title}</Text>
</LinearGradient>
);
const renderItem = ({ item }) => (
<Item title={item.title} />
);
...
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
Try this
const Item = ({ title, firstColor, secondColor}) => (
<LinearGradient
colors={[firstColor, secondColor ]}
style={styles.item}
>
<Text style={styles.title}>{title}</Text>
</LinearGradient>
);
const renderItem = ({ item}) => (
<Item
firstColor={item.firstColor }
secondColor={ item.secondColor }
title={item.title}
/>
);
const LinearGradient = ({ color, firstColor, secondColor }) => {
const colorArr = [firstColor, secondColor];
return (
<View>
<Text>{color}</Text>
<Text>{firstColor}</Text>
<Text>{secondColor}</Text>
</View>
);
};
can you try this, you were passing the data in the wrong way. I did some changes in similar example.