text: 
  import React, { Fragment } from 'react';
  import { StyleSheet, Text, View, Image, RefreshControl, StatusBar, Pressable, TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback, Linking } from 'react-native';
  import { getHomePageData, getHistory, openAnyLink, currentVersion, installedVersion } from '../logic/data';
  import styles, { otherStyles } from '../styles';
  import { FlatList, ScrollView, TouchableHighlight } from 'react-native-gesture-handler';
  import TouchFeedback from '../components/TouchFeedback';
  import BouncePress from '../components/BouncePress';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import SeriesDetailsScreen from './SeriesDetails';
  import getStackItems, { getNavigator } from '../components/StackItems';
  import CustomButton from '../components/CustomButton';
  import { GlobalContext } from '../GlobalState';
  import SeriesList from '../components/SeriesList';
  import PagerView from 'react-native-pager-view';
  import LinearGradient from 'react-native-linear-gradient';
  
  
  const Stack = createStackNavigator();
  
  export default function HomeScreen(props){
      return getNavigator(Stack,Home,null);
  }
  
  
  function InnerShadow({reverse}){
      let colors = ["transparent","rgba(0, 0, 0, 0.5)"];
      if (reverse){
          colors.reverse();
      }
      return (
          <View
              style={{
                  position: "absolute",
                  width: "100%",
                  height: 16/3,
                  zIndex: 1,
                  top: !reverse ? null : 0,
                  bottom: reverse ? null : 0,
                  backgroundColor: "transparent",
              }}
          >
              <LinearGradient
                  colors={colors}
                  style={{
                      flex: 1,
                      width: "100%",
                      height: "100%",
                  }}    
              />
          </View>
      )
  }
  class Home extends React.Component {
      state = {
          homepageData:null,
          history:getHistory(),
          refreshing: true,
      };
      
      updateData(force=false){
          
          return getHomePageData(force).then((d)=>{
              this.setState({
                  homepageData:d,
              });
              return d;
          }).catch(err=>{
              
          })
      }
      componentDidMount() {
          this.updateData().then(d=>{
              this.setRefreshing(false);
          })
      }
  
      setRefreshing(v){
          this.setState({
              refreshing: v,
          });
      }
  
      onRefresh() {
          this.setRefreshing(true);
          var t = this;
          this.setState({
              history:getHistory(),
          });
          this.updateData(true).then(() => {
              t.setRefreshing(false);
          });
      }
      getTimeOfDayString(){
          let date = new Date();
          let hours = date.getHours();
          if (hours >= 20){
              return "Jó estét";
          } else if (hours >= 5 && hours <= 9){
              return "Jó reggelt";
          } else {
              return "Jó napot";
          }
      }
    
      render(){
          let data = this.state.homepageData;
          let history = this.state.history;
          var props = this.props;
          let {navigation} = props;
  
          return (
              <View style={[styles.screenCont]}>
                  <ScrollView style={styles.screenScroll}
                      contentContainerStyle={{
                          paddingTop: StatusBar.currentHeight,
                      }}
                      refreshControl={
                          <RefreshControl progressBackgroundColor={otherStyles.theme.refreshColor} colors={[otherStyles.colors.color]} refreshing={this.state.refreshing} onRefresh={()=>{this.onRefresh()}} />
                      }
                  >
                  {
                      data != null ?
                      <Fragment>
                          <View
                              style={{
                                  margin: 18.33,
                                  flexDirection: 'row',
                                  justifyContent: 'space-between',
                                  alignItems: 'center',
                              }}
                          >
                              <GlobalContext.Consumer>
                                  {({state, update}) => {
                                      return (
                                      <Fragment>
                                          <Text
                                              style={{
                                                  fontSize: 24.11,
                                                  color: "#fff",
                                                  fontWeight: 'bold',
                                              }}
                                          >
                                              {this.getTimeOfDayString()}
                                              {" "}
                                              <Text
                                                  style={{
                                                      color: "#FFA41B",
                                                  }}
                                              >
                                                  { state.user.username }
                                              </Text>
                                              {"!"}
                                          </Text>
                                          <Image source={{uri: state.user.avatar}}
                                              style={{
                                                  width: 33.33,
                                                  height: 33.33,
                                                  borderRadius: 33.33,
                                              }}
                                          />
                                      </Fragment>
                                      )
                                  }}
                              </GlobalContext.Consumer>
                          </View>
                          <View //highlighted
                          
                          >
                              <InnerShadow reverse={false} />
                              <InnerShadow reverse={true} />
                              <PagerView
                                  
                                  style={{
                                      width: "100%",
                                      aspectRatio: 1080/606,
                                  }}
                              >
                                  { data.spotlight.map((item, index)=>{
                                      return (
                                          <View
                                              key={item.url}
                                              style={{
                                                  flex:1,
                                                  width: "100%",
                                                  height: "100%",
                                              }}
                                          >
                                              <TouchableWithoutFeedback
                                                  style={{
                                                      flex: 1,
                                                      width: "100%",
                                                      height: "100%",
                                                  }}
                                                  onPress={()=>{
                                                      props.navigation.navigate("Details", {
                                                          series: item,
                                                      });
                                                  }}
                                              >
                                                  <View
                                                      style={{
                                                          flex: 1,
                                                          width: "100%",
                                                          height: "100%",
                                                      }}
                                                  >
                                                      <Image source={{uri:item.image}} 
                                                          style={{
                                                              flex: 1,
                                                              width: "100%",
                                                              height: "100%",
                                                          }}
                                                      />
                                                  </View>
                                              </TouchableWithoutFeedback>
                                          </View>
                                      )
                                  }) }
                              </PagerView>
                          </View>
                          {
                              currentVersion.number > installedVersion.number &&
                              <View
                                  style={{
                                      padding: 50/3,
                                      paddingBottom: 0,
                                  }}
                              >
                                  <View
                                      style={{
                                          flexDirection: "row",
                                          backgroundColor: "#393939",
                                          borderRadius: 10,
                                          padding: 27/3,
                                          paddingLeft: 10,
                                          alignItems: 'center',
                                      }}
                                  >
                                      <View style={{flex: 1}}>
                                          <Text
                                              style={{
                                                  fontSize: 12,
                                                  fontWeight: 'bold',
                                                  color: "#fff",
                                              }}
                                          >{`Frissítés elérhető\n${currentVersion.tag}`}</Text>
                                      </View>
                                      <CustomButton 
                                          title="Letöltés"
                                          style={[
                                              {
                                                  paddingHorizontal: 40/3,
                                                  paddingVertical: 20/3,
                                              }
                                          ]}
                                          onPress={()=>{
                                              props.navigation.navigate("Update");
                                          }}
                                      />
                                  </View>
                              </View>
                          }
                          {history.length > 2 && (
                              <SeriesList
                                  title={"Legutóbbi keresések"}
                                  items={history.map(e=>{
                                      return {
                                          url: e.url,
                                          title: e.item.title,
                                          image: e.item.image,
                                          originalTitle: e.item.originalTitle,
                                      };
                                  })}
                                  navigation={navigation}
                              />
                          )}
                          {data.categories.map(category=>{
                              return (
                                  <SeriesList
                                      key={category.title}
                                      title={category.title}
                                      items={category.data}
                                      navigation={navigation}
                                  />
                              );
                          })}
                          
                          <View style={styles.screenScrollBottom}></View>
                          </Fragment> : 
                          <View
                              style={{flex:1}}
                          >
                              
                          </View>
                  }
                  </ScrollView>
                  
              </View>
          );
              
          
      }
  }
  