swimtracker-app/components/HomeView.js

57 lines
2.2 KiB
JavaScript
Raw Normal View History

2020-06-02 17:19:09 +02:00
import React from 'react';
import { Content, Card, CardItem, Body, Text, Button } from 'native-base';
import { Image, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { startSession} from '../state/ActionCreators';
function HomeView(props) {
const buttonText = props.running ? "View Swim Session" : "Start swimming";
const onButtonPress = () => {
if(!props.running) {
props.dispatch(startSession());
}
props.navigation.navigate('Training')
};
return (
<Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1, marginTop: 70 }}>
<ScrollView styles={{ marginHorizontal: 20, paddingTop: 100 }} alwaysBounceHorizontal={true} alwaysBounceVertical={true}>
<Card style={{ backgroundColor: "transparent" }}>
<CardItem cardBody>
<Image source={require('../assets/pool-water.jpg')} style={{ height: 100, width: null, flex: 1 }} />
</CardItem>
<CardItem style={{backgroundColor: 'rgba(255, 255, 255, 0.6)'}}>
<Body>
<Button block onPress={onButtonPress}>
<Text>{buttonText}</Text>
</Button>
</Body>
</CardItem>
</Card>
<Card style={{ backgroundColor: "transparent" }}>
<CardItem cardBody>
<Image source={require('../assets/blue-water-background.jpg')} style={{ height: 100, width: null, flex: 1 }} />
</CardItem>
<CardItem style={{backgroundColor: 'rgba(255, 255, 255, 0.6)'}}>
<Body>
<Button block >
<Text>Settings</Text>
</Button>
</Body>
</CardItem>
</Card>
</ScrollView>
</Content>
);
}
const mapStateToProps = (state) => {
return { running: state.session.running };
};
export default connect(mapStateToProps)(HomeView);