Skip to content

Instantly share code, notes, and snippets.

@patcito
Created June 11, 2017 10:13
Show Gist options
  • Save patcito/ae868cefd680090658e6cb497846d471 to your computer and use it in GitHub Desktop.
Save patcito/ae868cefd680090658e6cb497846d471 to your computer and use it in GitHub Desktop.
import React from "react";
import { SectionList, StyleSheet, Text, View, Image } from "react-native";
import ToggleButton from "../components/ToggleButton";
const thursdaySections = [
{
key: "8:30 AM",
data: [{ key: 0, title: "Registration, breakfast" }]
},
{
key: "10:00 AM",
data: [{ key: 0, title: "Conference Keynote", speaker: "Lucy Vatne" }]
}
];
const extractKey = ({ id }) => id;
const fridaySections = [
{
key: "10:30 AM",
data: [{ key: 0, title: "More breakfast" }]
},
{
key: "12:00 PM",
data: [{ key: 0, title: "More Keynote", speaker: "Lucy Vatne" }]
}
];
export default class Schedule extends React.Component {
state = {
selectedDay: "THURSDAY"
};
handlePressItem = item => {
this.setState({ selectedDay: item });
};
renderItem = ({ item }) => {
return (
<View style={styles.row} key={item.key}>
<Text style={styles.rowTitle}>{item.title}</Text>
<Text style={styles.rowSpeaker}>{item.speaker}</Text>
</View>
);
};
renderSectionHeader = ({ section }) => {
return (
<View style={styles.sectionHeader}>
<Text style={styles.sectionHeaderText}>{section.key}</Text>
</View>
);
};
render() {
const { selectedDay } = this.state;
return (
<View style={styles.container}>
<Image style={styles.image} source={require("../assets/hero.png")}>
<Image style={styles.logo} source={require("../assets/logo.png")} />
<Text style={styles.title}>React Europe Conference</Text>
<ToggleButton
items={["THURSDAY", "FRIDAY"]}
value={selectedDay}
onPressItem={this.handlePressItem}
/>
</Image>
<SectionList
style={styles.list}
sections={
selectedDay === "THURSDAY" ? thursdaySections : fridaySections
}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
list: {
flex: 1
},
sectionHeader: {
backgroundColor: "whitesmoke",
padding: 20
},
sectionHeaderText: {
fontSize: 13
},
row: {
backgroundColor: "white",
padding: 20
},
rowTitle: {
fontSize: 13,
fontWeight: "500"
},
rowSpeaker: {
fontSize: 13
},
image: {
paddingVertical: 30,
height: null,
width: null,
justifyContent: "center",
alignItems: "center"
},
logo: {
width: 46,
height: 40,
marginBottom: 10
},
title: {
backgroundColor: "transparent",
color: "white",
fontSize: 24,
marginBottom: 10
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment