Sketch Prototyping Tutorial to BuilderX

DetailView.js

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
  Text
} from "react-native";
import Svg, { Path } from "react-native-svg";
import BarsNavigationBar from "../components/BarsNavigationBar";
import MiscCast from "../components/MiscCast";

function DetailView(props) {
  return (
    <View style={styles.root}>
      <View style={styles.headerStack}>
        <View style={styles.header}>
          <ImageBackground
            source={require("../assets/images/4c05748932ff3d6158e251179079fae061917944.png")}
            resizeMode="cover"
            style={styles.backgroundImage}
            imageStyle={styles.backgroundImage_imageStyle}
          >
            <View style={styles.artwork}>
              <View style={styles.mask1}>
                <Image
                  source={require("../assets/images/095bb45c4577aeedf581cc91b120324a68a32797.png")}
                  resizeMode="cover"
                  style={styles.mask}
                ></Image>
              </View>
            </View>
          </ImageBackground>
        </View>
        <TouchableOpacity style={styles.button}>
          <View style={styles.button1}>
            <View style={styles.playRow}>
              <View style={styles.play}></View>
              <Text style={styles.watchNow}>Watch Now</Text>
            </View>
          </View>
        </TouchableOpacity>
        <View style={styles.name}>
          <View style={styles.rating1Row}>
            <View style={styles.rating1}>
              <View style={styles.star1Row}>
                <Svg viewBox="-0 -0 69.99999999999999 15" style={styles.star1}>
                  <Path
                    strokeWidth={0}
                    fill="rgba(255,206,78,1)"
                    fillOpacity={1}
                    strokeOpacity={1}
                    d="M8.46 0.32 L10.17 5.31 L15.52 5.37 L15.81 6.22 L11.51 9.36 L13.11 14.38 L12.37 14.91 L8.00 11.87 L3.63 14.91 L2.89 14.38 L4.49 9.36 L0.19 6.22 L0.48 5.37 L5.83 5.31 L7.54 0.32 L8.46 0.32 Z M26.46 0.32 L28.17 5.31 L33.52 5.37 L33.81 6.22 L29.51 9.36 L31.11 14.38 L30.37 14.91 L26.00 11.87 L21.63 14.91 L20.89 14.38 L22.49 9.36 L18.19 6.22 L18.48 5.37 L23.83 5.31 L25.54 0.32 L26.46 0.32 Z M44.46 0.32 L46.17 5.31 L51.52 5.37 L51.81 6.22 L47.51 9.36 L49.11 14.38 L48.37 14.91 L44.00 11.87 L39.63 14.91 L38.89 14.38 L40.49 9.36 L36.19 6.22 L36.48 5.37 L41.83 5.31 L43.54 0.32 L44.46 0.32 Z M62.46 0.32 L64.17 5.31 L69.52 5.37 L69.81 6.22 L65.51 9.36 L67.11 14.38 L66.37 14.91 L62.00 11.87 L57.63 14.91 L56.89 14.38 L58.49 9.36 L54.19 6.22 L54.48 5.37 L59.83 5.31 L61.54 0.32 L62.46 0.32 Z"
                  ></Path>
                </Svg>
                <Svg viewBox="-0 -0 16 15" style={styles.star2}>
                  <Path
                    strokeWidth={0}
                    fill="rgba(153,153,153,1)"
                    fillOpacity={1}
                    strokeOpacity={1}
                    d="M8.46 0.32 L10.17 5.31 L15.52 5.37 C15.98 5.37 16.17 5.95 15.81 6.22 L11.51 9.36 L13.11 14.38 C13.24 14.82 12.74 15.17 12.37 14.91 L8.00 11.87 L3.63 14.91 C3.26 15.17 2.76 14.82 2.89 14.38 L4.49 9.36 L0.19 6.22 C-0.17 5.95 0.02 5.37 0.48 5.37 L5.83 5.31 L7.54 0.32 C7.69 -0.11 8.31 -0.11 8.46 0.32 Z"
                  ></Path>
                </Svg>
              </View>
            </View>
            <Text style={styles.style}>(387)</Text>
          </View>
          <Text style={styles.title}>The Day We Left Earth</Text>
        </View>
        <View style={styles.navigationBar}>
          <ImageBackground
            style={styles.rectangle}
            imageStyle={styles.rectangle_imageStyle}
            source={require("../assets/images/Gradient_gweJFGm.png")}
          >
            <BarsNavigationBar
              style={styles.barsNavigationBar}
            ></BarsNavigationBar>
          </ImageBackground>
        </View>
      </View>
      <View style={styles.overview}>
        <View style={styles.mRow}>
          <Text style={styles.m}>2018 94m</Text>
          <Svg viewBox="-0 -0 27 7.999999999999999" style={styles.path}>
            <Path
              strokeWidth={0}
              fill="rgba(255,255,255,1)"
              fillOpacity={1}
              strokeOpacity={1}
              d="M12.04 0.00 L12.04 5.40 L13.60 5.40 L13.60 6.89 L12.04 6.89 L12.04 8.00 L8.84 8.00 L8.84 6.74 L0.88 6.74 L0.13 5.40 L7.65 0.00 Z M8.88 1.76 L4.26 5.00 L8.88 5.00 Z M17.36 0.00 L17.36 2.94 L22.35 0.00 L26.52 0.00 L20.00 3.67 L27.00 8.00 L22.65 8.00 L17.40 4.68 L17.40 8.00 L14.11 8.00 L14.11 0.00 Z"
            ></Path>
          </Svg>
          <Svg viewBox="-0 -0 22.99999999999994 10" style={styles.hdr}>
            <Path
              strokeWidth={0}
              fill="rgba(255,255,255,1)"
              fillOpacity={1}
              strokeOpacity={1}
              d="M5.00 5.66 L1.77 5.66 L1.77 10.00 L0.00 10.00 L0.00 0.00 L1.77 0.00 L1.77 4.11 L5.00 4.11 Z M6.99 10.00 L6.99 0.00 L10.61 0.00 C10.61 0.00 13.03 0.48 13.84 1.45 C14.65 2.41 15.06 3.60 15.06 5.02 C15.06 6.43 14.64 7.62 13.80 8.57 C12.97 9.52 10.22 10.00 10.22 10.00 Z M8.81 8.53 L10.29 8.53 C10.29 8.53 11.75 8.22 12.31 7.62 C12.86 7.01 13.13 6.11 13.13 4.92 C13.13 3.94 12.89 3.11 12.41 2.44 C11.93 1.76 10.50 1.42 10.50 1.42 L8.81 1.42 Z M17.00 5.89 L17.00 4.45 L19.26 4.45 C19.26 4.45 20.38 4.31 20.69 4.04 C21.00 3.76 21.16 3.39 21.16 2.91 C21.16 2.47 21.00 2.11 20.70 1.84 C20.39 1.57 19.41 1.44 19.41 1.44 L16.00 1.44 L16.00 0.00 L19.55 0.00 C19.55 0.00 21.61 0.27 22.16 0.82 C22.72 1.36 23.00 2.07 23.00 2.93 C23.00 4.21 21.23 5.58 21.23 5.58 L22.95 10.00 L21.08 10.00 L19.55 5.89 Z"
            ></Path>
          </Svg>
        </View>
        <Text style={styles.whenNasaDiscovers}>
          When NASA discovers a duplicate Earth in our Solar System, an
          ambitious young scientist and an accomplished composer must team up to
          save, not one, but two worlds.
        </Text>
      </View>
      <View style={styles.trailer}>
        <Text style={styles.trailer1}>TRAILER</Text>
        <View style={styles.thumbnail1Stack}>
          <TouchableOpacity style={styles.thumbnail1}>
            <Image
              source={require("../assets/images/ba6f22c990ab64715209d41836dc51ed91bfa3fa.png")}
              resizeMode="cover"
              style={styles.thumbnail}
            ></Image>
          </TouchableOpacity>
          <View style={styles.play1}>
            <View style={styles.ovalStack}>
              <Svg viewBox="-0 -0 47 47" style={styles.oval}>
                <Path
                  strokeWidth={0}
                  fill="rgba(255,255,255,0.300000011920929)"
                  fillOpacity={1}
                  strokeOpacity={1}
                  d="M23.50 47.00 C36.48 47.00 47.00 36.48 47.00 23.50 C47.00 10.52 36.48 0.00 23.50 0.00 C10.52 0.00 0.00 10.52 0.00 23.50 C0.00 36.48 10.52 47.00 23.50 47.00 Z"
                ></Path>
              </Svg>
              <Svg viewBox="-0 -0 15 17" style={styles.play2}>
                <Path
                  strokeWidth={0}
                  fill="rgba(0,0,0,1)"
                  fillOpacity={1}
                  strokeOpacity={1}
                  d="M2.00 0.18 L14.32 7.30 C14.96 7.67 15.19 8.51 14.83 9.18 C14.71 9.40 14.53 9.58 14.32 9.70 L2.00 16.82 C1.36 17.20 0.54 16.96 0.17 16.30 C0.06 16.09 0.00 15.86 0.00 15.62 L0.00 1.38 C0.00 0.62 0.60 0.00 1.34 0.00 C1.57 0.00 1.80 0.06 2.00 0.18 Z"
                ></Path>
              </Svg>
            </View>
          </View>
        </View>
        <Text style={styles.style1}>2:26</Text>
      </View>
      <TouchableOpacity style={styles.cast}>
        <Text style={styles.cast1}>CAST</Text>
        <View style={styles.miscCastRow}>
          <MiscCast style={styles.miscCast}></MiscCast>
          <MiscCast style={styles.miscCast1}></MiscCast>
          <MiscCast style={styles.miscCast2}></MiscCast>
          <MiscCast style={styles.miscCast3}></MiscCast>
          <MiscCast style={styles.miscCast4}></MiscCast>
        </View>
      </TouchableOpacity>
      <View style={styles.ratings}>
        <Text style={styles.ratingsReviews}>RATINGS &amp; REVIEWS</Text>
        <View style={styles.blockRow}>
          <View style={styles.block}>
            <View style={styles.myNewFavoriteMoviRow}>
              <Text style={styles.myNewFavoriteMovi}>
                My new favorite movie!
              </Text>
              <View style={styles.rating}>
                <View style={styles.starCopyRow}>
                  <Svg
                    viewBox="-0 -0 53.99999999999999 11"
                    style={styles.starCopy}
                  >
                    <Path
                      strokeWidth={0}
                      fill="rgba(255,206,78,1)"
                      fillOpacity={1}
                      strokeOpacity={1}
                      d="M48.34 0.24 L49.63 3.89 L53.64 3.94 L53.85 4.56 L50.63 6.87 L51.83 10.55 L51.28 10.93 L48.00 8.70 L44.72 10.93 L44.17 10.55 L45.37 6.86 L42.15 4.56 L42.36 3.94 L46.37 3.89 L47.66 0.24 L48.34 0.24 Z M34.34 0.24 L35.63 3.89 L39.64 3.94 L39.85 4.56 L36.63 6.87 L37.83 10.55 L37.28 10.93 L34.00 8.70 L30.72 10.93 L30.17 10.55 L31.37 6.86 L28.15 4.56 L28.36 3.94 L32.37 3.89 L33.66 0.24 L34.34 0.24 Z M20.34 0.24 L21.63 3.89 L25.64 3.94 L25.85 4.56 L22.63 6.87 L23.83 10.55 L23.28 10.93 L20.00 8.70 L16.72 10.93 L16.17 10.55 L17.37 6.86 L14.15 4.56 L14.36 3.94 L18.37 3.89 L19.66 0.24 L20.34 0.24 Z M6.34 0.24 L7.63 3.89 L11.64 3.94 L11.85 4.56 L8.63 6.87 L9.83 10.55 L9.28 10.93 L6.00 8.70 L2.72 10.93 L2.17 10.55 L3.37 6.86 L0.15 4.56 L0.36 3.94 L4.37 3.89 L5.66 0.24 L6.34 0.24 Z"
                    ></Path>
                  </Svg>
                  <Svg viewBox="-0 -0 12 11" style={styles.star}>
                    <Path
                      strokeWidth={0}
                      fill="rgba(153,153,153,1)"
                      fillOpacity={1}
                      strokeOpacity={1}
                      d="M6.34 0.24 L7.63 3.89 L11.64 3.94 C11.99 3.94 12.13 4.36 11.85 4.56 L8.63 6.87 L9.83 10.55 C9.93 10.87 9.56 11.13 9.28 10.93 L6.00 8.70 L2.72 10.93 C2.44 11.13 2.07 10.86 2.17 10.55 L3.37 6.86 L0.15 4.56 C-0.13 4.36 0.01 3.94 0.36 3.94 L4.37 3.89 L5.66 0.24 C5.77 -0.08 6.23 -0.08 6.34 0.24 Z"
                    ></Path>
                  </Svg>
                </View>
              </View>
            </View>
            <View style={styles.stephanie92Row}>
              <Text style={styles.stephanie92}>@stephanie92</Text>
              <Text style={styles.jan16}>Jan 16</Text>
            </View>
            <Text style={styles.iDidntCatchThis}>
              I didn’t catch this movie when it was in theaters but after seeing
              it for the first time I can’t believe I waited so long. The story
              grabbed me from the start and the special effects totally blew me
              away. I loved it so much that I haven’t seen a movie yet that
              lived up to this one — definitely a sign of a great film.
            </Text>
          </View>
          <View style={styles.block1}></View>
        </View>
      </View>
      <View style={styles.information}>
        <Text style={styles.information1}>INFORMATION</Text>
        <View style={styles.studioGenreReleaseRow}>
          <Text style={styles.studioGenreRelease}>
            Studio{"\n"}Genre{"\n"}Released{"\n"}Runtime{"\n"}Format
          </Text>
          <Text style={styles.vixbonaStudiosScie}>
            Vixbona Studios{"\n"}Science Fiction{"\n"}2018{"\n"}1:34:29{"\n"}
            Widescreen, 4K HDR support
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,1)"
  },
  header: {
    top: 0,
    left: 0,
    width: 375,
    height: 416,
    position: "absolute",
    opacity: 1
  },
  backgroundImage: {
    width: 375,
    height: 416,
    backgroundColor: "transparent"
  },
  backgroundImage_imageStyle: {
    opacity: 1
  },
  artwork: {
    width: 140,
    height: 200,
    opacity: 1,
    marginTop: 96,
    marginLeft: 118
  },
  mask1: {
    width: 140,
    height: 200,
    backgroundColor: "transparent",
    opacity: 1,
    shadowOffset: {
      height: 2,
      width: 0
    },
    shadowColor: "rgba(0,0,0,0.3)",
    shadowOpacity: 1,
    shadowRadius: 9,
    overflow: "hidden"
  },
  mask: {
    backgroundColor: "transparent",
    opacity: 1,
    shadowOffset: {
      height: 2,
      width: 0
    },
    shadowColor: "rgba(0,0,0,0.3)",
    shadowOpacity: 1,
    shadowRadius: 9,
    overflow: "hidden",
    flex: 1
  },
  button: {
    top: 406,
    left: 16,
    width: 343,
    height: 48,
    position: "absolute",
    opacity: 1
  },
  button1: {
    width: 343,
    height: 48,
    backgroundColor: "rgba(255,255,255,1)",
    borderRadius: 9,
    flexDirection: "row"
  },
  play: {
    width: 18,
    height: 18,
    backgroundColor: "rgba(0,0,0,1)",
    opacity: 1,
    transform: [
      {
        rotate: "45deg"
      }
    ],
    marginTop: 2
  },
  watchNow: {
    backgroundColor: "transparent",
    color: "rgba(0,0,0,1)",
    opacity: 1,
    fontSize: 17,
    letterSpacing: 0.42,
    marginLeft: 16
  },
  playRow: {
    height: 20,
    flexDirection: "row",
    flex: 1,
    marginRight: 113,
    marginLeft: 109,
    marginTop: 13
  },
  name: {
    top: 323,
    left: 32,
    width: 311,
    height: 55,
    position: "absolute",
    opacity: 1
  },
  rating1: {
    width: 88,
    height: 15,
    opacity: 1,
    flexDirection: "row",
    marginTop: 1
  },
  star1: {
    width: 70,
    height: 15,
    backgroundColor: "transparent",
    borderColor: "transparent"
  },
  star2: {
    width: 16,
    height: 15,
    backgroundColor: "transparent",
    borderColor: "transparent",
    marginLeft: 2
  },
  star1Row: {
    height: 15,
    flexDirection: "row",
    flex: 1
  },
  style: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 0.7,
    fontSize: 15,
    letterSpacing: 0.6,
    marginLeft: 8
  },
  rating1Row: {
    height: 16,
    flexDirection: "row",
    marginTop: 35,
    marginRight: 176
  },
  title: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 1,
    fontSize: 26,
    lineHeight: 30,
    flex: 1,
    marginBottom: 25,
    marginTop: -51
  },
  navigationBar: {
    top: 0,
    left: 0,
    width: 375,
    height: 88,
    position: "absolute",
    opacity: 1
  },
  rectangle: {
    width: 375,
    height: 88,
    backgroundColor: "transparent"
  },
  rectangle_imageStyle: {
    opacity: 1
  },
  barsNavigationBar: {
    width: 375,
    height: 88,
    backgroundColor: "transparent",
    opacity: 1
  },
  headerStack: {
    width: 375,
    height: 454,
    marginTop: -1
  },
  overview: {
    width: 311,
    height: 145,
    opacity: 1,
    marginTop: 28,
    marginLeft: 32
  },
  m: {
    width: 77,
    height: 20,
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 0.7,
    fontSize: 15
  },
  path: {
    width: 27,
    height: 8,
    backgroundColor: "transparent",
    borderColor: "transparent",
    marginLeft: 172,
    marginTop: 6
  },
  hdr: {
    width: 23,
    height: 10,
    backgroundColor: "transparent",
    borderColor: "transparent",
    marginLeft: 12,
    marginTop: 5
  },
  mRow: {
    height: 20,
    flexDirection: "row"
  },
  whenNasaDiscovers: {
    width: 311,
    height: 115,
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 1,
    fontSize: 17,
    letterSpacing: 0.42,
    marginTop: 10
  },
  trailer: {
    width: 163,
    height: 143,
    opacity: 1,
    marginTop: 25,
    marginLeft: 16
  },
  trailer1: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7)",
    opacity: 1,
    fontSize: 15,
    lineHeight: 14,
    letterSpacing: 0.5,
    marginLeft: 16
  },
  thumbnail1: {
    top: 0,
    left: 0,
    width: 163,
    height: 83,
    backgroundColor: "transparent",
    position: "absolute",
    opacity: 1
  },
  thumbnail: {
    backgroundColor: "transparent",
    opacity: 1,
    flex: 1
  },
  play1: {
    top: 18,
    left: 58,
    width: 47,
    height: 47,
    position: "absolute",
    opacity: 1
  },
  oval: {
    top: 0,
    left: 0,
    width: 47,
    height: 47,
    backgroundColor: "transparent",
    position: "absolute",
    borderColor: "transparent"
  },
  play2: {
    top: 15,
    left: 17,
    width: 15,
    height: 17,
    backgroundColor: "transparent",
    position: "absolute",
    borderColor: "transparent"
  },
  ovalStack: {
    width: 47,
    height: 47
  },
  thumbnail1Stack: {
    width: 163,
    height: 83,
    marginTop: 14
  },
  style1: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 0.7,
    fontSize: 15,
    letterSpacing: 0.6,
    marginTop: 12,
    marginLeft: 16
  },
  cast: {
    width: 384,
    height: 92,
    opacity: 1,
    marginTop: 26,
    marginLeft: 16
  },
  cast1: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7)",
    opacity: 1,
    fontSize: 15,
    lineHeight: 14,
    letterSpacing: 0.5,
    marginLeft: 16
  },
  miscCast: {
    width: 64,
    height: 64,
    backgroundColor: "transparent",
    opacity: 1
  },
  miscCast1: {
    width: 64,
    height: 64,
    backgroundColor: "transparent",
    opacity: 1,
    marginLeft: 16
  },
  miscCast2: {
    width: 64,
    height: 64,
    backgroundColor: "transparent",
    opacity: 1,
    marginLeft: 16
  },
  miscCast3: {
    width: 64,
    height: 64,
    backgroundColor: "transparent",
    opacity: 1,
    marginLeft: 16
  },
  miscCast4: {
    width: 64,
    height: 64,
    backgroundColor: "transparent",
    opacity: 1,
    marginLeft: 16
  },
  miscCastRow: {
    height: 64,
    flexDirection: "row",
    marginTop: 14
  },
  ratings: {
    width: 359,
    height: 265,
    opacity: 1,
    marginTop: 31,
    marginLeft: 16
  },
  ratingsReviews: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7)",
    opacity: 1,
    fontSize: 15,
    lineHeight: 14,
    letterSpacing: 0.5,
    marginLeft: 16
  },
  block: {
    width: 343,
    height: 236,
    backgroundColor: "rgba(255,255,255,0.25)",
    borderRadius: 9
  },
  myNewFavoriteMovi: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 1,
    fontSize: 15,
    letterSpacing: 0.6
  },
  rating: {
    width: 68,
    height: 11,
    opacity: 1,
    flexDirection: "row",
    marginLeft: 81,
    marginTop: 4
  },
  starCopy: {
    width: 54,
    height: 11,
    backgroundColor: "transparent",
    borderColor: "transparent"
  },
  star: {
    width: 12,
    height: 11,
    backgroundColor: "transparent",
    borderColor: "transparent",
    marginLeft: 2
  },
  starCopyRow: {
    height: 11,
    flexDirection: "row",
    flex: 1
  },
  myNewFavoriteMoviRow: {
    height: 15,
    flexDirection: "row",
    marginTop: 12,
    marginLeft: 16,
    marginRight: 16
  },
  stephanie92: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7000000000000001)",
    opacity: 1,
    fontSize: 15,
    letterSpacing: 0.6
  },
  jan16: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7000000000000001)",
    opacity: 1,
    fontSize: 15,
    letterSpacing: 0.6,
    textAlign: "right",
    marginLeft: 161
  },
  stephanie92Row: {
    height: 15,
    flexDirection: "row",
    marginTop: 7,
    marginLeft: 16,
    marginRight: 19
  },
  iDidntCatchThis: {
    width: 311,
    height: 160,
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 1,
    fontSize: 15,
    letterSpacing: 0.6,
    marginTop: 16,
    marginLeft: 16
  },
  block1: {
    width: 9,
    height: 236,
    backgroundColor: "rgba(255,255,255,0.25)",
    opacity: 1,
    borderTopLeftRadius: 9,
    borderBottomLeftRadius: 9,
    marginLeft: 10
  },
  blockRow: {
    height: 236,
    flexDirection: "row",
    marginTop: 15,
    marginRight: -3
  },
  information: {
    width: 293,
    height: 124,
    opacity: 1,
    marginTop: 31,
    marginLeft: 32
  },
  information1: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,0.7)",
    opacity: 1,
    fontSize: 15,
    lineHeight: 14,
    letterSpacing: 0.5
  },
  studioGenreRelease: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 0.7,
    fontSize: 15,
    letterSpacing: 0.6,
    textAlign: "right"
  },
  vixbonaStudiosScie: {
    backgroundColor: "transparent",
    color: "rgba(255,255,255,1)",
    opacity: 1,
    fontSize: 15,
    letterSpacing: 0.6,
    marginLeft: 10
  },
  studioGenreReleaseRow: {
    height: 75,
    flexDirection: "row",
    marginTop: 10,
    marginRight: 8
  }
});

export default DetailView;