HomePage done !

App.js

@@ -52,7 +52,7 @@ const AuthStack = () => (
 
 const App = () => {
   const [isLoading, setIsLoading] = useState(true);
-  const [isLogin, isSetLogin] = useState(false);
+  const [isLogin, isSetLogin] = useState(true);
 
   useEffect(() => {
     setTimeout(() => {

package.json

@@ -14,6 +14,8 @@
     "@react-navigation/drawer": "^5.11.5",
     "@react-navigation/native": "^5.9.0",
     "@react-navigation/stack": "^5.13.0",
+    "axios": "^0.21.1",
+    "lodash": "^4.17.20",
     "native-base": "^2.15.2",
     "react": "16.13.1",
     "react-native": "0.63.4",

src/api/http.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+export const API_KEY = '7f6d23e3badd3cfc444eb9749b616fbd';
+
+export const SERVICE_BASE_URL = 'https://api.themoviedb.org/3/';
+export const IMAGE_URL = 'https://image.tmdb.org/t/p/';
+
+export const HTTP = axios.create({
+  baseURL: SERVICE_BASE_URL,
+  headers: {'content-type': 'application/json'},
+});
+export const EXTERNAL = axios.create();
+
+function successHandler(response) {
+  if (response.data != null) {
+    return {
+      data: response.data,
+      error: response.data.error,
+      success: response.data.success,
+    };
+  } else {
+    return Promise.reject(false);
+  }
+}
+
+function errorHandler(error) {
+  if (error.response !== undefined) {
+    return Promise.reject(false);
+  }
+}
+
+HTTP.interceptors.request.use((config) => config);
+
+HTTP.interceptors.response.use(
+  (response) => successHandler(response),
+  (error) => errorHandler(error),
+);

src/api/index.js

@@ -0,0 +1,15 @@
+
+import { camelCase } from 'lodash';
+
+const requireModule = require.context("./resources", false, /\.js$/)
+const api = {}
+
+requireModule.keys().forEach(fileName => {
+  if (fileName === "./index.js") return
+  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ""))
+  api[moduleName] = {
+    ...requireModule(fileName).default,
+  }
+})
+
+export default api

src/api/resources/movie.js

@@ -0,0 +1,5 @@
+import {API_KEY, HTTP} from '../http'
+
+export default {
+  popular: (pageNumber) => HTTP.get(`movie/popular?api_key=${API_KEY}&language=tr-TR&page=${pageNumber}`),
+}

src/components/card-component.js

@@ -0,0 +1,196 @@
+import React from 'react';
+
+import {Dimensions, Image, StyleSheet, View} from 'react-native';
+import {Body, Button, Left, ListItem, Right, Text} from 'native-base';
+import {IMAGE_URL} from '../api/http';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+function CardComponent({value, navigation, routeName}) {
+  const renderAverageButtonItem = (averagePoint) => {
+    if (averagePoint >= 0 && averagePoint < 7)
+      return (
+        <View success style={[styles.buttonRankStyle, styles.ratingPointRed]}>
+          <Text
+            style={styles.buttonTitleRankStyle}
+            numberOfLines={1}
+            adjustsFontSizeToFit>
+            {averagePoint}
+          </Text>
+        </View>
+      );
+    else if (averagePoint >= 7 && averagePoint < 8)
+      return (
+        <View
+          success
+          style={[styles.buttonRankStyle, styles.ratingPointOrange]}>
+          <Text
+            style={styles.buttonTitleRankStyle}
+            numberOfLines={1}
+            adjustsFontSizeToFit>
+            {averagePoint}
+          </Text>
+        </View>
+      );
+    else if (averagePoint >= 8 && averagePoint < 8.5)
+      return (
+        <View
+          success
+          style={[styles.buttonRankStyle, styles.ratingPointLightGreen]}>
+          <Text
+            style={styles.buttonTitleRankStyle}
+            numberOfLines={1}
+            adjustsFontSizeToFit>
+            {averagePoint}
+          </Text>
+        </View>
+      );
+    else if (averagePoint >= 8.5 && averagePoint < 9)
+      return (
+        <View success style={[styles.buttonRankStyle, styles.ratingPointGreen]}>
+          <Text
+            style={styles.buttonTitleRankStyle}
+            numberOfLines={1}
+            adjustsFontSizeToFit>
+            {averagePoint}
+          </Text>
+        </View>
+      );
+    else if (averagePoint >= 9)
+      return (
+        <View style={[styles.buttonRankStyle, styles.ratingPointDarkGreen]}>
+          <Text
+            style={styles.buttonTitleRankStyle}
+            numberOfLines={1}
+            adjustsFontSizeToFit>
+            {averagePoint}
+          </Text>
+        </View>
+      );
+
+    return (
+      <Button success style={styles.buttonRankStyle}>
+        <Text
+          style={styles.buttonTitleRankStyle}
+          numberOfLines={1}
+          adjustsFontSizeToFit>
+          -
+        </Text>
+      </Button>
+    );
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <ListItem style={styles.containerList}>
+        <Left>
+          <Image
+            source={{uri: `${IMAGE_URL}original/${value.backdrop_path}`}}
+            style={styles.postImageStyle}
+          />
+        </Left>
+        <Body>
+          <View style={styles.bodyStyle}>
+            <Text numberOfLines={1} style={styles.title}>
+              {value.title}
+            </Text>
+            <Text numberOfLines={3} style={styles.overview}>
+              {value.overview}
+            </Text>
+            <Text numberOfLines={1} style={styles.detailDate}>
+              <Text style={styles.overview}>Yayın : </Text> {value.release_date}
+            </Text>
+            <Text numberOfLines={1} style={styles.detailDate}>
+                <Text style={styles.overview}>Oylar : </Text>  {value.vote_count}
+            </Text>
+          </View>
+        </Body>
+        <Right style={styles.rightStyle}>
+          {renderAverageButtonItem(value.vote_average)}
+        </Right>
+      </ListItem>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  containerList: {
+    backgroundColor: '#ffffff',
+    margin: '2%',
+    padding: '2%',
+    borderRadius: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+  },
+  postImageStyle: {
+    height: windowHeight / 5.5,
+    width: windowWidth / 2.5,
+    borderRadius: 5,
+  },
+  bodyStyle: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: windowHeight / 5.5,
+  },
+  title: {
+    fontWeight: 'bold',
+    color: '#4c4b4b',
+    height: '20%',
+  },
+  overview: {
+    fontWeight: '500',
+    color: '#aeaeae',
+    height: '50%',
+    lineHeight: 20,
+  },
+  detailDate: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#696969',
+    marginTop: 2,
+  },
+  rightStyle: {
+    flex: 0.07,
+    bottom: 5,
+    right: 10,
+    position: 'absolute',
+    textAlign: 'center',
+  },
+  buttonRankStyle: {
+    height: 40,
+    width: 40,
+    borderRadius: 50 / 2,
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonTitleRankStyle: {
+    fontSize: 15,
+    fontWeight: '900',
+    color: 'white',
+  },
+  ratingPointRed: {
+    backgroundColor: '#ba0808',
+  },
+  ratingPointOrange: {
+    backgroundColor: '#FF7B23',
+  },
+  ratingPointLightGreen: {
+    backgroundColor: '#63b14a',
+  },
+  ratingPointGreen: {
+    backgroundColor: '#53923e',
+  },
+  ratingPointDarkGreen: {
+    backgroundColor: 'green',
+  },
+});
+
+export default CardComponent;

src/screens/HomePage/index.js

@@ -1,12 +1,50 @@
-import React from 'react';
-import {View, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, FlatList} from 'react-native';
 import HeaderComponent from '../../components/header';
+import movie from '../../api/resources/movie';
+import CardComponent from '../../components/card-component';
 
 const HomePage = ({navigation}) => {
+  const [data, setData] = useState([]);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    getMovies().then();
+  }, []);
+
+  const getMovies = async () => {
+    try {
+      let response = await movie.popular(page);
+      setData(response.data);
+      console.log(response.data.results);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const ItemView = ({item}) => {
+    return (
+      <CardComponent
+        key={item.id}
+        value={item}
+        navigation={navigation}
+        routeName={'HomeDetailScreen'}
+      />
+    );
+  };
+
   return (
-    <View>
+    <View style={{flex: 1}}>
       <HeaderComponent handleNavigate={navigation} backButton={false} />
-      <Text>Home.js</Text>
+      <FlatList
+        data={data.results}
+        keyExtractor={(item, index) => index.toString()}
+        renderItem={ItemView}
+        enableEmptySections={true}
+        //ListFooterComponent={renderFooter}
+        //onEndReached={handleGetDate}
+        onEndReachedThreshold={0.5}
+      />
     </View>
   );
 };