<file_sep>import React, { Component } from "react";
import { Container,Content,Button,Header,Left, Body,Title,Icon, List, ListItem, Switch, Separator, Right } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";

class Help extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>
        <View style={styles.headerView}>
        <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="arrow-back"
                  style={styles.back}
                />
              </Button>
              <View style={styles.empty}/>
              <Image
            style={styles.image} 
            source={require("../../../assets/netflixHeader.png")}/>
        </View>
        <Content style={styles.content}>
           <View style={styles.firstView}><Text style={styles.firstText}>Find Help Online</Text></View>
            <List style={styles.list}>
            <ListItem icon>
            <Left>
                <Icon name="ios-exit-outline"  style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Help Center</Text>
              </Body>
            </ListItem>
            <ListItem icon>
            <Left>
                <Icon name="ios-card"  style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Update Payment Method</Text>
              </Body>
            </ListItem>
            <ListItem icon>
            <Left>
                <Icon name="printer" type="MaterialCommunityIcons" style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Request a Titler</Text>
              </Body>
            </ListItem>
            <ListItem icon>
            <Left>
                <Icon name="lock" type="MaterialIcons"  style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Update Password</Text>
              </Body>
            </ListItem>
            <ListItem icon>
            <Left>
                <Icon name="cancel" type="MaterialCommunityIcons"  style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Cancel Account</Text>
              </Body>
            </ListItem>
            <ListItem icon>
            <Left>
                <Icon name="tools" type="Entypo"  style={styles.blue}/>
              </Left>
              <Body>
                <Text style={styles.blue}>Fix a connection issue</Text>
              </Body>
            </ListItem>
            </List>

            <View style={styles.lastView}>
                <Text style={styles.firstText}>Contact</Text>
                <Text style={styles.firstText}>Teleflix Customer Service</Text>
                <Text style={styles.smallText}>We'll connect the call for free using your internet connection.</Text>
                <View><Button iconLeft dark>
                <Icon name='ios-call' />
                <Text style={styles.buttonText}>Call</Text>
                 </Button></View>
            </View>
        
        </Content>
      </Container>
    );
  }
}
export default Help;
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Right,Icon } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";
import Benifit from "./Benifit";

class Step1Content extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
    this.state={
        selected:3
    }
  }

  choosePackage(n){
      this.setState({
          selected:n
      })
  }
  render() {
    return (
        <Container>

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content contentContainerStyle={styles.contContent}>
           <View style={styles.contentView}>
           <Text>Step 1 of 3</Text>
           <Text style={styles.mainBold}>Choose a plan that's right for you</Text>
           <Text>Downgrade or upgrade at any time</Text>
           <View style={styles.contentEmpty}/>
           <View style={styles.packageView}>
            <TouchableWithoutFeedback onPress={()=>this.choosePackage(1)}>
                <View style={[styles.package,this.state.selected===1?styles.selected:styles.notSelected]}>
                    <Text style={styles.packageText}>Basic</Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={()=>this.choosePackage(2)}>
                <View style={[styles.package,this.state.selected===2?styles.selected:styles.notSelected]}>
                    <Text style={styles.packageText}>Standard</Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={()=>this.choosePackage(3)}>
                <View style={[styles.package,this.state.selected===3?styles.selected:styles.notSelected]}>
                    <Text style={styles.packageText}>Premium</Text>
                </View>
            </TouchableWithoutFeedback>
           </View>
           
                <Text style={styles.centerText}>Monthly price after free month ends on 07/07/2018</Text>
                <View style={styles.contentEmpty}/>
                <Benifit icon={false} first="Rs. 500" second="Rs. 650" third="Rs. 800" selected={this.state.selected}/>
                <View style={styles.contentEmpty}/>
                <Text style={styles.centerText}>HD available</Text>
                <View style={styles.contentEmpty}/>
                <Benifit icon={true} first="cross" second="check" third="check" selected={this.state.selected}/>
                <View style={styles.contentEmpty}/>
                <Text style={styles.centerText}> Ultra HD available</Text>
                <View style={styles.contentEmpty}/>
                <Benifit icon={true} first="cross" second="cross" third="check" selected={this.state.selected}/>
                <View style={styles.contentEmpty}/>
                <Text style={styles.centerText}> Screens you can watch at the same time</Text>
                <View style={styles.contentEmpty}/>
                <Benifit icon={false} first="1" second="3" third="5" selected={this.state.selected}/>
                <View style={styles.contentEmpty}/>
                <Text style={styles.centerText}>Cancel at any time and first month free</Text>
                <View style={styles.contentEmpty}/>
                <Benifit icon={true} first="check" second="check" third="check" selected={this.state.selected}/>
                <View style={styles.contentEmpty}/>
                <Button style={styles.contentButton} onPress={()=>this.props.navigation.navigate("Step2Main",{plan:this.state.selected})}>
                <Text style={styles.mainButtonText}>Continue</Text>
            </Button>
           </View>
           
         
        </Content>
      </Container>
    );
  }
}
export default Step1Content;
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Right,Icon, Input,Form,Item,Label } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";
import firebase from 'react-native-firebase';

class Step2Content extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
    this.state = {
        email:"",
        password:"",
        error:"Enter email and password"
      };
    
  }

  validatePassword=(password)=>{
      if (this.state.password.length < 8){
          this.state.error="Password shouuld be minimum 8 characters long"; 
      }
      else{
          this.state.error="";
      }
      this.setState({password:password});
  }
  validateEmail=(email)=>{
      if (!this.state.email.includes('@')){
          this.state.error="Email should contain @"
      }
      else{
          this.state.error=""
      }
      this.setState({email:email}); 
      
  }
  createAccount=()=>{
      if(this.state.error=="" && this.state.password.length > 0 && this.state.email.length > 0){
    firebase.auth().createUserAndRetrieveDataWithEmailAndPassword(this.state.email, this.state.password)
      .then(u => {
        this.props.navigation.navigate("Step3Main",{uid:u.user._user.uid,plan:this.props.navigation.state.params.plan})
      })
      .catch(err =>{
          this.setState({
                 error : err.message
          })
      })
    }
  }

  componentDidMount() {
  }
  render() {
    return (
        <Container>

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content contentContainerStyle={styles.cont2Content}>
           <View style={styles.content2View}>
           <Text>Step 2 of 3</Text>
           <View style={styles.contentEmpty}/>
           <Text style={styles.mainBold}>Sign up to start your free month.</Text>
           <View style={styles.contentEmpty}/>
           <Text>Just two more steps and you are finished!</Text>
           <Text>We hate paperwork, too.</Text>
           <View style={styles.contentEmpty}/>
           <Text style={styles.bold}>Create your account</Text>
           <View style={styles.contentEmpty}/>
           <Form>
            <Item regular>
            <Input placeholder="Email" keyboardType="email-address" onChangeText={(email)=>{ this.validateEmail(email)}}/>
            </Item>
            <Item regular>
            <Input placeholder="Password" secureTextEntry onChangeText={(password)=>{this.validatePassword(password)}}/>
            </Item>
            </Form>
            <Text style={styles.errorText}>{this.state.error}</Text>
            <View style={styles.contentEmpty}/>
            <Button style={styles.contentButton} onPress={this.createAccount}>
                <Text style={styles.mainButtonText}>Continue</Text>
            </Button>
           </View>
           
         
        </Content>
      </Container>
    );
  }
}
export default Step2Content;
<file_sep>import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Button,
  Icon,
  Right,
  Left,
  Body
} from "native-base";


class BasicTab extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <Container>
        <Header hasTabs>
          <Left>
          <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title> Netflix </Title>
          </Body>
          <Right >
          <Button transparent>
              <Icon name='search' />
            </Button>
            <Button transparent>
              <Icon name='md-more' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

export default BasicTab;

// export default createMaterialTopTabNavigator({
//   Series: TabOne,
//   Movies: TabTwo,
// });




<file_sep>import React from "react";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator,TabNavigator } from "react-navigation";
import {
  Container,
  Header,
  Title,
  Button,
  Icon,
  Tabs,
  Tab,
  Right,
  Left,
  Body,
} from "native-base";
import {View, StatusBar, YellowBox} from "react-native";
import BasicTab from "./screens/tab/basicTab";
import TabOne from "./screens/tab/tabOne";
import TabTwo from "./screens/tab/tabTwo";
import Detail from "./screens/tab/detailScreen";
import Episodes from "./screens/tab/episodes";
import VideoPlayer from "./screens/tab/video";
import SideBar from "./screens/sidebar";
import Register from "./screens/LoginScreens/Register";
import Login from "./screens/LoginScreens/Login";
import Setting from "./screens/Settings/setting";
import Notification from "./screens/Notifications/Notification";
import MyList from "./screens/MyList/MyList";
import Account from "./screens/Account/Account";
import Users from "./screens/Account/Users";
import Search from "./screens/search/Search";
import Help from "./screens/Help/Help";
import Download from "./screens/Downloads/download";
import Step1Main from "./screens/SignUp/Step1Main";
import Step1Content from "./screens/SignUp/Step1Content";
import Step2Main from "./screens/SignUp/Step2Main";
import Step2Content from "./screens/SignUp/Step2Content";
import Step3Main from "./screens/SignUp/Step3Main";
import Step3Content from "./screens/SignUp/Step3Content";

YellowBox.ignoreWarnings(["Warning: isMounted( ... ) is deprecated"]);

const TabHome = TabNavigator({
  Series:{screen:TabOne,navigationOptions: {  tabBarLabel: 'Series'  }},
  Movies:{screen:TabTwo,navigationOptions: {  tabBarLabel: 'Movies'  }}
},
{
  swipeEnabled:true,
  lazy:false,
  navigationOptions:({navigation})=> ({
    title:'Teleflix',
    headerLeft:(
      <View style={{flex:1,flexDirection:'row'}}>
      <Button
              transparent
              onPress={() => navigation.navigate("DrawerOpen")}
            >
              <Icon name="menu" style={{color:'white'}}/>
            </Button>
          </View>
    ),
    headerRight:(
      <View style={{flex:1,flexDirection:'row'}}>
      <Button  transparent onPress={() => navigation.navigate("Search")}>
              <Icon name="search" style={{color:'white'}}/>
            </Button>
            <Button transparent>
              <Icon name="md-more" style={{color:'white'}}/>
            </Button>
            </View>      
    ),
    headerStyle:{
      backgroundColor:'#2B2C30'
    },
    headerTitleStyle: {
      color: '#C14748',
    },
  }),
  tabBarOptions: {
      style:{
        backgroundColor:'#2B2C30'
      }
      
    }
  

}
);


const AppNavigator = StackNavigator(
  {
    // Drawer: { screen: Drawer },
    Register:{screen:Register, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step1Main:{screen:Step1Main, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step1Content:{screen:Step1Content, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step2Main:{screen:Step2Main, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step2Content:{screen:Step2Content, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step3Main:{screen:Step3Main, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Step3Content:{screen:Step3Content, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
   
    Login:{screen:Login, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    Help:{screen:Help},
    TabHome: { screen: TabHome},
    Search: {screen: Search},
    MyList:{screen:MyList},
    Account:{screen:Account},
    Users:{screen:Users},
    Notification: {screen: Notification},
    Download:{screen:Download},
    Detail: {screen: Detail},
    Episodes: {screen:Episodes},
    VideoPlayer: {screen:VideoPlayer, navigationOptions:({navigation})=>({
      drawerLockMode:"locked-closed"
    })},
    

    },
  {
    initialRouteName: "Register",
    // headerMode: "none"
  }
);
const Drawer = DrawerNavigator(
  {
    App: { screen: AppNavigator },
    Setting: {screen: Setting},
    Notification: {screen: Notification},
    MyList:{screen:MyList},
    Account:{screen:Account},
    Download:{screen:Download}
    

  },
  {
    initialRouteName: "App",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

export default () =>
  <Root>
  <StatusBar backgroundColor='#2B2C30' barStyle='light-content' />
    <Drawer />
  </Root>;
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Right,Icon } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text,} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";

class Step3Main extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content contentContainerStyle={styles.mainContent}>
           <View style={styles.main3View}>
            <Icon name="lock-outline" type="MaterialCommunityIcons" style={styles.tick}/>
            <View style={styles.mainEmpty}/>
            <Text>Step 3 of 3</Text>
            <Text style={styles.mainBold}>Set up your Payment</Text>
            <View style={styles.mainEmpty}/>
            <Text >Cancel before 07/07/18 if you dont want to be charged.</Text>
            <View style={styles.contentEmpty}/>
            <Text >As a reminder we will remind you 3 days before. </Text>
            <View style={styles.contentEmpty}/>
            <Text >No Commitments. Cancel online at any time.</Text>
            <View style={styles.mainEmpty}/>
            <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate("Step3Content",{uid:this.props.navigation.state.params.uid,plan:this.props.navigation.state.params.plan})}>
            <View style={styles.main3Button}>
            <Text>Credit or Debit Card</Text>
            <Icon name="navigate-next" type="MaterialIcons"/>
            </View>
            </TouchableWithoutFeedback>
           </View>
         
        </Content>
      </Container>
    );
  }
}
export default Step3Main;
<file_sep>import React, { Component } from "react";
import styles from "./styles";
import {View,Text} from "react-native";
import {Icon} from "native-base"

class Benifit extends Component{
    constructor(props){
        super(props);
      }

    render(){
        return(
            <View>
            {!this.props.icon &&(
            <View style={styles.benifitView}>
                <Text style={[styles.benifitText,this.props.selected==1?styles.selectedText:styles.notSelectedText]}>{this.props.first}</Text>
                <Text style={styles.benifitText}>|</Text>
                <Text style={[styles.benifitText,this.props.selected==2?styles.selectedText:styles.notSelectedText]}>{this.props.second}</Text>
                <Text style={styles.benifitText}>|</Text>
                <Text style={[styles.benifitText,this.props.selected==3?styles.selectedText:styles.notSelectedText]}>{this.props.third}</Text>
            </View>)}
            {this.props.icon &&(
            <View style={styles.benifitView}>
                <Icon style={[styles.benifitText,this.props.selected==1?styles.selectedText:styles.notSelectedText]} type="Entypo" name={this.props.first}/>
                <Text style={styles.benifitText}>|</Text>
                <Icon style={[styles.benifitText,this.props.selected==2?styles.selectedText:styles.notSelectedText]} type="Entypo" name={this.props.second}/>
                <Text style={styles.benifitText}>|</Text>
                <Icon style={[styles.benifitText,this.props.selected==3?styles.selectedText:styles.notSelectedText]} type="Entypo" name={this.props.third}/>
            </View>
            )}
            </View>

        )
    }
}
export default Benifit;

<file_sep>export default {
  series: [
    {
      name: "Narcos",
      image: require("../../../assets/narcos.jpg"),
      rating: 4,
      commments: 279,
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco",
      genre: "crime drama",
      seasons: [
        {
          no: 1,
          image: require("../../../assets/narcosS01.jpg"),
          episodes: [
            {
              no: 1,
              title: "Descenso",
              time: "47:56",
              subtitle: "vost-english"
            },
            {
              no: 2,
              title: "The Sword of <NAME>",
              time: "49:26",
              subtitle: "vost-english"
            },
            {
                no: 3,
                title: "The Men of Always",
                time: "43:59",
                subtitle: "vost-english"
            },
            {
                no: 4,
                title: "The Palace in Flames",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 5,
                title: "There Will Be a Future",
                time: "41:32",
                subtitle: "vost-english"
              },
              {
                no: 6,
                title: "Explosivos",
                time: "47:23",
                subtitle: "vost-english"
              },
              {
                no: 7,
                title: "You Will Cry Tears of Blood",
                time: "46:56",
                subtitle: "vost-english"
              },
              {
                no: 8,
                title: "La Gran Mentira",
                time: "43:26",
                subtitle: "vost-english"
              },
              {
                no: 9,
                title: "La Catedral",
                time: "42:16",
                subtitle: "vost-spanish"
              },
              {
                no: 10,
                title: "Despegue",
                time: "42:16",
                subtitle: "vost-spanish"
              },
          ]
        },
        {
          no: 2,
          image: require("../../../assets/narcosS02.jpg"),
          episodes: [
            {
              no: 1,
              title: "Descenso",
              time: "47:56",
              subtitle: "vost-english"
            },
            {
              no: 2,
              title: "The Sword of <NAME>",
              time: "49:26",
              subtitle: "vost-english"
            },
            {
                no: 3,
                title: "The Men of Always",
                time: "43:59",
                subtitle: "vost-english"
            },
            {
                no: 4,
                title: "The Palace in Flames",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 5,
                title: "There Will Be a Future",
                time: "41:32",
                subtitle: "vost-english"
              },
              {
                no: 6,
                title: "Explosivos",
                time: "47:23",
                subtitle: "vost-english"
              },
              {
                no: 7,
                title: "You Will Cry Tears of Blood",
                time: "46:56",
                subtitle: "vost-english"
              },
              {
                no: 8,
                title: "La Gr<NAME>",
                time: "43:26",
                subtitle: "vost-english"
              },
              {
                no: 9,
                title: "La Catedral",
                time: "42:16",
                subtitle: "vost-spanish"
              },
              {
                no: 10,
                title: "Despegue",
                time: "42:16",
                subtitle: "vost-spanish"
              },
          ]
        },
        {
          no: 3,
          image: require("../../../assets/narcosS03.jpg"),
          episodes: [
            {
              no: 1,
              title: "Descenso",
              time: "47:56",
              subtitle: "vost-english"
            },
            {
              no: 2,
              title: "The Sword of <NAME>",
              time: "49:26",
              subtitle: "vost-english"
            },
            {
                no: 3,
                title: "The Men of Always",
                time: "43:59",
                subtitle: "vost-english"
            },
            {
                no: 4,
                title: "The Palace in Flames",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 5,
                title: "There Will Be a Future",
                time: "41:32",
                subtitle: "vost-english"
              },
              {
                no: 6,
                title: "Explosivos",
                time: "47:23",
                subtitle: "vost-english"
              },
              {
                no: 7,
                title: "You Will Cry Tears of Blood",
                time: "46:56",
                subtitle: "vost-english"
              },
              {
                no: 8,
                title: "<NAME>",
                time: "43:26",
                subtitle: "vost-english"
              },
              {
                no: 9,
                title: "La Catedral",
                time: "42:16",
                subtitle: "vost-spanish"
              },
              {
                no: 10,
                title: "Despegue",
                time: "42:16",
                subtitle: "vost-spanish"
              },
          ]
        },
        {
          no: 4,
          image: require("../../../assets/narcosS04.jpg"),
          episodes: [
            {
              no: 1,
              title: "Descenso",
              time: "47:56",
              subtitle: "vost-english"
            },
            {
              no: 2,
              title: "The Sword of <NAME>",
              time: "49:26",
              subtitle: "vost-english"
            },
            {
                no: 3,
                title: "The Men of Always",
                time: "43:59",
                subtitle: "vost-english"
            },
            {
                no: 4,
                title: "The Palace in Flames",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 5,
                title: "There Will Be a Future",
                time: "41:32",
                subtitle: "vost-english"
              },
              {
                no: 6,
                title: "Explosivos",
                time: "47:23",
                subtitle: "vost-english"
              },
              {
                no: 7,
                title: "You Will Cry Tears of Blood",
                time: "46:56",
                subtitle: "vost-english"
              },
              {
                no: 8,
                title: "La Gran Mentira",
                time: "43:26",
                subtitle: "vost-english"
              },
              {
                no: 9,
                title: "La Catedral",
                time: "42:16",
                subtitle: "vost-spanish"
              },
              {
                no: 10,
                title: "Despegue",
                time: "42:16",
                subtitle: "vost-spanish"
              },
          ]
        }
      ]
    },


    {
        name: "<NAME>",
        image: require("../../../assets/breaking.jpg"),
        rating: 3,
        commments: 260,
        description: "<NAME>, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse.",
        genre: "crime drama",
        seasons: [
          {
            no: 1,
            image: require("../../../assets/breakingS01.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "<NAME>",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 2,
            image: require("../../../assets/breakingS02.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 3,
            image: require("../../../assets/breakingS03.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 4,
            image: require("../../../assets/breakingS04.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 5,
            image: require("../../../assets/breakingS01.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          }
        ]
    },


      {
        name: "<NAME>",
        image: require("../../../assets/thrones.jpg"),
        rating: 5,
        commments: 764,
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco",
        genre: "crime drama",
        seasons: [
          {
            no: 1,
            image: require("../../../assets/narcosS01.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of Simón Bolivar",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 2,
            image: require("../../../assets/narcosS02.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 3,
            image: require("../../../assets/narcosS03.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "<NAME>",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "<NAME>",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 4,
            image: require("../../../assets/narcosS04.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          }
        ]
      },


      {
        name: "Narcos",
        image: require("../../../assets/narcos.jpg"),
        rating: 4,
        commments: 279,
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco",
        genre: "crime drama",
        seasons: [
          {
            no: 1,
            image: require("../../../assets/narcosS01.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 2,
            image: require("../../../assets/narcosS02.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 3,
            image: require("../../../assets/narcosS03.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 4,
            image: require("../../../assets/narcosS04.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          }
        ]
      },


      {
        name: "Narcos",
        image: require("../../../assets/narcos.jpg"),
        rating: 4,
        commments: 279,
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco",
        genre: "crime drama",
        seasons: [
          {
            no: 1,
            image: require("../../../assets/narcosS01.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of Simón Bolivar",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 2,
            image: require("../../../assets/narcosS02.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 3,
            image: require("../../../assets/narcosS03.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "<NAME>",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          },
          {
            no: 4,
            image: require("../../../assets/narcosS04.jpg"),
            episodes: [
              {
                no: 1,
                title: "Descenso",
                time: "47:56",
                subtitle: "vost-english"
              },
              {
                no: 2,
                title: "The Sword of <NAME>",
                time: "49:26",
                subtitle: "vost-english"
              },
              {
                  no: 3,
                  title: "The Men of Always",
                  time: "43:59",
                  subtitle: "vost-english"
              },
              {
                  no: 4,
                  title: "The Palace in Flames",
                  time: "47:56",
                  subtitle: "vost-english"
                },
                {
                  no: 5,
                  title: "There Will Be a Future",
                  time: "41:32",
                  subtitle: "vost-english"
                },
                {
                  no: 6,
                  title: "Explosivos",
                  time: "47:23",
                  subtitle: "vost-english"
                },
                {
                  no: 7,
                  title: "You Will Cry Tears of Blood",
                  time: "46:56",
                  subtitle: "vost-english"
                },
                {
                  no: 8,
                  title: "La Gran Mentira",
                  time: "43:26",
                  subtitle: "vost-english"
                },
                {
                  no: 9,
                  title: "La Catedral",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
                {
                  no: 10,
                  title: "Despegue",
                  time: "42:16",
                  subtitle: "vost-spanish"
                },
            ]
          }
        ]
      }
  ]
};
<file_sep>import React, { Component } from "react";
import { Container,Content,Button,Header,Left, Body,Title,Icon, List, ListItem, Switch, Separator, Right } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";

const datas=[
    {
     head:'Breaking Bad S01E01',
     date:'May 30',
     img:require('../../../assets/breaking.jpg')   
    },
    {
     head:'Breaking Bad S02E02',
     date:'May 30',
     img:require('../../../assets/breakingS02.jpg')   
    },
    {
     head:'Breaking Bad S03E03',
     date:'May 30',
     img:require('../../../assets/breakingS03.jpg')   
    },
]
class Download extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>
        <Header androidStatusBarColor="#121212" style={styles.header}>
          <Left>
          <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="arrow-back"
                  style={styles.back}
                />
              </Button>
          </Left>
         
          <Body>
            <Title style={styles.headerTitle}>My Downloads</Title>
          </Body>
          <Right/>
        </Header>
        <Content style={styles.content}>
            <List noBorder
            listBorderColor="#1A1A1A"
            listItemPadding={5}
            dataArray={datas}
            renderRow={data=><ListItem style={styles.listItem} onPress={() => this.props.navigation.navigate("VideoPlayer")}>
            <View style={styles.imageView}>
            <Image
            style={styles.image}
            source={data.img}/>
            </View>
            <View style={styles.pad}/>
            <View style={styles.allText}>
            <Text style={styles.head}>{data.head}</Text>
            <Text style={styles.date}>{data.date}</Text>
            </View>
            </ListItem>}/>
            
        
        </Content>
      </Container>
    );
  }
}
export default Download;
<file_sep>const React = require('react-native')
const { Dimensions }=React
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get('window').width;


const ratio=deviceWidth/200
export default {
  image:{
      height:(deviceWidth/6)*54,
      width:deviceWidth/6,
  },
  registerContent:{
      backgroundColor:'black'
  },
  headerText:{
      color:'black',
      fontSize:17,
      fontWeight:'bold'
  },
  header:{
      backgroundColor:'white'
  },
  content:{
      backgroundColor:'#1A1A1A'
  },
  contentImage:{
      height:deviceHeight/1.5,
      width:deviceWidth
  },
  textView:{
      flex:1,
      justifyContent:'flex-start',
      alignItems:'center'
  },
  firstText:{
        fontSize:22,
        color:'white',
        fontWeight:'bold',
        paddingBottom:deviceHeight/100
  },
  secondText:{
    fontSize:17,
    color:'white',
    paddingBottom:deviceHeight/70
},
   buttonText:{
    fontSize:16,
    color:'white',
    paddingTop:deviceHeight/200,
    paddingLeft:deviceWidth/50,
    paddingRight:deviceWidth/50,
    paddingBottom:deviceHeight/200
   },
   button:{
       backgroundColor:'#FF6D2D',
       
   },
   tabs:{
       paddingTop:deviceHeight/20,
       flex:1,
       flexDirection:'row',
       justifyContent:'space-evenly',
       width:deviceWidth
   },
   icons:{
       fontSize:70,
       color:"white"
   }, 
   thirdTextView:{
        flex:1,
        alignItems:'center',
        paddingTop: deviceHeight/20,
        width: deviceWidth*(2/3),
        marginBottom:deviceHeight/20
   },
   cancelImage:{
       width:deviceWidth,
       height:deviceHeight/2.5,
       paddingTop:deviceHeight/10
   },
   selectedIcon:{
       borderBottomColor:"#FF6D2D",
       borderBottomWidth: 3
   },

   //login
   headerArrangement:{flex:1,
    flexDirection:'row',
    alignItems:'center'},
    back:{ color: "white", 
    fontSize: 19 },
   headerLogin:{
       backgroundColor:"#121212",
   },
   empty:{
       flex:2
   },
   loginHeaderText:{
    color:'white',
    fontSize:17,
    fontWeight:'bold'
},
    login:{
        flex:1,
        height:(deviceHeight-(deviceHeight/8)),
        justifyContent:'center',
        paddingLeft:deviceWidth/15,
        paddingRight:deviceWidth/15
    },
    inputLabel:{
        color:'white'
    },
    input:{
        color:'white'
    },
    loginButton:{
        marginTop:deviceHeight/30,
        backgroundColor:'#FF6D2D',
        width:deviceWidth-(deviceHeight/15),
        flex:0.07,
        justifyContent:'center',
        alignItems:'center',
        height:deviceHeight/10
    },
    loginBottomText:{
        fontSize:17,
        fontWeight:'600',
        color:'white',
        paddingTop:deviceHeight/70
    }
  
  
};
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Right,Icon } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text,} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";

class Register extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>
        {/* <Header androidStatusBarColor="white" style={styles.header}>
          <Left>
          <Image
            style={styles.image} 
            resizeMode={'contain'}
            source={require("../../../assets/netflixHeader.png")}/>
          </Left>
         
          <Right>
            <Button transparent onPress={() => this.props.navigation.navigate("Login")}>
              <Text style={styles.headerText}>LOG IN</Text>
            </Button>
            <Button transparent onPress={() => this.props.navigation.navigate("Help")}>
              <Text style={styles.headerText}>HELP</Text>
            </Button>
          </Right>
        </Header> */}

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content style={styles.registerContent}>
            <Image style={styles.contentImage} source={require("../../../assets/RegisterBackground.jpg")}/>
            <View style={styles.textView}>
                <Text style={styles.firstText}>See what's next</Text>
                <Text style={styles.secondText}>Watch anywhere. Cancel at Any Time</Text>
                <View>
                    <Button style={styles.button} onPress={()=>this.props.navigation.navigate("Step1Main")}>
                        <Text style={styles.buttonText}>Join Free For A Month</Text>
                    </Button>
                </View>
                <View style={styles.tabs}>
                <View style={styles.selectedIcon}><Icon name="ios-exit" style={styles.icons}/></View>
                <Icon name="ios-tablet-landscape-outline" style={styles.icons}/>
                <Icon name="ios-pricetags-outline" style={styles.icons}/>
            
                </View>
                <View style={styles.thirdTextView}>
                    <Text style={styles.firstText}>
                        If you decide Teleflix isn't for you no problem. No commitment. Cancel anytime.
                    </Text>
                </View>
                {/* <Image
                style={styles.cancelImage}
                source={require("../../../assets/cancel.png")}/> */}
            </View>
            
                
         
        </Content>
      </Container>
    );
  }
}
export default Register;
<file_sep>const React = require('react-native')
const { Dimensions }=React
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get('window').width;


export default {
    headerView:{
        backgroundColor:'white',
        flex:0.1,
        flexDirection:'row',
        width:deviceWidth
    },
    back:{ 
        color: "black", 
        fontSize: 19 
    },
   

    headerTitle:{
        color:'white',
        fontSize:17,
        fontWeight:'bold'
    },
    content:{
        flex:0.9,
        backgroundColor:'white'
    },
    firstView:{
        flex:1,
        flexDirection:'row',
        justifyContent:'center'
    },
    firstText:{
        fontWeight:'bold',
        color:'black',
        fontSize:18
    },
    list:{
        marginTop:deviceHeight/15,
        marginRight:deviceWidth/8,
    },

    image:{
        height:(deviceWidth/23),
        width:deviceWidth/6,
        marginTop:deviceHeight/40
    },

    empty:{
        flex:0.43
    },

    imageView:{
        flex:0.3
    },
    pad:{
        flex:0.04
    },
    blue:{
        color:'#0071EB',
        
    },
    lastView:{
        marginTop:deviceHeight/8.5,
        flex:1,
        alignItems:'center',
        marginLeft:deviceWidth/7,
        marginRight:deviceWidth/7        
    },
    smallText:{
        marginTop:deviceHeight/60,
        marginBottom:deviceHeight/60,
        textAlign:'center'
    },
    buttonText:{
        color:'white',
        fontSize:19,
        marginLeft:deviceWidth/20,
        marginRight:deviceWidth/20
    }
  
  
};
<file_sep>import React, { Component } from "react";
import { Image } from "react-native";
import {
  Content,
  Text,
  List,
  ListItem,
  Icon,
  Container,
  Left,
  Header
} from "native-base";
import styles from "./style";

const drawerCover = require("../../../assets/netflix.png");
const drawerImage = require("../../../assets/logo-kitchen-sink.png");
const sidebars = [
  {
    name: "Account",
    route: "Account",
    icon: "md-person",
  },
  {
    name: "My List",
    route: "MyList",
    icon: "md-basket",
  },
  {
    name: "Notifications",
    route: "Notification",
    icon: "md-notifications",
  },
  {
    name: "My Downloads",
    route: "Download",
    icon: "md-download",
  },
  {
    name: "Settings",
    route: "Setting",
    icon: "md-settings",
  },
  {
    name: "Logout",
    route: "Logout",
    icon: "md-power",
  },
];

class SideBar extends Component {
  static navigationOptions = {
    drawerLabel: () => null,
    header:false
    }

  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4
    };
  }

  render() {
    return (
      <Container>    
      <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />

          <List
            dataArray={sidebars}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

export default SideBar;
<file_sep>import React, { Component } from "react";
import {
  Animated,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  View,
  RefreshControl,
  Dimensions,
  TouchableOpacity
} from "react-native";
import {
  ActionSheet,
  Button,
  Icon,
  Container,
  Header,
  Left,
  Right,
  List,
  ListItem
} from "native-base";
import styles1 from "./styles";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

const HEADER_MAX_HEIGHT = deviceHeight / 2.2;
const HEADER_MIN_HEIGHT = deviceHeight / 10;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

const eps = [
  {
    name: "Breaking 1",
    no: 1
  },
  {
    name: "Breaking 1",
    no: 2
  },
  {
    name: "Green Light",
    no: 3
  },
  {
    name: "BLue Light",
    no: 4
  },
  {
    name: "The Fly",
    no: 5
  },
  {
    name: "The Escape",
    no: 7
  },
  {
    name: "The Escape",
    no: 8
  },
  {
    name: "The Escape",
    no: 9
  },
  {
    name: "The Escape",
    no: 10
  },
  {
    name: "The Escape",
    no: 11
  },
  {
    name: "The Escape",
    no: 12
  },
  {
    name: "The Escape",
    no: 13
  },
  {
    name: "The Escape",
    no: 14
  },
  {
    name: "The Escape",
    no: 15
  }
];

const EPISODE_BUTTONS =["Download","View Details","Cancel"]
const SCREEN_BUTTONS=["Download All","View Series Details","Cancel"]
const CANCEL_INDEX = 2


export default class App extends Component {
  static navigationOptions = {
    header: null
  };
  constructor(props) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(
        // iOS has negative initial scroll value because content inset...
        Platform.OS === "ios" ? -HEADER_MAX_HEIGHT : 0
      ),
      refreshing: false,
      clicked:false
    };
  }

  showActionSheet(BUTTONS,head){
    return(ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
        title: head
      },
      buttonIndex => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }))
 }

  _renderScrollViewContent() {
    const data = Array.from({ length: 30 });
    return (
      <View style={styles.scrollViewContent}>
        <List
          listItemPadding={0}
          dataArray={eps}
          renderRow={ep =>
            <ListItem first  button={true} style={styles1.listItem} onPress={() => this.props.navigation.navigate("VideoPlayer")}>
              <View style={styles1.episodeView}>
                <View style={styles1.episodeWatched} />

                <View style={styles1.episodeDetailView}>
                  <View style={styles1.episodeNameView}>
                    <Text style={styles1.episodeTitle}>
                      {"    " + ep.name}
                    </Text>
                    <Text>
                      {"  "}S01E{ep.no}
                    </Text>
                  </View>
                  <View style={styles1.episodeNameView}>
                    <Text>
                      {"    "}
                    </Text>
                    <Icon name="ios-time-outline" style={styles1.episodeIcon} />
                    <Text>
                      {"  "}49:56{"          "}
                    </Text>
                    <Icon
                      name="ios-closed-captioning"
                      style={styles1.episodeIcon}
                    />
                    <Text>
                      {"  "}vost-english
                    </Text>
                  </View>
                </View>

                <View style={styles1.episodeMore} >
                  <TouchableOpacity onPress={()=>this.showActionSheet(EPISODE_BUTTONS,"Episode Options")}>
                  <Icon name="md-more" />
                   </TouchableOpacity>                   
                </View>
              </View>
            </ListItem>}
        />
      </View>
    );
  }



  render() {
    // Because of content inset the scroll value will be negative on iOS so bring
    // it back to 0.
    const scrollY = Animated.add(
      this.state.scrollY,
      Platform.OS === "ios" ? HEADER_MAX_HEIGHT : 0
    );
    const headerTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -HEADER_SCROLL_DISTANCE],
      extrapolate: "clamp"
    });

    const imageOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: "clamp"
    });
    const imageTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 100],
      extrapolate: "clamp"
    });
    const viewTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 90],
      extrapolate: "clamp"
    });
    const viewScale = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, 0],
      extrapolate: "clamp"
    });
    const titleScale = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 1],
      extrapolate: "clamp"
    });
    const titleTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, -4],
      extrapolate: "clamp"
    });
    const textOpacity=scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 1],
    })

    return (
      <View style={styles.fill}>
        <StatusBar
          translucent
          barStyle="light-content"
          backgroundColor="#C14748"
        />
        <Animated.ScrollView
          style={styles.fill}
          scrollEventThrottle={1}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true }
          )}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={() => {
                this.setState({ refreshing: true });
                setTimeout(() => this.setState({ refreshing: false }), 1000);
              }}
              // Android offset for RefreshControl
              progressViewOffset={HEADER_MAX_HEIGHT}
            />
          }
          // iOS offset for RefreshControl
          contentInset={{
            top: HEADER_MAX_HEIGHT
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT
          }}
        >
          {this._renderScrollViewContent()}
        </Animated.ScrollView>
        <Animated.View
          pointerEvents="none"
          style={[
            styles.header,
            { transform: [{ translateY: headerTranslate }] }
          ]}
        >
          <Animated.Image
            style={[
              styles.backgroundImage,
              {
                opacity: imageOpacity,
                transform: [{ translateY: imageTranslate }]
              }
            ]}
            source={require("../../../assets/narcos.jpg")}
          />
          <Animated.View
            style={[
              styles1.buttonAlign,
              {
                transform: [
                  { translateY: viewTranslate },
                  { scale: viewScale }
                ],
                zIndex: 7
              }
            ]}
          >
            <Button rounded style={styles1.button}  onPress={() => this.setState({ clicked: !this.state.clicked })}>
              <Icon style={styles1.play} name="play" />
            </Button>
          </Animated.View>
          <Animated.View
            style={[
              styles1.trailer,
              {
                transform: [{ translateY: viewTranslate }, { scale: viewScale }]
              }
            ]}
          >
            <Text style={styles1.trailerText}>GreenLight S01 | E03</Text>
          </Animated.View>
        </Animated.View>
        <Animated.View
          style={[
            styles.bar,
            {
              transform: [{ scale: titleScale }, { translateY: titleTranslate }]
            }
          ]}
        >
          <View style={styles1.headerView}>
            <View style={styles1.headerBeginView}>
              <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="arrow-back"
                  style={styles1.headerIcon}
                />
              </Button>
              <Button transparent><Animated.Text style={[styles1.headerText,{opacity:textOpacity}]}>{this.props.navigation.state.params.name}</Animated.Text></Button>
            </View>
            <View
              style={styles1.headerEndView}
            >
            
              <Button transparent onPress={() => this.props.navigation.navigate("Search")}>
                <Icon name="search" style={styles1.headerIcon} />
              </Button>
              <Button transparent onPress={()=>this.showActionSheet(SCREEN_BUTTONS,"Options")}>
                <Icon name="md-more" style={styles1.headerIcon} />
              </Button>
            </View>
          </View>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  content: {
    flex: 1
  },
  header: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: "#C14748",
    overflow: "hidden",
    height: HEADER_MAX_HEIGHT
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    width: null,
    height: HEADER_MAX_HEIGHT * (9 / 10),
    resizeMode: "cover"
  },
  bar: {
    backgroundColor: "transparent",
    marginTop: Platform.OS === "ios" ? 28 : 38,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0
  },
  title: {
    color: "white",
    fontSize: 18
  },
  scrollViewContent: {
    // iOS uses content inset, which acts like padding.
    paddingTop: Platform.OS !== "ios" ? HEADER_MAX_HEIGHT : 0,
    marginBottom:deviceHeight/25
  },
  row: {
    height: 40,
    margin: 16,
    backgroundColor: "#D3D3D3",
    alignItems: "center",
    justifyContent: "center"
  }
});
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Right,Icon } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text,} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";

class Step2Main extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content contentContainerStyle={styles.mainContent}>
           <View style={styles.mainView}>
            <Icon name="cellphone-iphone" type="MaterialCommunityIcons" style={styles.tick}/>
            <View style={styles.mainEmpty}/>
            <Text>Step 2 of 3</Text>
            <Text style={styles.mainBold}>Create your account</Text>
            <View style={styles.mainEmpty}/>
            <Text>Use your email and create a password to watch teleflix on any device at any time.</Text>
            <View style={styles.mainEmpty}/>
            <Button style={styles.mainButton} onPress={()=>this.props.navigation.navigate("Step2Content",{plan:this.props.navigation.state.params.plan})}>
                <Text style={styles.mainButtonText}>Continue</Text>
            </Button>
           </View>
         
        </Content>
      </Container>
    );
  }
}
export default Step2Main;
<file_sep>import React, { Component } from "react";
import { Container,Content,Button, Left,Icon, Input,Form,Item,ListItem,Body,CheckBox } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";
import WhiteHeader from "../Headers/WhiteHeader";


class Step3Content extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>

        <WhiteHeader login={()=>this.props.navigation.navigate("Login")} help={()=>this.props.navigation.navigate("Help")}/>


        <Content contentContainerStyle={styles.cont2Content}>
           <View style={styles.contentView}>
           <Text>Step 3 of 3</Text>
           <View style={styles.contentEmpty}/>
           <Text style={styles.mainBold}>Set up your credit or debit card.</Text>
           <View style={styles.contentEmpty}/>
           <View style={styles.creditCard}>
                <Icon name="cc-visa" type="FontAwesome"/>
                <Text>{'   '}</Text>
                <Icon name="cc-mastercard" type="FontAwesome"/>
           </View>
           <View style={styles.contentEmpty}/>
           <Form>
            <Item regular>
            <Input placeholder="First Name"/>
            </Item>
            <Item regular>
            <Input placeholder="Last Name"/>
            </Item>
            <Item regular>
            <Input placeholder="Card Number" keyboardType="phone-pad"/>
            </Item>
            <Item regular>
            <Input placeholder="Expiry Date (MM/YY)"/>
            </Item>
            <Item regular>
            <Input placeholder="Security code (CVV)" keyboardType="phone-pad"/>
            </Item>
            </Form>
            <View style={styles.contentEmpty}/>
            <Text>You will be charged Rs. 800 after your free month ends.</Text>
            <View style={styles.contentEmpty}/>
            <View style={styles.checkBox}>
            <CheckBox checked={true} />
              <Text>{'    '}I am over 18 and I agree to the terms of use and privacy policy.</Text>
              </View>
          <View style={styles.contentEmpty}/>
            <Button style={styles.contentButton} onPress={()=>this.props.navigation.navigate("Login")}>
                <Text style={styles.mainButtonText}>Start Membership</Text>
            </Button>
           </View>
           
         
        </Content>
      </Container>
    );
  }
}
export default Step3Content;
<file_sep>import React, { Component } from "react";
import { Container,Content,Button,Header,Left, Body,Title,Icon, List, ListItem, Switch, Separator, Right } from "native-base";
import {Image,View,TouchableWithoutFeedback,Text} from "react-native";
import styles from "./styles";

const datas=[
    {title:'New Arrival',
     head:'Breaking Bad Season 1',
     date:'May 30',
     img:require('../../../assets/breaking.jpg')   
    },
    {title:'New Arrival',
     head:'Breaking Bad Season 2',
     date:'May 30',
     img:require('../../../assets/breakingS02.jpg')   
    },
    {title:'New Arrival',
     head:'Breaking Bad Season 3',
     date:'May 30',
     img:require('../../../assets/breakingS03.jpg')   
    },
    {title:'New Arrival',
     head:'Breaking Bad Season 4',
     date:'May 30',
     img:require('../../../assets/breakingS04.jpg')   
    },
    {title:'New Arrival',
     head:'Breaking Bad Season 5',
     date:'May 30',
     img:require('../../../assets/breakingS01.jpg')   
    },
    {title:'New Arrival',
     head:'Narcos Season 1',
     date:'May 30',
     img:require('../../../assets/narcosS01.jpg')   
    },
    {title:'New Arrival',
     head:'Narcos Season 2',
     date:'May 30',
     img:require('../../../assets/narcosS02.jpg')   
    },
    {title:'New Arrival',
     head:'Game of thrones Season 1',
     date:'May 30',
     img:require('../../../assets/thronesS01.jpg')   
    },
    {title:'New Arrival',
     head:'Game of thrones Season 2',
     date:'May 30',
     img:require('../../../assets/thrones.jpg')   
    },
]
class Notification extends Component {
  static navigationOptions={
    header:null
  }

  constructor(props){
    super(props);
  }
  render() {
    return (
        <Container>
        <Header androidStatusBarColor="#121212" style={styles.header}>
        <Left>
          <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="md-arrow-back"
                  style={styles.back}
                />
              </Button>
              </Left>
          <Body  style={{flex:1}}>
            <Title style={styles.headerTitle}>Notificaiton</Title>
          </Body>

          <Right/>
        </Header>
        <Content style={styles.content}>
            <List noBorder
            listBorderColor="#1A1A1A"
            listItemPadding={5}
            dataArray={datas}
            renderRow={data=><ListItem style={styles.listItem} onPress={() => this.props.navigation.navigate("Episodes",{image:1,name:'Narcos'})}>
            <View style={styles.imageView}>
            <Image
            style={styles.image}
            source={data.img}/>
            </View>
            <View style={styles.pad}/>
            <View style={styles.allText}>
            <Text style={styles.title}>{data.title}</Text>
            <Text style={styles.head}>{data.head}</Text>
            <Text style={styles.date}>{data.date}</Text>
            </View>
            </ListItem>}/>
            
        
        </Content>
      </Container>
    );
  }
}
export default Notification;
<file_sep>import React, { Component } from "react";
import {
  Animated,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  View,
  RefreshControl,
  Dimensions,
  ImageBackground,
  TouchableWithoutFeedback
} from "react-native";
import {
  Button,
  Icon,
  Card,
  CardItem,
  List,
  ListItem,
  ActionSheet
} from "native-base";
import styles1 from "./styles";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

const HEADER_MAX_HEIGHT = deviceHeight * (2 / 3);
const HEADER_MIN_HEIGHT = deviceHeight / 10;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

const SEASONS_BUTTONS = ["Download", "View Details", "Cancel"]
const SCREEN_BUTTONS = ["Add to your list", "View Series Details", "Cancel"]
const CANCEL_INDEX = 2

const datas = [
  {
    season: 1,
    episodes: "7/13",
    img: require("../../../assets/narcosS02.jpg")
  },
  {
    season: 2,
    episodes: "7/13",
    img: require("../../../assets/narcosS01.jpg")
  },
  {
    season: 3,
    episodes: "7/13",
    img: require("../../../assets/breakingS01.jpg")
  },
  {
    season: 4,
    episodes: "7/13",
    img: require("../../../assets/breakingS02.jpg")
  },
  {
    season: 5,
    episodes: "7/13",
    img: require("../../../assets/breakingS03.jpg")
  },
  {
    season: 6,
    episodes: "7/13",
    img: require("../../../assets/thronesS01.jpg")
  }
]



export default class App extends Component {
  static navigationOptions = {
    header: null
  };
  constructor(props) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(
        // iOS has negative initial scroll value because content inset...
        Platform.OS === "ios" ? -HEADER_MAX_HEIGHT : 0
      ),
      refreshing: false
    };
    this.arr = [
      require("../../../assets/breaking.jpg"),
      require("../../../assets/narcos.jpg"),
      require("../../../assets/stranger.jpg"),
      require("../../../assets/thrones.jpg")
    ];
  }

  showActionSheet(BUTTONS, head) {
    return (ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
        title: head
      },
      buttonIndex => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }))
  }



  _renderScrollViewContent() {
    return (
      <View style={[styles.scrollViewContent, styles1.scroll]}>
        {datas.map((e, i) => {
          return (
            <View key={i}>
              <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate("Episodes", { image: 1, name: 'Narcos' })}>
                <Card style={styles1.seasonCard}>
                  <CardItem cardBody>
                    <ImageBackground
                      source={e.img}
                      style={styles1.cardImage}
                    >
                      <Text style={styles1.cardImageText}>Season {e.season}</Text>
                    </ImageBackground>
                  </CardItem>
                  <View style={styles1.cardFoot}>
                    <View style={{ flex: 0.8, justifyContent: 'center', alignItems: 'flex-start' }}>
                      <Text style={styles1.episodesRemaining}>{e.episodes}{' '}Episodes</Text>
                    </View>
                    <View style={{ flex: 0.2 }} />
                    <View style={{ flex: 0.3, justifyContent: "center", alignItems: 'flex-start' }}>
                      <Button transparent onPress={() => this.showActionSheet(SEASONS_BUTTONS, "Season Options")}>
                        <Icon name="md-more" style={{ fontSize: 13 }} />
                      </Button>
                    </View>
                  </View>

                </Card>
              </TouchableWithoutFeedback>
            </View>
          )
        })}


      </View>
    );
  }

  render() {
    // Because of content inset the scroll value will be negative on iOS so bring
    // it back to 0.
    const AnimatedTouchableFeedback = Animated.createAnimatedComponent(TouchableWithoutFeedback);
    const scrollY = Animated.add(
      this.state.scrollY,
      Platform.OS === "ios" ? HEADER_MAX_HEIGHT : 0
    );
    const headerTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -HEADER_SCROLL_DISTANCE],
      extrapolate: "clamp"
    });

    const imageOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: "clamp"
    });
    const imageTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 100],
      extrapolate: "clamp"
    });
    const viewTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 550],
      extrapolate: "extend"
    });
    const viewScale = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2],
      outputRange: [0, 0.7],
      extrapolate: "clamp"
    });
    const detailTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 200],
      extrapolate: "clamp"
    });
    const titleScale = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 1],
      extrapolate: "clamp"
    });
    const titleTranslate = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, -4],
      extrapolate: "clamp"
    });
    const textOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 1],
    })

    return (
      <View style={styles.fill}>
        <StatusBar
          translucent
          barStyle="light-content"
          backgroundColor="#C14748"
        />
        <Animated.ScrollView
          style={styles.fill}
          scrollEventThrottle={1}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true }
          )}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={() => {
                this.setState({ refreshing: true });
                setTimeout(() => this.setState({ refreshing: false }), 1000);
              }}
              // Android offset for RefreshControl
              progressViewOffset={HEADER_MAX_HEIGHT}
            />
          }
          // iOS offset for RefreshControl
          contentInset={{
            top: HEADER_MAX_HEIGHT
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT
          }}
        >
          {this._renderScrollViewContent()}
        </Animated.ScrollView>
        <Animated.View
          pointerEvents="none"
          style={[
            styles.header,
            { transform: [{ translateY: headerTranslate }] }
          ]}
        >
          <Animated.Image
            style={[
              styles.backgroundImage,
              {
                opacity: imageOpacity,
                transform: [{ translateY: imageTranslate }]
              }
            ]}
            source={this.arr[this.props.navigation.state.params.image]}
          />
          <TouchableWithoutFeedback onPress={() => alert('Add payment')}>
            <Animated.View
              style={[
                styles1.buttonAlign,
                {
                  transform: [
                    { translateY: viewTranslate },
                  ],
                  zIndex: 6
                }
              ]}

            >

              <Button rounded style={styles1.button} onPress={() => alert('Add payment')}>
                <Icon style={styles1.play} name="play" onPress={() => alert('Add payment')} />
              </Button>

            </Animated.View>
          </TouchableWithoutFeedback>
          <Animated.View
            style={[
              styles1.trailer,
              {
                transform: [{ translateY: viewTranslate }]
              }
            ]}
          >
            <Text style={styles1.trailerText}>Watch trailer season 1</Text>
          </Animated.View>
          <Animated.View
            style={[
              styles1.remaining,
              {
                transform: [{ translateY: detailTranslate }]
              }
            ]}
          >
            <View style={styles1.ratings}>
              <View style={styles1.rating}>
                <Icon name="ios-star" style={styles1.background} />
                <Icon name="ios-star" style={styles1.background} />
                <Icon name="ios-star" style={styles1.background} />
                <Icon name="ios-star" style={styles1.background} />
                <Icon name="ios-star" style={styles1.background} />
              </View>
              <Text style={styles1.rateText}>{'  '}5.0/5</Text>
              <View style={styles1.rate} />
              <View style={styles1.comment}>
                <Icon name="md-chatbubbles" style={styles1.background} />
                <Text style={styles1.rateText}>{'   '}279</Text>
              </View>
            </View>
            <View style={styles1.show}>
              <View>
                <Text style={styles1.showName}>
                  {this.props.navigation.state.params.name}
                </Text>
              </View>
              <View>
                <Text style={styles1.showGenre}>Crime, Drama</Text>
              </View>
            </View>
            <View style={styles1.description}>
              <Text style={styles1.rateText}>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Text>
            </View>
          </Animated.View>
        </Animated.View>
        <Animated.View
          style={[
            styles.bar,
            {
              transform: [{ scale: titleScale }, { translateY: titleTranslate }]
            }
          ]}
        >
          <View style={styles1.headerView}>
            <View style={styles1.headerBeginView}>
              <Button
                transparent
                onPress={() => this.props.navigation.goBack()}
              >
                <Icon
                  name="arrow-back"
                  style={styles1.headerIcon}
                />
              </Button>
              <Button transparent><Animated.Text style={[styles1.headerText, { opacity: textOpacity }]}>{this.props.navigation.state.params.name}</Animated.Text></Button>
            </View>
            <View
              style={styles1.headerEndView}
            >

              <Button transparent onPress={() => this.props.navigation.navigate("Search")}>
                <Icon name="search" style={styles1.headerIcon} />
              </Button>
              <Button transparent onPress={() => this.showActionSheet(SCREEN_BUTTONS, "Options")}>
                <Icon name="md-more" style={styles1.headerIcon} />
              </Button>
            </View>
          </View>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  content: {
    flex: 1
  },
  header: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: "#C14748",
    overflow: "hidden",
    height: HEADER_MAX_HEIGHT
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    width: null,
    height: HEADER_MAX_HEIGHT * (7 / 10),
    resizeMode: "cover"
  },
  bar: {
    backgroundColor: "transparent",
    marginTop: Platform.OS === "ios" ? 28 : 38,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0
  },
  title: {
    color: "white",
    fontSize: 18
  },
  scrollViewContent: {
    // iOS uses content inset, which acts like padding.
    paddingTop: Platform.OS !== "ios" ? HEADER_MAX_HEIGHT : 0
  },
  row: {
    height: 40,
    margin: 16,
    backgroundColor: "#D3D3D3",
    alignItems: "center",
    justifyContent: "center"
  }
});
