We Keep Coding

React Native FlatList not showing

Whenever I try to show a list of kids, it throws a fit and doesn't do anything. Is there something wrong with my json or is it the way I rendered the list?
my file:
import React, {useState} from 'react';
import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
function ClassList(props) {
const kids = useState([
{ name: 'John', grade: '100', key: '1' },
{ name: 'Jimmy', grade: '90', key: '2' },
{ name: 'Jackson', grade: '80', key: '3' },
]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={kids}
renderItem={({kid}) => (
<View>
<Text>{kid.name}</Text>
</View>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: '#a0a0a0',
},
});
export default ClassList;

try
const [kids, setKids] = useState([..blah blah blah..])
<FlatList
data={kids}
renderItem={({item}) => (
<View>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={(item, idx) => item.key}
/>

React Native, Display JSON data as a titles and lists (Categories and subcategories

I made this code (live in Expo.io) to display JSON data categories as title and the subs as a list, it uses .map() to retrieve data from array.
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button, FlatList } from 'react-native';
export default class J extends React.Component {
constructor() {
super();
this.state = {
id: '1',
name: 'Breakfast',
category: [
{
id: '1',
name: 'Burger',
items: [
{ id: '1', name: 'Vegi' },
{ id: '2', name: 'Turkey' },
],
},
{
id: '1',
name: 'Egg',
items: [
{ id: '1', name: 'Omelete' },
{ id: '2', name: 'Scrambled' },
],
},
],
};
}
render() {
return (
<View>
{this.state.category.map((item) => (
<Text>
{item.name}
{item.items.map((sub) => (
<Text> {sub.name} </Text>
))}
</Text>
))}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
width: '100%',
borderWidth: 1,
},
});
it works fine, but it shows the subs beside the main categories and I want to it to be shown like this:
Burger
Vegi
Turkey
Egg
Omelete
Scrambled

You should separate each <Text/> inside a <View/> like this:
render() {
return (
<View style={styles.container}>
{this.state.category.map((item) => (
<View>
<Text>{item.name}</Text>
{item.items.map((sub) => (
<Text style={styles.subItem}>{sub.name}</Text>
))}
</View>
))}
</View>
);
}
You can add a margin for the subItem in styles:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
width: '100%',
borderWidth: 1,
},
subItem: {
marginLeft: 5,
},
});

Try this way
<View>
{this.state.category.map((item) => (
<Text>
{item.name}
</Text>
{item.items.map((sub) => (
<Text style={{marginLeft:30}}>{sub.name}</Text>
))}
))}
</View>

React native flatlist multiple selection is not updating

I am using a flatlist to expose all the list of ingredients I have saved on my database, but once I update the state, it is not reflecting on the flatlist component.
The flatlist component
<FlatList
horizontal
bounces={false}
key={ingredientList.id}
data={ingredientList}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => selectedIngredient(item)}>
<Card key={item.id}>
<Text key={item.title} style={styles.titleText}>{item.name}</Text>
<Text key={item.title} style={styles.titleText}>{item.isSelected?'selected':'not selected'}
</Text>
<ImageBackground key={item.illustration} source={item.illustration} style={styles.cardImage}>
</ImageBackground>
</Card>
</TouchableOpacity>
)}
keyExtractor={(item) => item.index}
/>
This is the function that find the selected item "selectedIngredient"
function selectedIngredient(item) {
console.log('received: ', item.name)
item.isSelected = !item.isSelected;
return { ...item.isSelected }
}
That component call is working when I try debbug with console.log after the "item.isSelected = !item.isSelected", but the IU is not updated. Can someone help me to understand how to fix it?

You need to set state by using either setState in a class-based component or either using useState hook in the functional component.
function selectedIngredient(item) {
console.log('received: ', item.name)
item.isSelected = !item.isSelected; //this is not how you set state
return { ...item.isSelected }
}
Screenshot:
here is our old example which I modified for your current scenario:
import React, { useState } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
// or any pure javascript modules available in npm
const ingredientList = [
{
id: 1,
name: 'item1',
selected: false,
},
{
id: 2,
name: 'item 2',
selected: false,
},
{
id: 3,
name: 'item 3',
selected: false,
},
{
id: 8,
name: 'item 4',
selected: false,
},
{
id: 4,
name: 'item 5',
selected: false,
},
{
id: 5,
name: 'item 6',
selected: false,
},
];
export default function App() {
const [selectedItem, setSelectedItem] = useState(null);
const [allItems, setAllItems] = useState(ingredientList);
const selectedIngredient = (item) => {
console.log('selecionado: ' + item.name);
setSelectedItem(item);
/* Below operation can be improved by passing index to the function itself.
so filtering would not be required
*/
let temp = allItems.filter((parentItem) => parentItem.id !== item.id);
item.selected = !item.selected;
temp = temp.concat(item);
temp.sort((a, b) => parseInt(a.id) - parseInt(b.id));
setAllItems(temp);
console.log(allItems);
};
return (
<View style={styles.container}>
<FlatList
style={styles.flatlist}
horizontal
bounces={false}
data={allItems}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.flatListItem}
key={item.id}
onPress={() => selectedIngredient(item)}>
<Text>{item.name}</Text>
{!item.selected ? (
<Text style={{ color: 'red' }}>{'Not Selected'}</Text>
) : (
<Text style={{ color: 'green' }}>{'Selected'}</Text>
)}
</TouchableOpacity>
)}
keyExtractor={(item) => item.index}
/>
{selectedItem ? (
<View style={styles.selectedTextView}>
<Text style={styles.selectedText}>{`${selectedItem.name} ${
selectedItem.selected ? 'selected' : 'not selected'
}`}</Text>
</View>
) : (
<View style={styles.selectedTextView}>
<Text style={styles.selectedText}>{`Nothing selected`}</Text>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
flatListItem: {
width: 100,
height: 100,
backgroundColor: 'white',
margin: 5,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
selectedTextView: {
flex: 8,
backgroundColor: 'white',
margin: 5,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
fontSize: 20,
},
selectedText: {
fontSize: 30,
},
});
Live Demo

underline the clicked text element

I have a list of text elements that I want to underline when clicked. If I add the text decoration to the tabText then obviously it is applied to all items. How can I make sure that the when I click on another tab, the underline from the previous tab gets removed?
Is there any way I can add or remove items from the style element upon clicking on an item?
//onPress={() => {}}>
const tabs = [
{
id: 1,
text: 'Alle List',
},
{
id: 2,
text: 'Second',
},
];
export const Tab: React.FunctionComponent = () => {
return (
<View style={styles.tabView}>
{tabs.map((item: any) => (
<View>
<Text style={styles.tabText}>{item.text}</Text>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
tabView: {
paddingTop: moderateScale(15),
paddingLeft: moderateScale(20),
paddingRight: moderateScale(20),
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'white',
paddingBottom: moderateScale(10),
//textDecorationLine: 'underline'
},
});
Codesandbox (with tabText items as an array too):
https://snack.expo.io/#nhammad/shallow-watermelon

You can use useState to save the selected index and then apply another style based on the selected index. Here is a quick modification to your script and the snack link is at the end.
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
const tabs = [
{
id: 1,
text: 'All Friends',
},
{
id: 2,
text: 'Second',
},
{
id: 3,
text: 'Third',
},
];
export default function App() {
const [selected, setSelected] = React.useState(null)
return (
<View style={styles.container}>
<View style={styles.tabView}>
{tabs.map((item: any, index) => (
<TouchableOpacity onPress={()=>setSelected(index)}>
<View>
<Text style={[styles.tabText,selected===index?styles.selected:null]}>{item.text}</Text>
</View>
</TouchableOpacity>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
tabView: {
paddingTop: 15,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
justifyContent: 'space-between',
},
tabText: {
color: 'black',
paddingBottom: 10,
},
selected: {
textDecorationLine: 'underline'
},
});
https://snack.expo.io/#saachitech/da6280

You can add different styles for your tab depending on active route
<Text style={[(this.props.activeRouteName == route.routeName) ? styles.tabActiveText: styles.tabText]}>{item.text}</Text>
And then in the styles
tabActiveText: {
color: 'white',
paddingBottom: moderateScale(10),
textDecorationLine: 'underline'
}

React Native Props

I am new to React Native. I am making a music app and I'm using the react-native-track-player module which works. But now, I'm trying to pass songlist as props from my Flatlist to the player component.
So first, I am able to show the moods. Then when I pass props/move to Songlist screen I am be able to show the songlist and it will display the title and artist in a Flatlist. So when I click on one of them, It will go to the Play screen. I want to be able to pass the props and play the song. But the song will not be played and crash. I am not sure whether I am passing the props properly. I will really appreciate if anyone can help me with this issue.
This is my Cluster1 screen (first screen)
export default class Cluster1 extends Component{
render(){
return(
<View style={styles.container}>
<SectionList
renderItem={({item,index})=>{
return(
<SectionListItem item={item} index={index}> </SectionListItem>);}}
renderSectionHeader={({ section }) => {
return (<SectionHeader section={section} />);}}
sections={ClusterData}
keyExtractor={(item, index) => item.name}>
</SectionList>
</View>
);
}}
class SectionHeader extends Component {
render() {
return (
<View style={styles.header}>
<Text style={styles.headertext}>
{this.props.section.title}
</Text>
<TouchableOpacity onPress={ () => Actions.SongList({ section: this.props.section}) }>
<Text style ={styles.Play}> Play
</Text>
</TouchableOpacity>
</View>
);
}}
class SectionListItem extends Component{
render(){
return(
<View>
<Text style={styles.moodname}>{this.props.item.name}</Text>
</View>
);
}
}
This is my SongList screen (second screen)
export default class App extends Component {
render() {
return (
<View>
<FlatList
data={this.props.section.songlist}
renderItem={({item,index,rowId})=>{
return(
<FlatListItem item={item} index={index}>
</FlatListItem>);}}>
</FlatList>
</View>
);}}
class FlatListItem extends Component{
render(){
return(
<View>
<TouchableOpacity onPress={ () => Actions.Play({songIndex: 0, songlist: this.props.item.songlist, item: this.props.item}) }>
<Text style={styles.itemTitle}>{this.props.item.songtitle}</Text>
<Text style={styles.itemArtist}>{this.props.item.artist}</Text>
</TouchableOpacity>
</View>
);}}
So when I click on the songtitle/artist, the app will stop. I think the error could be await TrackPlayer.add(this.props.item.songlist); but I am not sure.
This is my Play screen
import TrackPlayer from 'react-native-track-player';
export default class Play extends Component{
componentDidMount()
{
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add(this.props.item.songlist);
// Starts playing it
TrackPlayer.play();
});
}
onPressPlay = () => {
TrackPlayer.play();
};
onPressPause = () => {
TrackPlayer.pause();
};
render() {
return (
<View style={styles.container}>
<View style= {{flexDirection :'column'}}>
<TouchableOpacity style= {styles.play} onPress = {this.onPressPlay}>
<Text style = {{fontWeight:'bold',textAlign:'center',color:'white'}}>Play</Text>
</TouchableOpacity>
<TouchableOpacity style= {styles.pause} onPress = {this.onPressPause}>
<Text style = {{fontWeight:'bold',textAlign:'center',color:'white'}}>Pause</Text>
</TouchableOpacity>
</View>
</View>
);}}
This is my where I get my data in another file
const ClusterData = [
{ title: 'Cluster1',
data:
[
{name: 'passionate'},
{name: 'rousing'},
{name: 'confident'},
{name: 'boisterous'},
{name: 'rowdy'}
],
songlist:
[
{
id: '2222',
url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
title: 'Better Now',
artist: 'Post Malone',
},
{
id: '2',
url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
title: 'YoungBlood',
artist: '5SOS',
},
]
},
{ title: 'Cluster2',
data:
[
{name: 'rollicking'},
{name: 'cheerful'},
{name: 'fun'},
{name: 'sweet'},
{name: 'amiable'},
{name: 'natured'}
],
songlist:
[
{
id: '1111',
url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
title: 'Summertime',
artist: 'Yellow Claw',
},
{
id: '1',
url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
title: 'Despacito',
artist: 'Luis Fonsi',
},
]
},

You are passing wrong props in FlatListItem, now there is no songlist object beacause item itself is a songlist item,
So just pass it like this Actions.Play({songIndex: 0, item: this.props.item}) }> and Update inside Play class by replacing this.props.item.songlist to this.props.item
Below is the complete working example
import React, { Component } from 'react';
import {
View,
Text,
FlatList,
TouchableOpacity,
SectionList,
} from 'react-native';
import TrackPlayer from 'react-native-track-player';
const ClusterData = [
{
title: 'Cluster1',
data: [
{ name: 'passionate' },
{ name: 'rousing' },
{ name: 'confident' },
{ name: 'boisterous' },
{ name: 'rowdy' },
],
songlist: [
{
id: '2222',
url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
title: 'Better Now',
artist: 'Post Malone',
},
{
id: '2',
url:
'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
title: 'YoungBlood',
artist: '5SOS',
},
],
},
{
title: 'Cluster2',
data: [
{ name: 'rollicking' },
{ name: 'cheerful' },
{ name: 'fun' },
{ name: 'sweet' },
{ name: 'amiable' },
{ name: 'natured' },
],
songlist: [
{
id: '1111',
url:
'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
title: 'Summertime',
artist: 'Yellow Claw',
},
{
id: '1',
url:
'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
title: 'Despacito',
artist: 'Luis Fonsi',
},
],
},
];
export class MusicPlayer extends Component {
state = {
showSongList: false,
activeSection: null,
};
updateState = item => {
this.setState(item);
};
render() {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
{this.state.showSongList ? (
<SongList section={this.state.activeSection} />
) : (
<SectionList
renderItem={({ item, index }) => {
return <SectionListItem item={item} index={index} />;
}}
renderSectionHeader={({ section }) => {
return (
<SectionHeader
section={section}
updateState={this.updateState}
/>
);
}}
sections={ClusterData}
keyExtractor={(item, index) => item.name}
/>
)}
</View>
);
}
}
class SectionHeader extends Component {
render() {
return (
<View style={{ margin: 20, marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold' }}>{this.props.section.title}</Text>
<TouchableOpacity
onPress={() =>
this.props.updateState({
showSongList: true,
activeSection: this.props.section,
})
}
>
<Text style={{ color: 'blue' }}> Play</Text>
</TouchableOpacity>
</View>
);
}
}
class SectionListItem extends Component {
render() {
return (
<View>
<Text style={{ margin: 5, marginLeft: 20, fontStyle: 'italic' }}>
{this.props.item.name}
</Text>
</View>
);
}
}
export class SongList extends Component {
state = {
isPlayActive: false,
};
startPlay = data => {
this.setState({
isPlayActive: true,
data: data,
});
};
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.props.section.songlist}
renderItem={({ item, index, rowId }) => {
return (
<FlatListItem
item={item}
index={index}
startPlay={this.startPlay}
/>
);
}}
/>
{this.state.isPlayActive && <Play {...this.state.data} />}
</View>
);
}
}
class FlatListItem extends Component {
render() {
return (
<View style={{ backgroundColor: '#555', height: 80, marginTop: 20 }}>
<TouchableOpacity
onPress={() =>
this.props.startPlay({
songIndex: 0,
item: this.props.item,
})
}
>
<Text
style={{
paddingTop: 10,
textAlign: 'center',
fontSize: 20,
color: '#FFF',
}}
>
{this.props.item.title}
</Text>
<Text
style={{
textAlign: 'center',
fontSize: 15,
paddingTop: 10,
color: '#FFF',
}}
>
{this.props.item.artist}
</Text>
</TouchableOpacity>
</View>
);
}
}
export class Play extends Component {
componentDidMount() {
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add(this.props.item);
// Starts playing it
TrackPlayer.play();
});
}
onPressPlay = () => {
TrackPlayer.play();
};
onPressPause = () => {
TrackPlayer.pause();
};
render() {
return (
<View style={{ height: 400 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={{
backgroundColor: '#f0f0f0',
height: 40,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginRight: 10,
}}
onPress={this.onPressPlay}
>
<Text
style={{
fontWeight: 'bold',
textAlign: 'center',
color: 'black',
}}
>
Play
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: '#f0f0f0',
height: 40,
alignItems: 'center',
justifyContent: 'center',
}}
onPress={this.onPressPause}
>
<Text
style={{
fontWeight: 'bold',
textAlign: 'center',
color: 'black',
}}
>
Pause
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}