event detail pages

src/pages/main/CreateEvent/index.tsx

@@ -5,7 +5,11 @@ import ImagePicker from "../../../components/ImagePicker"
 import { NavigationStackScreenOptions } from "react-navigation"
 import { StyleSheet, ScrollView } from "react-native"
 
-export default class CreateEvent extends Component {
+interface IProps {
+ navigation: NavigationScreenProp<any, any>
+}
+
+export default class CreateEvent extends Component<IProps> {
  public static navigationOptions: NavigationStackScreenOptions = {
  title: "Create Event",
  }

src/pages/main/EventDetail/index.tsx

@@ -1,14 +1,17 @@
 import React, { Component } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
-import { Button } from "@ant-design/react-native";
-import { NavigationScreenProp } from "react-navigation";
+import { Text, View, StyleSheet,ImageBackground } from "react-native";
+import { Button, WhiteSpace } from "@ant-design/react-native";
+import { NavigationScreenProp, NavigationStackScreenOptions } from "react-navigation";
 import constants from "../../../config/constants";
 
 interface IProps {
  navigation: NavigationScreenProp<any, any>;
 }
 
 export default class EventDetail extends Component<IProps> {
+ public static navigationOptions: NavigationStackScreenOptions = {
+ title: "Create Event",
+ }
  state = {
  absent: false,
  attend: false
@@ -17,22 +20,22 @@ export default class EventDetail extends Component<IProps> {
  render() {
  return (
  <View style={styles.container}>
- <View style={styles.bannerContainer}>
- <Text style={{ fontSize: 30 }}>Event Name</Text>
- <Text style={{ fontSize: 20, color: "white" }}>Event Date</Text>
- <Text style={{ fontSize: 15, color: "white" }}>Event Location</Text>
- <Text style={{ marginTop: 20 }}>
- Organized by : Facebook Developer Circle Malang
- </Text>
- </View>
+ {/* <View style={styles.bannerContainer}> */}
+ <ImageBackground source={require('../../../../assets/FB.jpg')} resizeMode={"cover"} style={styles.bannerContainer} />
+ <View style={styles.text}>
+ <Text style={styles.textEventName}>Event Name</Text>
+ <Text style={styles.textEventDate}>Event Date</Text>
+ <Text style={styles.textEventLocation}>Event Location</Text>
+ <Text style={styles.textOrganized}>
+ Organized by : Facebook Developer Circle Malang
+ </Text> 
+ </View>
+ {/* </ImageBackground> */}
+ {/* </View> */}
 
  <View style={styles.content}>
  <View
- style={{
- width: constants.DEVICE_WIDTH * 0.8,
- alignSelf: "center",
- top: 20
- }}
+ style={styles.eventContent}
  >
  <Text>Event Description:</Text>
  <Text>
@@ -41,24 +44,29 @@ export default class EventDetail extends Component<IProps> {
  quis. Maecenas fringilla orci at lacinia luctus.
  </Text>
  </View>
- <View style={{ margin: 30 }} />
+ <WhiteSpace />
  <Button
- style={{
- width: constants.DEVICE_WIDTH * 0.6,
- alignSelf: "center",
- marginTop: 20
- }}
- type="ghost"
+ style={styles.btnChecked}
+ type="primary"
  onPress={() => this.setState({ attend: !this.state.attend })}
  >
  Check In
  </Button>
- <Text
+
+ <Button
+ style={styles.btnChecked}
+ type="ghost"
+ onPress={() => this.setState({ absent: !this.state.absent })}
+ >
+ Absent
+ </Button>
+
+ {/* <Text
  onPress={() => this.setState({ absent: !this.state.absent })}
  style={{ color: "gray", alignSelf: "center", top: 50 }}
  >
  Absent
- </Text>
+ </Text> */}
  </View>
  </View>
  );
@@ -71,8 +79,17 @@ const styles = StyleSheet.create({
  alignItems: "center",
  justifyContent: "center",
  width: constants.DEVICE_WIDTH,
+ // height: constants.DEVICE_HEIGHT,
+ height: 300,
+ opacity: 0.5,
+ //backgroundColor: "skyblue",
+ },
+ text: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: 'center',
+ width: constants.DEVICE_WIDTH,
  height: constants.DEVICE_HEIGHT,
- backgroundColor: "skyblue"
  },
  content: {
  width: constants.DEVICE_WIDTH,
@@ -84,5 +101,34 @@ const styles = StyleSheet.create({
  flex: 1,
  flexDirection: "column",
  justifyContent: "space-between"
- }
+ },
+ image: {
+ width: constants.DEVICE_WIDTH * 0.95,
+ height: 200,
+ opacity: 0.5,
+ },
+ textEventName: {
+ fontSize: 30,
+ },
+ textEventDate: {
+ fontSize: 20, 
+ color: "black",
+ },
+ textEventLocation: {
+ fontSize: 15, 
+ color: "black",
+ },
+ textOrganized: {
+ marginTop: 20,
+ },
+ eventContent: {
+ width: constants.DEVICE_WIDTH * 0.8,
+ alignSelf: "center",
+ top: 20,
+ },
+ btnChecked: {
+ width: constants.DEVICE_WIDTH * 0.6,
+ alignSelf: "center",
+ marginTop: 20,
+ },
 });

src/routes/main/index.tsx

@@ -3,10 +3,12 @@ import CommunityCreate from "../../pages/main/CommunityCreate"
 import CommunityList from "../../pages/main/CommunityList"
 import DetailCommunity from "../../pages/main/DetailCommunity"
 import CreateEvent from "../../pages/main/CreateEvent"
+import EventDetail from "../../pages/main/EventDetail"
 
 export default createStackNavigator({
  CommunityList,
  CommunityCreate,
  DetailCommunity,
  CreateEvent,
+ EventDetail,
 })