initial commit

news_app/.gitignore

@@ -0,0 +1,22 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
+assets/images/*
+.env

news_app/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

news_app/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "news_app",
+    "slug": "news_app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

news_app/app/Components/HomeCategory.js

@@ -0,0 +1,72 @@
+import { View, Text, FlatList, Pressable, StyleSheet} from 'react-native'
+import React, { useState } from 'react'
+
+const HomeCategory = () => {
+    const [active, setActive] = useState(1);
+    const onCategoryClick = (id) => {
+        setActive(id);
+    }
+    const category = [
+        {
+            id: 1,
+            name: 'Latest'
+        },
+        {
+            id: 2,
+            name: 'World'
+        },
+        {
+            id: 3,
+            name: 'Business'
+        },
+        {
+            id: 4,
+            name: 'Politics'
+        },
+        {
+            id: 5,
+            name: 'Economy'
+        },
+        {
+            id: 6,
+            name: 'Tech'
+        },
+        {
+            id: 7,
+            name: 'Lifestyle'
+        },
+        {
+            id: 8,
+            name: 'Sports'
+        },
+    ]
+  return (
+    <View style={{borderWidth: 2, borderColor: "#EEEDEB"}}>
+      <FlatList data={category} horizontal renderItem={({item}) => (
+        <Pressable onPress={() => onCategoryClick(item.id)}>
+            <View style={{backgroundColor: "#F5F7F8",borderWidth: 1 ,borderColor: "white"}}>
+                <Text style={item.id == active? styles.selectTopic : styles.notSelectTopic}>{item.name}</Text>
+            </View>
+        </Pressable>
+      )}/>
+    </View>
+  )
+}
+
+const styles= StyleSheet.create({
+    notSelectTopic:{
+        marginRight: 10, 
+        fontSize: 18, 
+        padding: 10,
+        color: "#45474B"
+    },
+    selectTopic:{
+        marginRight: 10, 
+        fontSize: 20, 
+        fontWeight: '700',
+        padding: 10,
+        color: "black"
+    }
+})
+
+export default HomeCategory

news_app/app/Components/HomeTopHeadline.js

@@ -0,0 +1,35 @@
+import { View, Text, FlatList, Pressable, Image, Dimensions } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import GlobalAPI from '../Service/globalAPI'
+import { useFonts } from 'expo-font'
+
+const HomeTopHeadline = () => {
+    useFonts({
+        'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
+    })
+    const [newsList, setNewsList] = useState([]);
+    useEffect(() => {
+        getTopHeadline();
+    }, [])
+    
+    const getTopHeadline = async() => {
+        const result = (await GlobalAPI.getTopHeadline).data;
+        setNewsList(result.articles)
+    }
+
+  return (
+    <View>
+      <FlatList data={newsList} horizontal showsHorizontalScrollIndicator={false} renderItem={({item}) => (
+        <Pressable style={{width:Dimensions.get('screen').width*0.95, marginRight: 10, marginTop: 5, marginBottom: 20}}>
+            <Image source={{uri:item.urlToImage}} style={{height: 350}}/>
+            <View style={{backgroundColor: "#F5F7F8", padding: 10}}>
+                <Text style={{marginTop: 5, fontSize: 20, fontFamily: 'playFairBold'}}>{item.title}</Text>
+                <Text style={{marginTop: 5, color: "gray"}}>{item?.source?.name}</Text>
+            </View>
+        </Pressable>
+      )}/>
+    </View>
+  )
+}
+
+export default HomeTopHeadline

news_app/app/Screen/Home.js

@@ -0,0 +1,20 @@
+import { View, Text, SafeAreaView } from 'react-native';
+import React from 'react';
+import HomeCategory from "../Components/HomeCategory";
+import HomeTopHeadline from "../Components/HomeTopHeadline";
+import {useFonts} from 'expo-font'
+
+const Home = () => {
+    useFonts({
+        'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
+    })
+  return (
+    <View>
+        <Text style={{fontSize: 32, fontFamily: 'playFairBold', color: "#000000", textAlign: "center", marginBottom: 20}}>The Quick News</Text>
+        <HomeCategory/>
+        <HomeTopHeadline/>
+    </View>
+  )
+}
+
+export default Home

news_app/app/Service/globalAPI.js

@@ -0,0 +1,11 @@
+import {create} from "apisauce"; 
+
+const api = create({
+    baseURL: 'https://newsapi.org/v2',
+})
+
+const APIKey = process.env.EXPO_PUBLIC_API_KEY;
+const getTopHeadline = api.get('/top-headlines'+APIKey);
+export default{
+    getTopHeadline
+}

news_app/app/index.js

@@ -0,0 +1,12 @@
+import { SafeAreaView, Text, View } from "react-native";
+import Home from "./Screen/Home"
+
+export default function Index() {
+  return (
+    <SafeAreaView>
+      <View>
+          <Home/>
+      </View>
+    </SafeAreaView>
+  );
+}

news_app/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    
+  };
+};

news_app/constants/Colors.ts

@@ -0,0 +1,26 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+const tintColorLight = '#0a7ea4';
+const tintColorDark = '#fff';
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#151718',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+  },
+};

news_app/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "news_app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.2",
+    "@react-navigation/native": "^6.0.2",
+    "apisauce": "^3.0.1",
+    "expo": "~51.0.21",
+    "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.9",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.18",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.7",
+    "expo-web-browser": "~13.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.3",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.2.45",
+    "@types/react-test-renderer": "^18.0.7",
+    "jest": "^29.2.1",
+    "jest-expo": "~51.0.3",
+    "react-test-renderer": "18.2.0",
+    "typescript": "~5.3.3"
+  },
+  "private": true
+}

news_app/scripts/reset-project.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+const oldDirPath = path.join(root, 'app');
+const newDirPath = path.join(root, 'app-example');
+const newAppDirPath = path.join(root, 'app');
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}
+`;
+
+fs.rename(oldDirPath, newDirPath, (error) => {
+  if (error) {
+    return console.error(`Error renaming directory: ${error}`);
+  }
+  console.log('/app moved to /app-example.');
+
+  fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
+    if (error) {
+      return console.error(`Error creating new app directory: ${error}`);
+    }
+    console.log('New /app directory created.');
+
+    const indexPath = path.join(newAppDirPath, 'index.tsx');
+    fs.writeFile(indexPath, indexContent, (error) => {
+      if (error) {
+        return console.error(`Error creating index.tsx: ${error}`);
+      }
+      console.log('app/index.tsx created.');
+
+      const layoutPath = path.join(newAppDirPath, '_layout.tsx');
+      fs.writeFile(layoutPath, layoutContent, (error) => {
+        if (error) {
+          return console.error(`Error creating _layout.tsx: ${error}`);
+        }
+        console.log('app/_layout.tsx created.');
+      });
+    });
+  });
+});

news_app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+, "app/index.js"  ]
+}