RN-Challenge Internship - Fadhlan Hadaina

.gitignore

@@ -8,6 +8,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-
+node_modules/*
 # macOS
 .DS_Store

components/RenderItem.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { RowItem } from './RowItem'
+
+export const RenderItemMovie = ({item}) => {
+  const imgUrl = `https://www.themoviedb.org/t/p/w600_and_h900_bestv2${item.poster_path}`
+  return (
+    <RowItem
+      onPress={() => console.log(item.title)}
+      imageUrl={imgUrl}
+      title={item.title}
+      releaseDate={item.release_date}
+      rating={item.vote_average}
+    />
+  )
+}
+export const RenderItemTV = ({item}) => {
+  const imgUrl = `https://www.themoviedb.org/t/p/w600_and_h900_bestv2${item.poster_path}`
+  return (
+    <RowItem
+      imageUrl={imgUrl}
+      title={item.name}
+      releaseDate={item.first_air_date}
+      rating={item.vote_average}
+    />
+  )
+}

components/RowItem.tsx

@@ -0,0 +1,78 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { Card } from 'react-native-paper'
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+
+const Rating = (props) => {
+    const rating = props.value % 1 == 0 ? `${props.value}.0` : `${props.value}`
+    return (
+        <View style={props.style}>
+            <Text style={styles.rating}>
+                <Ionicons name="star"/> {rating}
+            </Text>
+        </View>
+    )
+}
+const navigation = createNativeStackNavigator()
+export const RowItem = (props) => {
+    return (
+        <Card
+            onPress={props.onPress}
+            style={styles.card}>
+            <View style={styles.containerWrapper}>
+                <Image
+                    style={styles.image}
+                    source={{
+                        uri: props.imageUrl
+                    }}/>
+                <View style={styles.descContainer}>
+                    <Text style={styles.title}>{props.title}</Text>
+                    <Text style={styles.releaseDate}>{props.releaseDate}</Text>
+                </View>
+                <Rating style={styles.ratingContainer} value={props.rating} />
+            </View>
+        </Card>
+    )
+}
+
+const styles = StyleSheet.create({
+    containerWrapper: {
+        flex: 1,
+        flexDirection: "row",
+    },
+    card: {
+        marginVertical: 5,
+        marginHorizontal: 10,
+        backgroundColor: 'orange',
+    },
+    image: {
+        width: 64,
+        height: 64,
+        borderWidth: 1,
+        borderColor: 'black',
+        margin: 5,
+    },
+    descContainer: {
+        flex: 6,
+        padding: 5,
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    ratingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: 'skyblue',
+        borderRadius: 2,
+        padding: 5,
+    },
+    title: {
+        color: 'black',
+    },
+    releaseDate: {
+        color: 'black',
+    },
+    rating: {
+        color: 'black',
+    }
+})

config/Access.tsx

@@ -0,0 +1,3 @@
+export const Access = {
+    token: "aceceb071fd0a67f1947a1e4cdd4dc5a",
+}

navigation/BottomTabNavigator.tsx

@@ -19,17 +19,17 @@ export default function BottomTabNavigator() {
       initialRouteName="TabOne"
       tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
       <BottomTab.Screen
-        name="TabOne"
+        name="Movies"
         component={TabOneNavigator}
         options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+          tabBarIcon: ({ color }) => <TabBarIcon name="film" color={color} />,
         }}
       />
       <BottomTab.Screen
-        name="TabTwo"
+        name="TV Series"
         component={TabTwoNavigator}
         options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+          tabBarIcon: ({ color }) => <TabBarIcon name="tv" color={color} />,
         }}
       />
     </BottomTab.Navigator>
@@ -52,7 +52,7 @@ function TabOneNavigator() {
       <TabOneStack.Screen
         name="TabOneScreen"
         component={TabOneScreen}
-        options={{ headerTitle: 'Tab One Title' }}
+        options={{ headerTitle: 'Movies' }}
       />
     </TabOneStack.Navigator>
   );
@@ -66,7 +66,7 @@ function TabTwoNavigator() {
       <TabTwoStack.Screen
         name="TabTwoScreen"
         component={TabTwoScreen}
-        options={{ headerTitle: 'Tab Two Title' }}
+        options={{ headerTitle: 'TV Series' }}
       />
     </TabTwoStack.Navigator>
   );