Mixing
React Native - Horizontal scroll with columns
I'm trying to implement the following view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a single component.
However, I'm struggling to limit each column to just 4 row of results. I'm currently rendering each component with a map function:
renderBestOfTheWeek = (items) => {
return (
<View>
{items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
render() {
return (
<FlatList
data={this.state.bestOfTheWeek}
horizontal={true}
renderItem={this.renderBestOfTheWeek}
/>
)
}
SongItemHorizontalScroll component:
<View style={containerStyle}>
<Image
source={{ uri: thumbnail_image }}
style={albumImageStyle}
/>
<View style={songDetailButtonContainer}>
<View style={songInfoStyle}>
<Text
style={{ fontSize: 12, lineHeight: 14, width: 160 }}
numberOfLines={1}>
{title}
</Text>
<Text
style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
>{artist} - {album}</Text>
</View>
<Button onPress={() => Linking.openURL(url)} price={price} />
</View>
</View>
My data have been structured as such and is currently stored in state.
0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]
However I'm receiving the following error message (TypeError: items.map is not a function).
Where did I go wrong and what would be the proper method of achieving this?
react-native react-native-ios react-native-flatlist
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
add a comment |
I'm trying to implement the following view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a single component.
However, I'm struggling to limit each column to just 4 row of results. I'm currently rendering each component with a map function:
renderBestOfTheWeek = (items) => {
return (
<View>
{items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
render() {
return (
<FlatList
data={this.state.bestOfTheWeek}
horizontal={true}
renderItem={this.renderBestOfTheWeek}
/>
)
}
SongItemHorizontalScroll component:
<View style={containerStyle}>
<Image
source={{ uri: thumbnail_image }}
style={albumImageStyle}
/>
<View style={songDetailButtonContainer}>
<View style={songInfoStyle}>
<Text
style={{ fontSize: 12, lineHeight: 14, width: 160 }}
numberOfLines={1}>
{title}
</Text>
<Text
style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
>{artist} - {album}</Text>
</View>
<Button onPress={() => Linking.openURL(url)} price={price} />
</View>
</View>
My data have been structured as such and is currently stored in state.
0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]
However I'm receiving the following error message (TypeError: items.map is not a function).
Where did I go wrong and what would be the proper method of achieving this?
react-native react-native-ios react-native-flatlist
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
add a comment |
I'm trying to implement the following view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a single component.
However, I'm struggling to limit each column to just 4 row of results. I'm currently rendering each component with a map function:
renderBestOfTheWeek = (items) => {
return (
<View>
{items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
render() {
return (
<FlatList
data={this.state.bestOfTheWeek}
horizontal={true}
renderItem={this.renderBestOfTheWeek}
/>
)
}
SongItemHorizontalScroll component:
<View style={containerStyle}>
<Image
source={{ uri: thumbnail_image }}
style={albumImageStyle}
/>
<View style={songDetailButtonContainer}>
<View style={songInfoStyle}>
<Text
style={{ fontSize: 12, lineHeight: 14, width: 160 }}
numberOfLines={1}>
{title}
</Text>
<Text
style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
>{artist} - {album}</Text>
</View>
<Button onPress={() => Linking.openURL(url)} price={price} />
</View>
</View>
My data have been structured as such and is currently stored in state.
0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]
However I'm receiving the following error message (TypeError: items.map is not a function).
Where did I go wrong and what would be the proper method of achieving this?
react-native react-native-ios react-native-flatlist
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
I'm trying to implement the following view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a single component.
However, I'm struggling to limit each column to just 4 row of results. I'm currently rendering each component with a map function:
renderBestOfTheWeek = (items) => {
return (
<View>
{items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
render() {
return (
<FlatList
data={this.state.bestOfTheWeek}
horizontal={true}
renderItem={this.renderBestOfTheWeek}
/>
)
}
SongItemHorizontalScroll component:
<View style={containerStyle}>
<Image
source={{ uri: thumbnail_image }}
style={albumImageStyle}
/>
<View style={songDetailButtonContainer}>
<View style={songInfoStyle}>
<Text
style={{ fontSize: 12, lineHeight: 14, width: 160 }}
numberOfLines={1}>
{title}
</Text>
<Text
style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
>{artist} - {album}</Text>
</View>
<Button onPress={() => Linking.openURL(url)} price={price} />
</View>
</View>
My data have been structured as such and is currently stored in state.
0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]
However I'm receiving the following error message (TypeError: items.map is not a function).
Where did I go wrong and what would be the proper method of achieving this?
react-native react-native-ios react-native-flatlist
react-native react-native-ios react-native-flatlist
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
asked Nov 15 '18 at 14:14
Oswald AleeOswald Alee
12
12
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.
renderBestOfTheWeek = (items) => {
return (
<View>
{Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
add a comment |
The renderItem function receives an object containing the keys item and index.
Thus, you should have
renderBestOfTheWeek = ({ item }) => {
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
add a comment |
Based on @Foyarash suggestion and help, here's the solution:
renderBestOfTheWeek = ({ item }) => {
return (
<View>
{item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
</View>
)
}
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321388%2freact-native-horizontal-scroll-with-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.
renderBestOfTheWeek = (items) => {
return (
<View>
{Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
add a comment |
It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.
renderBestOfTheWeek = (items) => {
return (
<View>
{Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
add a comment |
It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.
renderBestOfTheWeek = (items) => {
return (
<View>
{Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.
renderBestOfTheWeek = (items) => {
return (
<View>
{Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
</View>
)
}
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
answered Nov 15 '18 at 14:27
Smarticles101Smarticles101
622415
622415
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
add a comment |
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
That seems to do away with the error message. However, I'm now passing an array of 4 objects into each SongItemHorizontalScroll component rather than each object.
– Oswald Alee
Nov 15 '18 at 23:03
add a comment |
The renderItem function receives an object containing the keys item and index.
Thus, you should have
renderBestOfTheWeek = ({ item }) => {
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
add a comment |
The renderItem function receives an object containing the keys item and index.
Thus, you should have
renderBestOfTheWeek = ({ item }) => {
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
add a comment |
The renderItem function receives an object containing the keys item and index.
Thus, you should have
renderBestOfTheWeek = ({ item }) => {
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
The renderItem function receives an object containing the keys item and index.
Thus, you should have
renderBestOfTheWeek = ({ item }) => {
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
edited Nov 19 '18 at 22:41
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
answered Nov 19 '18 at 22:22
FoyarashFoyarash
1262
1262
add a comment |
add a comment |
Based on @Foyarash suggestion and help, here's the solution:
renderBestOfTheWeek = ({ item }) => {
return (
<View>
{item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
</View>
)
}
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
add a comment |
Based on @Foyarash suggestion and help, here's the solution:
renderBestOfTheWeek = ({ item }) => {
return (
<View>
{item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
</View>
)
}
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
add a comment |
Based on @Foyarash suggestion and help, here's the solution:
renderBestOfTheWeek = ({ item }) => {
return (
<View>
{item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
</View>
)
}
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
Based on @Foyarash suggestion and help, here's the solution:
renderBestOfTheWeek = ({ item }) => {
return (
<View>
{item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
</View>
)
}
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
answered Nov 19 '18 at 23:50
Oswald AleeOswald Alee
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321388%2freact-native-horizontal-scroll-with-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
