I am making a music app using react-native-track-player. I made 3 components called Clusters, Songlist and Play.
How screen works
Clusters component -> Songlist component -> Play component. Problem for me is that I don't know how to pass the index of the song selected to the SongList component from Clusters component which will also allow me to pass it to my Play component. I am not sure how to do it.
I created data. First screen shows title and mood(Songlist component). Second screen (Songlist shows the playlist depending on the title that I clicked.
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"
}
]
}
];
This is my Clusters screen (first screen)
export default class Clusters 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}
/>
</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} />;
}}
/>
</View>
);
}
}
class FlatListItem extends Component {
render() {
return (
<View>
<TouchableOpacity
onPress={() =>
Actions.Play({
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>
);
}
}
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[index]);
// 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>
);
}
}
export default class App extends Component {
setSong(var selectedSong){
// do something with the selectedsong, maybe in the state
this.setState({currentSong: selectedSong});
}
render() {
return (
<View>
<FlatList
data={this.props.section.songlist}
renderItem={({ item, index, rowId }) => {
return <FlatListItem item={item} index={index} />;
}}
/>
</View>
);
}
}
You need something like this
export default class App extends Component {
this.state = {
index:0
}
setSong(var selectedSong){
var index = this.props.songlist.index(selectedSong);
this.setState({index: index});
}
render() {
return (
<View>
<FlatList
data={this.props.section.songlist}
renderItem={({ item, index, rowId }) => {
return <FlatListItem item={item} index={index} />;
}}
/>
</View>
);
}
}
class FlatListItem extends Component {
this.state = {
index:0
}
setSong(var selectedSong){
var index = this.props.songlist.index(selectedSong);
this.setState({index: index});
}
render() {
return (
<View>
<TouchableOpacity
onPress={() =>
Actions.Play({
songlist: this.props.item.songlist,
item: this.props.item,
index: this.state.index,
setSong: () => this.setSong
})
}
>
<Text style={styles.itemTitle}>{this.props.item.songtitle}</Text>
<Text style={styles.itemArtist}>{this.props.item.artist}</Text>
</TouchableOpacity>
</View>
);
}
}
just try passing a function as a prop that you can call in the child
function setSong(var selectedSong){
// do something with the selectedsong, maybe in the state
this.setState({currentSong: selectedSong});
}
and then pass this function
<TouchableOpacity
onPress={() =>
Actions.Play({
songlist: this.props.item.songlist,
item: this.props.item,
setSong: () => this.setSong
})
}
>
Related
how can I access a single element from an array nested in a state like this
state = {
modal: false,
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
]
};
.....
<MyList.Provider
value={{
}}
>
<FlatList
data={this.state.post}
renderItem={({ item }) => (
<>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.deleteItem(item)}
style={styles.Delete}
>
<MaterialCommunityIcons name="delete" color="red" size={30} />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.props.navigation.navigate("Edit", item)}
style={styles.Edit}
>
<MaterialCommunityIcons
name="playlist-edit"
color="green"
size={35}
/>
</TouchableOpacity>
<Card
title={item.title}
subTitle={item.des}
image={item.image}
onPress={() =>
this.props.navigation.navigate("Details", item)
}
/>
</>
)}
/>
</MyList.Provider>
how can I do this like this.state.post({title}) or some way else??
I need to use this values with context so I can share and change some particular data with between 2 screens. I know to pass data I need to use context or navigation.navigate("route name",item). But if I use navigation I won't able to edit it but how can I pass data in context value from array set, if I do this.state.post it will return whole list and if i do this.state.post[0].title it will return only title of that post. So how can i do this? Please help
You have to indicate the index of the object you’re trying to access in the array. For instance to access the first object in the array you can do this
this.state.post[0]
below is my solution which follows the logic i think you are trying to achieve. I have used a flatlist
Let me know if it helps
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
FlatList,
} from 'react-native';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
]
};
}
handleEdit(item) {
const { post } = this.state;
const extractIndex = post.findIndex(e => e.key === item.key);
const newPost = post[extractIndex];
this.props.navigation.navigate('Edit', { newPost })
this.setState({ post });
}
handleDelete(item) {
const { post } = this.state;
const newPost = post.filter(e => e.key !== item.key);
this.setState({ post: newPost });
}
renderItem = ({ item }) => {
return (
<View>
<Text>
{item.title}
</Text>
<TouchableOpacity key={item.key} onPress={this.handleEdit.bind(this, item)}>
<Text>Edit</Text>
</TouchableOpacity>
<TouchableOpacity key={item.key} onPress={this.handleDelete.bind(this, item)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.post}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Use .map() function
Ex-
var cat_data = categories_list.map(function (item) {
var cat_data = categories_list.map(function (item) {
return {
name: item.Name,
thumb_url: item.PictureModel.ImageUrl,
cat_id: item.Id.toString(),
};
});
this.setState({
data: cat_data,
});
I am developing react native application where I wanted to show some loader before loading screen,
I have different component for Loader and different component to load data,
In Loader component I hava a field isVisible (true/false) like below
constructor(props) {
super(props);
this.state = {
index: 0,
types: ['CircleFlip', 'Bounce', 'Wave', 'WanderingCubes', 'Pulse', 'ChasingDots', 'ThreeBounce', 'Circle', '9CubeGrid', 'WordPress', 'FadingCircle', 'FadingCircleAlt', 'Arc', 'ArcAlt'],
size: 100,
color: "#ff0000",
isVisible: true
}
render() {
var type = this.state.types[this.state.index];
return (
<View style={styles.container}>
<Spinner style={styles.spinner} isVisible={this.state.isVisible} size={this.state.size} type={'ThreeBounce'} color={this.state.color}/>
</View>
);
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#d35400',
},
spinner: {
marginBottom: 50
},
btn: {
marginTop: 20
},
text: {
color: "white"
}
});
and in Other Component where I am rendering my view after getting data from api.
constructor(props) {
super(props);
this.state = {
tableHead: ['Form Name', 'Download'],
tableData: [],
isVisible:true
}
}
componentDidMount(){
dataSourceRes =getDocumentList(function(dataSourceRes){
var tableDataRows=[];
for(let i = 0; i < dataSourceRes.length; i++){
var arr=[];
arr.push(dataSourceRes[i].docName, dataSourceRes[i].docPath);
tableDataRows.push(arr);
}
this.setState({
tableData : tableDataRows
});
}.bind(this));
};
render() {
const state = this.state;
const element = (data, index) => (
<TouchableOpacity onPress={() => this._alertIndex(data)}>
<View style={styles.btn}>
<Text style={styles.btnText}>Download</Text>
</View>
</TouchableOpacity>
);
return (
<View style={styles.container}>
<Loader></Loader>
{/* <Loader> */}
<ScrollView>
<Table borderStyle={{borderColor: 'transparent'}}>
<Row data={state.tableHead} style={styles.head} textStyle={styles.textHeader}/>
{
state.tableData.map((rowData, index) => (
<TableWrapper key={index} style={styles.row}>
{
rowData.map((cellData, cellIndex) => (
<Cell key={cellIndex} data={cellIndex === 1 ? element(cellData, index) : cellData} textStyle={styles.text}/>
))
}
</TableWrapper>
))
}
</Table>
</ScrollView>
{/* </Loader> */}
</View>
)
}
}
Please let me know the solution how to resolve it
You could do as follows
class Foo extends React.Component {
constructor(props) {
this.state = { loading: true };
}
componentDidMount() {
// Fetch data then set state
fetch(something).then(() => this.setState({ loading: false }));
}
render() {
if (this.state.loading) {
return <Loader/>;
}
return <MyComponent/>;
}
}
After fetched data from api then send isvisibility false to loader component
I want to use a value, from the file Step3.js in Step4.js, the value can change after user input in Step3. But how can I use this value in Step4?
I have tried some things, but I guess I miss the point here, so hopefully somebody can help me out with this.
This is my code:
App.js:
import React, { Component } from 'react'
import { AppRegistry, StyleSheet, View, Text } from 'react-native'
import { ViewPager } from 'rn-viewpager'
import StepIndicator from 'react-native-step-indicator'
import Step1 from "./Step1";
import Step2 from "./Step2";
import Step3 from "./Step3";
import Step4 from "./Step4";
const PAGES = [{id: 1, page: <Step1/>},{id: 2, page: <Step2/>}, {id: 3, page: <Step3/>}, {id: 4, page: <Step4/>}];
const firstIndicatorStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 5,
currentStepStrokeWidth: 3,
separatorFinishedColor: '#4aae4f',
separatorUnFinishedColor: '#a4d4a5',
stepIndicatorFinishedColor: '#4aae4f',
stepIndicatorUnFinishedColor: '#a4d4a5',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 15,
currentStepIndicatorLabelFontSize: 15,
stepIndicatorLabelCurrentColor: '#000000',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
labelColor: '#666666',
labelSize: 12,
currentStepLabelColor: '#4aae4f'
};
export default class App extends Component {
constructor (props) {
super(props);
this.state = {
currentPosition: 0,
stepCount: 4,
}
}
componentWillReceiveProps (nextProps, nextState) {
if (nextState.currentPosition != this.state.currentPosition) {
if (this.viewPager) {
this.viewPager.setPage(nextState.currentPosition)
}
}
}
render () {
return (
<View style={styles.container}>
<ViewPager
style={{ flexGrow: 1 }}
ref={viewPager => {
this.viewPager = viewPager
}}
onPageSelected={page => {
this.setState({ currentPosition: page.position })
}}
>
{PAGES.map(page => this.renderViewPagerPage(page))}
</ViewPager>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={firstIndicatorStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']}
/>
</View>
</View>
)
}
renderViewPagerPage = (data) => {
console.log(data);
console.log(this.state.currentPosition);
return (
<View key={data.id}>
{data.page}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
stepIndicator: {
marginVertical: 20
},
});
Step3.js:
export function getSelected3() {
return this.state.selected;
}
class Step3 extends Component {
constructor(props){
super(props);
this.state = {
happy: {
"id" : "1",
"name" : "happy",
"src" : require('../../assets/images/makkelijk.png')
},
normal: {
"id" : "2",
"name" : "normal",
"src" : require('../../assets/images/gemiddeld.png'),
},
sad: {
"id" : "3",
"name" : "sad",
"src" : require('../../assets/images/moeilijk.png'),
},
selected: {
"id" : "4",
"name" : "",
"src" : require('../../assets/images/moeilijk.png'),
},
};
}
onPress = (item) => {
this.state.selected.name = item.name;
this.state.selected.src = item.src;
alert(this.state.selected.name);
};
render() {
return (
<View style={styles.container}>
<View style={[styles.box]}>
<TouchableHighlight onPress={() => this.onPress(this.state.happy)}>
<Image
style={styles.image}
source={this.state.happy.src}
/>
</TouchableHighlight>
</View>
<View style={[styles.box]}>
<TouchableHighlight onPress={() => this.onPress(this.state.normal)}>
<Image
style={styles.image}
source={this.state.normal.src}
/>
</TouchableHighlight>
</View>
<View style={[styles.box]}>
<TouchableHighlight onPress={() => this.onPress(this.state.sad)}>
<Image
style={styles.image}
source={this.state.sad.src}
/>
</TouchableHighlight>
</View>
</View>
)
}
}
So I want to use the date from the state in Step3 selected into Step4.js, How can I Do this?
Step4.js:
class Step4 extends Component {
constructor(props) {
super(props);
this.state = {
value3: {
"id": "3",
"name" : "",
"src" : "",
},
};
}
render() {
let test = getSelected3();
this.state.value3.src = value3.src;
return (
<View style={styles.container}>
<View style={[styles.box]}>
<TouchableHighlight>
<Image
style={styles.image}
source={this.state.value3.src}
/>
</TouchableHighlight>
</View>
<View style={[styles.box]}>
<TouchableHighlight>
<Image
style={styles.image}
source={this.state.value3.src}
/>
</TouchableHighlight>
</View>
<View style={[styles.box]}>
<TouchableHighlight>
<Image
style={styles.image}
source={this.state.value3.src}
/>
</TouchableHighlight>
</View>
</View>
)
}
Suggest you to make Step3 and Step4 components stateless which will receive only props and create a component Stepper which will render both Step3 and Step4. Stepper component will do all the state manipulations.
class Stepper extents Component {
render() {
const { state1, state2, state3, state4, onPress } = this.state;
return [
<Step3 state1={state1} state3={state3} onPress={onPress} />,
<Step4 state2={state2} state4={state4} />
];
}
}
And Step3 would look like this:
const Step3 = ({ state1, state2, onPress }) => {
return (<TouchableHighlight onPress={onPress}></TouchableHighlight);
};
Hope you get the idea.
Copy pasting my answer from a similar question
I usually create a global.js containing:
module.exports = {
step3State: null,
};
And get the value of the state on the screen
render() {
GLOBAL.step3State = this;
//enter code here
}
Now you can use it anywhere like so:
GLOBAL.step3State.setState({
var: value
});
or
Global.step3State.state.value
I need your help I'm using firebase for my app. I'm trying to get the users ID not the logged users no all users I have. I want to show their (uid) simply like in an alert for each user. Also, I'm showing them in a flatlist and when I set item.uid in an alert it shows (undefined). But, all the other data of the user is shown correctly. This what I did until now:
**
users.js
**
export default class usersList extends React.Component{
state = {
loading: false,
uid: '',
users: [],
items: []
};
componentDidMount() {
let itemsRef = f.database().ref('users').once('value').then(snapshot => {
var data = snapshot.val();
var items = Object.values(data);
this.setState({items});
console.log(snapshot.val())
});
}
renderItem({item}) {
return (
<View key={index} style={{width: '100%', overflow:'hidden', marginBottom: 5, justifyContent:'space-between', borderBottomWidth:1, borderColor: 'grey'}}>
<View>
<View style={{padding:5, width:'100%', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{item.email}</Text>
</View>
</View>
</View>
)
}
render() {
return (
<View style={styles.container}>
<ScrollView>
{
this.state.items.length > 0
? <ItemComponent items={this.state.items} navigation={this.props.navigation} />
: <Text>No stores</Text>
}
</ScrollView>
</View>
);
}
}
//ItemComponent.js
export default class ItemComponent extends Component {
static propTypes = {
items: PropTypes.array.isRequired
};
render() {
return (
<View style={styles.itemsList}>
{this.props.items.map((item, index) => {
return (
<View key={index}>
<TouchableOpacity
onPress={ () => alert(item.uid)}>
<Text style={styles.itemtext}>{item.email}</Text>
</TouchableOpacity>
</View>
)
})}
</View>
);
}
}
firebase.database().ref('user').on('value', (datasnapshot) => {
this.setState({
_id: datasnapshot.key
});`
This solution worked for me
<Text style={styles.yourStyleHere}>UID: {auth.currentUser?.uid} </Text>
Im pretty new in React Native (and Javscript) and im trying to understand react native navigation.
I have a homeScreen, and in this screen there is a CardFlatList, which has several CardComponents. If i click on a CardComponent, a Detail Page should open and represent the information of the cardComponent.
First I tried the navigation with a button in the homeScreen and it worked. But i don't know how to pass the navigator from homescreen -> CardFlatList -> CardComponent (onPress).
My CardComponent
export default class CardComponent extends Component {
constructor(props) {
super(props)
}
render() {
return (
<View style={styles.container}>
<Card
featuredTitle={this.props.eventname}
featuredSubtitle={this.props.eventveranstalter}
image={{uri: this.props.eventimage}}
>
<View style={styles.chipContainer}>
<ChipsComponent text={this.props.eventtag1} style={{ marginBottom: 10 }} />
<ChipsComponent text={this.props.eventtag2} style={{ marginBottom: 10 }} />
<ChipsComponent text={this.props.eventtag3} style={{ marginBottom: 10 }} />
</View>
<View style={styles.cardaction}>
<Text style={styles.cardfooter}>
{this.props.eventuhr}
</Text>
<Text style={styles.cardfooter}>
{this.props.eventort}
</Text>
<Button
backgroundColor='#5ac8fa'
fontFamily='Arial'
fontWeight='bold'
buttonStyle={styles.buttonfooter}
title='Teilnehmen' />
</View>
</Card>
</View>
)
}
My homeScreen
export default class homeScreen extends Component {
static navigationOptions = {
drawerLabel: 'Home',
headerMode: 'none',
};
constructor(props) {
super(props)
}
render() {
var {navigate} = this.props.navigation;
return (
<View style={styles.containerAll}>
<Navigationbar onPressBar={()=>this.props.navigation.navigate('DrawerOpen')} />
<View style={styles.container}>
<CardFlatList navigation={this.props.navigation} />
</View>
</View>
);
}
}
my router.js
export const DrawNavigation = DrawerNavigator({
Home: {
screen: homeScreen
},
Notifications: {
screen: test,
},
});
export const Root = StackNavigator({
DrawNavigation: {
screen: DrawNavigation,
navigationOptions: {
header: false,
},
},
First: { screen: homeScreen },
Second: { screen: eventDetailScreen },
});
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator,Image } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
import CardComponent from './CardComponent';
function getCardComponentArray() {
var texts = ['1', '2', '3', '4', '5'];
var cardComponents = texts.map((text) => <CardComponent title={text} />);
return cardComponents;
}
function getData() {
var texts = ['1', '2', '3', '4', '5'];
return texts
}
class CardFlatList extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
this.setState({
data: getData(),
error: null,
loading: false,
refreshing: false
});
};
handleRefresh = () => {
this.setState(
{
page: 1,
seed: this.state.seed + 1,
refreshing: true
},
() => {
this.makeRemoteRequest();
}
);
};
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.makeRemoteRequest();
}
);
};
renderSeparator = () => {
return (
<View
style={{
height: 2,
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
}}
>
<ActivityIndicator animating size="large" />
</View>
);
};
render() {
return (
// <List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<CardComponent
eventname={'Halloween'}
eventveranstalter={'park'}
eventuhr={'17:00'}
eventort={'berlin'}
eventimage={'http://whatstonightapp.com/wp-content/uploads/2016/12/background_light-1.jpg'}
eventtag1={'party'}
eventtag2={'music'}
eventtag3={'dance'}
>
</CardComponent>
)}
keyExtractor={item => item.email}
ItemSeparatorComponent={this.renderSeparator}
// ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
/>
// </List>
);
}
}
export default CardFlatList;
You can do it as following.
render() {
return (
// <List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<CardComponent
navigation={this.props.navigation}
eventname={'Halloween'}
eventveranstalter={'park'}
eventuhr={'17:00'}
eventort={'berlin'}
eventimage={'http://whatstonightapp.com/wp-content/uploads/2016/12/background_light-1.jpg'}
eventtag1={'party'}
eventtag2={'music'}
eventtag3={'dance'}
>
</CardComponent>
)}