{"pageContext":{"isCreatedByStatefulCreatePages":false,"pkg":{"name":"react-native-timeline-listview","codeHtml":null,"exampleFilesJSON":"{\"path\":\"\",\"name\":\"react-native-timeline-listview\",\"children\":[{\"path\":\"app.js\",\"name\":\"app.js\",\"extension\":\".js\",\"size\":2932,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet,\\n Text,\\n View,\\n Navigator,\\n TouchableOpacity,\\n} from 'react-native'\\n\\nimport Menu from './pages/menu'\\nimport BasicExample from './pages/basicExample'\\nimport CustomExample from './pages/customExample'\\nimport DotExample from './pages/dotExample'\\nimport IconExample from './pages/iconExample'\\nimport PressExample from './pages/timelinePressExample'\\nimport OverrideExample from './pages/overrideRenderExample'\\nimport SingleRightExample from './pages/singleRightExample'\\nimport TwoColumnExample from './pages/twoColumnExample'\\nimport RefreshLoadMore from './pages/refreshLoadMoreExample'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.renderScene = this.renderScene.bind(this)\\n }\\n\\n renderScene(route, nav) {\\n switch (route.name) {\\n case 'menu':\\n return <Menu navigator={nav} />\\n case 'basic':\\n return <BasicExample navigator={nav} />\\n case 'custom':\\n return <CustomExample navigator={nav} />\\n case 'dot':\\n return <DotExample navigator={nav} />\\n case 'icon':\\n return <IconExample navigator={nav} />\\n case 'press':\\n return <PressExample navigator={nav} />\\n case 'override':\\n return <OverrideExample navigator={nav} />\\n case 'single-right':\\n return <SingleRightExample navigator={nav} />\\n case 'two-column':\\n return <TwoColumnExample navigator={nav} />\\n case 'refresh-loadmore':\\n return <RefreshLoadMore navigator={nav} />\\n }\\n }\\n\\n render() {\\n const NavigationBarRouteMapper = (\\n <Navigator.NavigationBar\\n routeMapper={{\\n LeftButton: (route, navigator, index, navState) => {\\n if (route.index === 0) {\\n return null\\n }\\n return (\\n <TouchableOpacity onPress={() => navigator.pop()}>\\n <Text style={styles.back}>Back</Text>\\n </TouchableOpacity>\\n )\\n },\\n RightButton: (route, navigator, index, navState) => null,\\n Title: (route, navigator, index, navState) => <Text style={styles.title}>{route.title}</Text>,\\n }}\\n style={{ backgroundColor: '#009688' }}\\n />\\n )\\n return (\\n <Navigator\\n initialRoute={{ name: 'menu', title: 'Timeline Listview', index: 0 }}\\n renderScene={this.renderScene}\\n navigationBar={NavigationBarRouteMapper}\\n />\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n justifyContent: 'center',\\n alignItems: 'center',\\n backgroundColor: '#F5FCFF',\\n },\\n title: {\\n fontSize: 20,\\n textAlign: 'center',\\n color: 'white',\\n },\\n back: {\\n paddingLeft: 10,\\n fontSize: 20,\\n color: 'white',\\n textAlign: 'center',\\n },\\n instructions: {\\n textAlign: 'center',\\n color: '#333333',\\n marginBottom: 5,\\n },\\n})\\n\"},{\"path\":\"img\",\"name\":\"img\",\"children\":[{\"path\":\"img/archery.png\",\"name\":\"archery.png\",\"extension\":\".png\",\"size\":6591,\"isFile\":true,\"codeHtml\":null},{\"path\":\"img/badminton.png\",\"name\":\"badminton.png\",\"extension\":\".png\",\"size\":3994,\"isFile\":true,\"codeHtml\":null},{\"path\":\"img/dumbbell.png\",\"name\":\"dumbbell.png\",\"extension\":\".png\",\"size\":4692,\"isFile\":true,\"codeHtml\":null},{\"path\":\"img/lunch.png\",\"name\":\"lunch.png\",\"extension\":\".png\",\"size\":4536,\"isFile\":true,\"codeHtml\":null},{\"path\":\"img/soccer.png\",\"name\":\"soccer.png\",\"extension\":\".png\",\"size\":5866,\"isFile\":true,\"codeHtml\":null}],\"isFile\":false,\"size\":25679},{\"path\":\"pages\",\"name\":\"pages\",\"children\":[{\"path\":\"pages/basicExample.js\",\"name\":\"basicExample.js\",\"extension\":\".js\",\"size\":1120,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.data = [\\n { time: '09:00', title: 'Event 1', description: 'Event 1 Description' },\\n { time: '10:45', title: 'Event 2', description: 'Event 2 Description' },\\n { time: '12:00', title: 'Event 3', description: 'Event 3 Description' },\\n { time: '14:00', title: 'Event 4', description: 'Event 4 Description' },\\n { time: '16:30', title: 'Event 5', description: 'Event 5 Description' },\\n ]\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline style={styles.list} data={this.data} />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/customExample.js\",\"name\":\"customExample.js\",\"extension\":\".js\",\"size\":1891,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n circleColor: '#009688',\\n lineColor: '#009688',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n },\\n { time: '12:00', title: 'Lunch' },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n circleColor: '#009688',\\n },\\n ]\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgb(45,156,219)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/dotExample.js\",\"name\":\"dotExample.js\",\"extension\":\".js\",\"size\":1956,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n circleColor: '#009688',\\n lineColor: '#009688',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n },\\n { time: '12:00', title: 'Lunch', icon: require('../img/lunch.png') },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n circleColor: '#009688',\\n },\\n ]\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgb(45,156,219)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"dot\\\"\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/iconExample.js\",\"name\":\"iconExample.js\",\"extension\":\".js\",\"size\":2057,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n lineColor: '#009688',\\n icon: require('../img/archery.png'),\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n icon: require('../img/badminton.png'),\\n },\\n { time: '12:00', title: 'Lunch', icon: require('../img/lunch.png') },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n icon: require('../img/soccer.png'),\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n icon: require('../img/dumbbell.png'),\\n },\\n ]\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"icon\\\"\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/menu.js\",\"name\":\"menu.js\",\"extension\":\".js\",\"size\":2654,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet,\\n Text,\\n View,\\n Navigator,\\n TouchableOpacity,\\n StatusBar,\\n} from 'react-native'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n\\n this.goto = this.goto.bind(this)\\n }\\n\\n goto(page) {\\n this.props.navigator.push(page)\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <StatusBar barStyle=\\\"light-content\\\" />\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() => this.goto({ name: 'basic', title: 'Basic Example' })}\\n >\\n <Text style={styles.menu}>Basic Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() => this.goto({ name: 'custom', title: 'Custom Example' })}\\n >\\n <Text style={styles.menu}>Custom Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() =>\\n this.goto({ name: 'dot', title: 'Circle Dot Example' })\\n }\\n >\\n <Text style={styles.menu}>Circle Dot Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() => this.goto({ name: 'icon', title: 'Icon Example' })}\\n >\\n <Text style={styles.menu}>Icon Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() => this.goto({ name: 'press', title: 'Press Example' })}\\n >\\n <Text style={styles.menu}>Press Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() =>\\n this.goto({ name: 'override', title: 'Override Render Example' })\\n }\\n >\\n <Text style={styles.menu}>Override Render Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() =>\\n this.goto({ name: 'single-right', title: 'Single Right Example' })\\n }\\n >\\n <Text style={styles.menu}>Single Column Right Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() =>\\n this.goto({ name: 'two-column', title: 'Two Column Example' })\\n }\\n >\\n <Text style={styles.menu}>Two Column Example</Text>\\n </TouchableOpacity>\\n <TouchableOpacity\\n style={styles.button}\\n onPress={() =>\\n this.goto({ name: 'refresh-loadmore', title: 'Refresh Load More' })\\n }\\n >\\n <Text style={styles.menu}>Refresh and Loadmore</Text>\\n </TouchableOpacity>\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n justifyContent: 'center',\\n alignItems: 'center',\\n backgroundColor: 'white',\\n },\\n button: {\\n padding: 10,\\n },\\n menu: {\\n fontSize: 20,\\n },\\n})\\n\"},{\"path\":\"pages/overrideRenderExample.js\",\"name\":\"overrideRenderExample.js\",\"extension\":\".js\",\"size\":4106,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet, Text, View, Image,\\n} from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.onEventPress = this.onEventPress.bind(this)\\n this.renderSelected = this.renderSelected.bind(this)\\n this.renderDetail = this.renderDetail.bind(this)\\n\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n lineColor: '#009688',\\n icon: require('../img/archery.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n icon: require('../img/badminton.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg',\\n },\\n {\\n time: '12:00',\\n title: 'Lunch',\\n icon: require('../img/lunch.png'),\\n },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n icon: require('../img/soccer.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n icon: require('../img/dumbbell.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg',\\n },\\n ]\\n this.state = { selected: null }\\n }\\n\\n onEventPress(data) {\\n this.setState({ selected: data })\\n }\\n\\n renderSelected() {\\n if (this.state.selected) {\\n return (\\n <Text style={{ marginTop: 10 }}>\\n Selected event: {this.state.selected.title} at{' '}\\n {this.state.selected.time}\\n </Text>\\n )\\n }\\n }\\n\\n renderDetail(rowData, sectionID, rowID) {\\n const title = <Text style={[styles.title]}>{rowData.title}</Text>\\n let desc = null\\n if (rowData.description && rowData.imageUrl) {\\n desc = (\\n <View style={styles.descriptionContainer}>\\n <Image source={{ uri: rowData.imageUrl }} style={styles.image} />\\n <Text style={[styles.textDescription]}>{rowData.description}</Text>\\n </View>\\n )\\n }\\n\\n return (\\n <View style={{ flex: 1 }}>\\n {title}\\n {desc}\\n </View>\\n )\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n {this.renderSelected()}\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"icon\\\"\\n onEventPress={this.onEventPress}\\n renderDetail={this.renderDetail}\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n title: {\\n fontSize: 16,\\n fontWeight: 'bold',\\n },\\n descriptionContainer: {\\n flexDirection: 'row',\\n paddingRight: 50,\\n },\\n image: {\\n width: 50,\\n height: 50,\\n borderRadius: 25,\\n },\\n textDescription: {\\n marginLeft: 10,\\n color: 'gray',\\n },\\n})\\n\"},{\"path\":\"pages/refreshLoadMoreExample.js\",\"name\":\"refreshLoadMoreExample.js\",\"extension\":\".js\",\"size\":3763,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet,\\n Text,\\n View,\\n RefreshControl,\\n ActivityIndicator,\\n} from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.onEndReached = this.onEndReached.bind(this)\\n this.renderFooter = this.renderFooter.bind(this)\\n this.onRefresh = this.onRefresh.bind(this)\\n\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n },\\n { time: '12:00', title: 'Lunch', icon: require('../img/lunch.png') },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n },\\n ]\\n\\n this.state = {\\n isRefreshing: false,\\n waiting: false,\\n data: this.data,\\n }\\n }\\n\\n onRefresh() {\\n this.setState({ isRefreshing: true })\\n\\n setTimeout(() => {\\n this.setState({\\n data: this.data,\\n isRefreshing: false,\\n })\\n }, 2000)\\n }\\n\\n onEndReached() {\\n if (!this.state.waiting) {\\n this.setState({ waiting: true })\\n\\n setTimeout(() => {\\n const data = this.state.data.concat([\\n {\\n time: '18:00',\\n title: 'Load more data',\\n description: 'append event at bottom of timeline',\\n },\\n {\\n time: '18:00',\\n title: 'Load more data',\\n description: 'append event at bottom of timeline',\\n },\\n {\\n time: '18:00',\\n title: 'Load more data',\\n description: 'append event at bottom of timeline',\\n },\\n {\\n time: '18:00',\\n title: 'Load more data',\\n description: 'append event at bottom of timeline',\\n },\\n {\\n time: '18:00',\\n title: 'Load more data',\\n description: 'append event at bottom of timeline',\\n },\\n ])\\n\\n this.setState({\\n waiting: false,\\n data,\\n })\\n }, 2000)\\n }\\n }\\n\\n renderFooter() {\\n if (this.state.waiting) {\\n return <ActivityIndicator />\\n }\\n return <Text>~</Text>\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline\\n style={styles.list}\\n data={this.state.data}\\n circleSize={20}\\n circleColor=\\\"rgb(45,156,219)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n refreshControl: (\\n <RefreshControl\\n refreshing={this.state.isRefreshing}\\n onRefresh={this.onRefresh}\\n />\\n ),\\n renderFooter: this.renderFooter,\\n onEndReached: this.onEndReached,\\n }}\\n innerCircle=\\\"dot\\\"\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/singleRightExample.js\",\"name\":\"singleRightExample.js\",\"extension\":\".js\",\"size\":4320,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet, Text, View, Image,\\n} from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.onEventPress = this.onEventPress.bind(this)\\n this.renderSelected = this.renderSelected.bind(this)\\n this.renderDetail = this.renderDetail.bind(this)\\n\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n lineColor: '#009688',\\n icon: require('../img/archery.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n icon: require('../img/badminton.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg',\\n },\\n {\\n time: '12:00',\\n title: 'Lunch',\\n icon: require('../img/lunch.png'),\\n },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n icon: require('../img/soccer.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n icon: require('../img/dumbbell.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg',\\n },\\n ]\\n this.state = { selected: null }\\n }\\n\\n onEventPress(data) {\\n this.setState({ selected: data })\\n }\\n\\n renderSelected() {\\n if (this.state.selected) {\\n return (\\n <Text style={{ marginTop: 10 }}>\\n Selected event: {this.state.selected.title} at{' '}\\n {this.state.selected.time}\\n </Text>\\n )\\n }\\n }\\n\\n renderDetail(rowData, sectionID, rowID) {\\n const title = <Text style={[styles.title]}>{rowData.title}</Text>\\n let desc = null\\n if (rowData.description && rowData.imageUrl) {\\n desc = (\\n <View style={styles.descriptionContainer}>\\n <Image source={{ uri: rowData.imageUrl }} style={styles.image} />\\n <Text style={[styles.textDescription]}>{rowData.description}</Text>\\n </View>\\n )\\n }\\n\\n return (\\n <View style={{ flex: 1 }}>\\n {title}\\n {desc}\\n </View>\\n )\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n {this.renderSelected()}\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"icon\\\"\\n onEventPress={this.onEventPress}\\n renderDetail={this.renderDetail}\\n separator={false}\\n detailContainerStyle={{\\n marginBottom: 20,\\n paddingLeft: 5,\\n paddingRight: 5,\\n backgroundColor: '#BBDAFF',\\n borderRadius: 10,\\n }}\\n columnFormat=\\\"single-column-right\\\"\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n title: {\\n fontSize: 16,\\n fontWeight: 'bold',\\n },\\n descriptionContainer: {\\n flexDirection: 'row',\\n paddingRight: 50,\\n },\\n image: {\\n width: 50,\\n height: 50,\\n borderRadius: 25,\\n },\\n textDescription: {\\n marginLeft: 10,\\n color: 'gray',\\n },\\n})\\n\"},{\"path\":\"pages/template.js\",\"name\":\"template.js\",\"extension\":\".js\",\"size\":1901,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description: 'Event 1 Description',\\n icon: require('../img/archery.png'),\\n },\\n {\\n time: '10:45',\\n title: 'Event 2',\\n description: 'Event 2 Description',\\n icon: require('../img/badminton.png'),\\n },\\n {\\n time: '12:00',\\n title: 'Event 3',\\n description: 'Event 3 Description',\\n icon: require('../img/lunch.png'),\\n },\\n {\\n time: '14:00',\\n title: 'Event 4',\\n description: 'Event 4 Description',\\n icon: require('../img/soccer.png'),\\n },\\n {\\n time: '16:30',\\n title: 'Event 5',\\n description: 'Event 5 Description',\\n icon: require('../img/dumbbell.png'),\\n },\\n ]\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n innerCircle=\\\"icon\\\"\\n options={{}}\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/timelinePressExample.js\",\"name\":\"timelinePressExample.js\",\"extension\":\".js\",\"size\":2494,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport { StyleSheet, Text, View } from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.onEventPress = this.onEventPress.bind(this)\\n this.renderSelected = this.renderSelected.bind(this)\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n lineColor: '#009688',\\n icon: require('../img/archery.png'),\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n icon: require('../img/badminton.png'),\\n },\\n { time: '12:00', title: 'Lunch', icon: require('../img/lunch.png') },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n icon: require('../img/soccer.png'),\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n icon: require('../img/dumbbell.png'),\\n },\\n ]\\n this.state = { selected: null }\\n }\\n\\n onEventPress(data) {\\n this.setState({ selected: data })\\n }\\n\\n renderSelected() {\\n if (this.state.selected) {\\n return (\\n <Text style={{ marginTop: 10 }}>\\n Selected event: {this.state.selected.title} at{' '}\\n {this.state.selected.time}\\n </Text>\\n )\\n }\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n {this.renderSelected()}\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"icon\\\"\\n onEventPress={this.onEventPress}\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n})\\n\"},{\"path\":\"pages/twoColumnExample.js\",\"name\":\"twoColumnExample.js\",\"extension\":\".js\",\"size\":3697,\"isFile\":true,\"codeHtml\":\"import React, { Component } from 'react'\\nimport {\\n StyleSheet, Text, View, Image,\\n} from 'react-native'\\nimport Timeline from 'react-native-timeline-listview'\\n\\nexport default class Example extends Component {\\n constructor() {\\n super()\\n this.onEventPress = this.onEventPress.bind(this)\\n this.renderSelected = this.renderSelected.bind(this)\\n\\n this.data = [\\n {\\n time: '09:00',\\n title: 'Archery Training',\\n description:\\n 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',\\n lineColor: '#009688',\\n icon: require('../img/archery.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg',\\n },\\n {\\n time: '10:45',\\n title: 'Play Badminton',\\n description:\\n 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\\n icon: require('../img/badminton.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg',\\n },\\n {\\n time: '12:00',\\n title: 'Lunch',\\n icon: require('../img/lunch.png'),\\n },\\n {\\n time: '14:00',\\n title: 'Watch Soccer',\\n description:\\n 'Team sport played between two teams of eleven players with a spherical ball. ',\\n lineColor: '#009688',\\n icon: require('../img/soccer.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg',\\n },\\n {\\n time: '16:30',\\n title: 'Go to Fitness center',\\n description: 'Look out for the Best Gym & Fitness Centers around me :)',\\n icon: require('../img/dumbbell.png'),\\n imageUrl:\\n 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg',\\n },\\n ]\\n this.state = { selected: null }\\n }\\n\\n onEventPress(data) {\\n this.setState({ selected: data })\\n }\\n\\n renderSelected() {\\n if (this.state.selected) {\\n return (\\n <Text style={{ marginTop: 10 }}>\\n Selected event: {this.state.selected.title} at{' '}\\n {this.state.selected.time}\\n </Text>\\n )\\n }\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n {this.renderSelected()}\\n <Timeline\\n style={styles.list}\\n data={this.data}\\n circleSize={20}\\n circleColor=\\\"rgba(0,0,0,0)\\\"\\n lineColor=\\\"rgb(45,156,219)\\\"\\n timeContainerStyle={{ minWidth: 52, marginTop: -5 }}\\n timeStyle={{\\n textAlign: 'center',\\n backgroundColor: '#ff9797',\\n color: 'white',\\n padding: 5,\\n borderRadius: 13,\\n }}\\n descriptionStyle={{ color: 'gray' }}\\n options={{\\n style: { paddingTop: 5 },\\n }}\\n innerCircle=\\\"icon\\\"\\n onEventPress={this.onEventPress}\\n separator={false}\\n detailContainerStyle={{\\n marginBottom: 20,\\n paddingLeft: 5,\\n paddingRight: 5,\\n backgroundColor: '#BBDAFF',\\n borderRadius: 10,\\n }}\\n columnFormat=\\\"two-column\\\"\\n />\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n padding: 20,\\n paddingTop: 65,\\n backgroundColor: 'white',\\n },\\n list: {\\n flex: 1,\\n marginTop: 20,\\n },\\n title: {\\n fontSize: 16,\\n fontWeight: 'bold',\\n },\\n descriptionContainer: {\\n flexDirection: 'row',\\n paddingRight: 50,\\n },\\n image: {\\n width: 50,\\n height: 50,\\n borderRadius: 25,\\n },\\n textDescription: {\\n marginLeft: 10,\\n color: 'gray',\\n },\\n})\\n\"}],\"isFile\":false,\"size\":29959}],\"isFile\":false,\"size\":58570}","gallery":[{"src":"https://cloud.githubusercontent.com/assets/21040043/24320617/6a7494ea-116b-11e7-9cf5-12244f5eec58.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24321589/78d0c77c-1182-11e7-9c0f-69ebe591cb14.png","width":400,"height":435},{"src":"https://user-images.githubusercontent.com/6987730/35145888-fae0f1e2-fd3b-11e7-9571-2143342512c8.png","width":369,"height":308},{"src":"https://cloud.githubusercontent.com/assets/21040043/24749638/0515f210-1aee-11e7-82af-082d93efb618.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24749469/60a7869e-1aed-11e7-9c41-f87f866b2d8d.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/26756369/304d2e7a-48cb-11e7-816d-66e8d40a97ee.png","width":820,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24320661/36fe76e8-116c-11e7-950f-2968aef312bb.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24320654/1c5de27e-116c-11e7-95cc-750d55e001b8.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24320644/f5bc5b0a-116b-11e7-9252-2c9fc2361dc9.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24320631/9df21a86-116b-11e7-8865-2631d35bc640.png","width":400,"height":711},{"src":"https://cloud.githubusercontent.com/assets/21040043/24750025/8c8d044e-1aef-11e7-8fd7-7d64431af7e4.png","width":913,"height":1086}]}}}