init

Author: JeaMianh

ReactNative/rate-repository/.gitignore

@@ -0,0 +1,20 @@
+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

ReactNative/rate-repository/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.

ReactNative/rate-repository/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "rate-repository",
+    "slug": "rate-repository",
+    "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
+    }
+  }
+}

ReactNative/rate-repository/app/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Main from '../components/Main';
+
+const App = () => {
+    return (
+        <>
+            <Main />
+        </>
+        
+    );
+};
+
+export default App;
+

ReactNative/rate-repository/assets/fonts/SpaceMono-Regular.ttf

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

ReactNative/rate-repository/assets/images/adaptive-icon.png

@@ -0,0 +1,38 @@
+import Constants from 'expo-constants';
+import { Text, StyleSheet, View } from 'react-native';
+import RepositoryList from './RepositoryList';
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: Constants.statusBarHeight,
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    header: {
+        fontSize: 24,
+        fontWeight: '700',
+    },
+    text: {
+        color: 'blue',
+        fontSize: 20,
+    }
+
+});
+
+const Main = () => {
+    return(
+        <View style= {styles.container}>
+            <View>
+                <Text style={styles.header}> Rate Repository Application </Text>
+            </View>
+            <View >  
+                <RepositoryList />
+            </View>
+        </View>
+        
+    )
+};
+
+
+
+export default Main;

ReactNative/rate-repository/assets/images/favicon.png

@@ -0,0 +1,34 @@
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+type RepositoryItemProps = {
+    repository: {
+        id: string;
+        fullName: string;
+        description: string;
+        language: string;
+        forksCount: number;
+        stargazersCount: number;
+        ratingAverage: number;
+        reviewCount: number;
+        ownerAvatarUrl: string;
+    }
+};
+
+const RepositoryItem = ({ repository } : RepositoryItemProps) => {
+    return (
+        <View>
+            <Image 
+                source={{ uri: repository.ownerAvatarUrl }} 
+                style={{ width: 50, height: 50, borderRadius: 25}} 
+            />
+            <Text>Full Name: {repository.fullName}</Text>
+            <Text>Description: {repository.description}</Text>
+            <Text>Language: {repository.language}</Text>
+            <Text>Stars: {repository.forksCount}</Text>
+            <Text>Reviews: {repository.reviewCount}</Text>
+            <Text>Rating: {repository.ratingAverage}</Text>
+        </View>
+    )
+};
+
+export default RepositoryItem;

ReactNative/rate-repository/assets/images/icon.png

@@ -0,0 +1,69 @@
+import { FlatList, View, StyleSheet } from "react-native";
+import RepositoryItem from "./RepositoryItem";
+
+const styles = StyleSheet.create({
+    separator: {
+        height: 10,
+    },
+});
+
+const repositories = [
+    {
+        id: 'jaredpalmer.formik',
+        fullName: 'jaredpalmer/formik',
+        description: 'Build forms in React, without the tears',
+        language: 'TypeScript',
+        forksCount: 1589,
+        stargazersCount: 21553,
+        ratingAverage: 88,
+        reviewCount: 4,
+        ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4',
+    },
+    {
+        id: 'rails.rails',
+        fullName: 'rails/rails',
+        description: 'Ruby on Rails',
+        language: 'Ruby',
+        forksCount: 18349,
+        stargazersCount: 45377,
+        ratingAverage: 100,
+        reviewCount: 2,
+        ownerAvatarUrl: 'https://avatars1.githubusercontent.com/u/4223?v=4',
+    },
+    {
+        id: 'django.django',
+        fullName: 'django/django',
+        description: 'The Web framework for perfectionists with deadlines.',
+        language: 'Python',
+        forksCount: 21015,
+        stargazersCount: 48496,
+        ratingAverage: 73,
+        reviewCount: 5,
+        ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/27804?v=4',
+    },
+    {
+        id: 'reduxjs.redux',
+        fullName: 'reduxjs/redux',
+        description: 'Predictable state container for JavaScript apps',
+        language: 'TypeScript',
+        forksCount: 13902,
+        stargazersCount: 52869,
+        ratingAverage: 0,
+        reviewCount: 0,
+        ownerAvatarUrl: 'https://avatars3.githubusercontent.com/u/13142323?v=4',
+    },
+];
+
+const ItemSeparator = () => <View style={styles.separator} />;
+
+const RepositoryList = () => {
+    return(
+        <FlatList
+            data={repositories}
+            renderItem={({ item }) => <RepositoryItem repository={item} />}
+            ItemSeparatorComponent={ItemSeparator}
+        />
+    )
+};
+
+export default RepositoryList;

ReactNative/rate-repository/assets/images/partial-react-logo.png

@@ -0,0 +1,2 @@
+import theme from "./theme";
+import {Text, StyleSheet} from "react-native";

ReactNative/rate-repository/assets/images/react-logo.png

@@ -0,0 +1,20 @@
+const theme = {
+    colors: {
+        textPrimary: '#24292e',
+        textSecondary: '#586069',
+        primary: '#0366d6',
+    },
+    fontSizes: {
+        body: 14,
+        subheading: 16,
+    },
+    fonts: {
+        main: 'System',
+    },
+    fontWeights: {
+        normal: '400',
+        bold: '700',
+    },
+};
+
+export default theme