You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.4 KiB
145 lines
3.4 KiB
import { BackgroundImage } from '@rneui/base';
|
|
import React from 'react';
|
|
import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';
|
|
import TopBar from '../components/TopBar';
|
|
|
|
export default function Session_browser(props: {navigation: any}) {
|
|
type ItemProps = { title: string };
|
|
const { navigation } = props;
|
|
const Item = ({title}: ItemProps) => (
|
|
<View style={styles.item}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
</View>
|
|
);
|
|
const DATA = [
|
|
{
|
|
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
|
|
title: 'First Item',
|
|
},
|
|
{
|
|
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
|
|
title: 'Second Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d71',
|
|
title: 'Third Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d78',
|
|
title: 'c Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d76',
|
|
title: 'b Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d75',
|
|
title: 'a Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d73',
|
|
title: 's Item',
|
|
},
|
|
{
|
|
id: '58694a0f-3da1-471f-bd96-145571e29d13',
|
|
title: 's Item',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.container}>
|
|
{/* Header */}
|
|
<TopBar navigation={navigation} />
|
|
|
|
{/* Body */}
|
|
<View style={styles.container}>
|
|
<BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" style={styles.backgroundImage}>
|
|
|
|
<Text style={styles.text_title}>Sessions</Text>
|
|
|
|
<FlatList data={DATA} renderItem={({ item }) =>
|
|
<TouchableHighlight onPress={() => navigation.navigate('Lap', { "lap": item })}>
|
|
<Item title={item.title} />
|
|
</TouchableHighlight>
|
|
} keyExtractor={(Item) => Item.title} />
|
|
|
|
<TouchableOpacity style={styles.addContainerButton} onPress={() => navigation.navigate('Add')}>
|
|
<View>
|
|
<Text style={styles.button_text} >Add a session</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
</BackgroundImage>
|
|
|
|
</View>
|
|
|
|
|
|
</View>
|
|
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
item: {
|
|
borderRadius:10,
|
|
opacity:0.9,
|
|
backgroundColor: '#C5C5C5',
|
|
padding: 20,
|
|
marginVertical: 8,
|
|
marginHorizontal: 16,
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
},
|
|
backgroundImage: {
|
|
flex:1,
|
|
width:'100%',
|
|
},
|
|
|
|
container: {
|
|
flex:1,
|
|
},
|
|
|
|
addImageContainer:{
|
|
backgroundColor: '#fff',
|
|
borderRadius: 50,
|
|
width: 40,
|
|
height: 40,
|
|
overflow: 'hidden',
|
|
alignItems:'center'
|
|
},
|
|
|
|
addContainerButton:{
|
|
margin:10,
|
|
alignItems:'center',
|
|
justifyContent:'center',
|
|
height: "10%",
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 10,
|
|
elevation: 3,
|
|
backgroundColor: '#BF181F',
|
|
},
|
|
button_text: {
|
|
color:'#fff',
|
|
fontSize:20,
|
|
},
|
|
|
|
text_title: {
|
|
fontWeight: 'bold',
|
|
fontSize: 30,
|
|
textAlign:'center',
|
|
padding:10,
|
|
textShadowColor: '#fff',
|
|
textShadowOffset: { width: 0, height: 0 },
|
|
textShadowRadius: 10,
|
|
},
|
|
|
|
topbar: {
|
|
height: '10%',
|
|
}
|
|
|
|
});
|