{"id":22119778,"url":"https://github.com/kadirkarabacak/react-native","last_synced_at":"2026-05-09T10:42:11.656Z","repository":{"id":254179647,"uuid":"845731349","full_name":"KadirKarabacak/React-Native","owner":"KadirKarabacak","description":"This repo is about my React-Native learnings and my first mobile app","archived":false,"fork":false,"pushed_at":"2024-09-05T18:25:37.000Z","size":3817,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T12:14:03.769Z","etag":null,"topics":["appwrite-database","expo","expo-router","file-based-routing","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KadirKarabacak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-21T20:23:06.000Z","updated_at":"2024-11-12T10:10:13.000Z","dependencies_parsed_at":"2024-08-26T10:45:24.971Z","dependency_job_id":"b6efcaf5-5d2b-4a24-b24a-716780841489","html_url":"https://github.com/KadirKarabacak/React-Native","commit_stats":null,"previous_names":["kadirkarabacak/react-native"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KadirKarabacak%2FReact-Native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KadirKarabacak%2FReact-Native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KadirKarabacak%2FReact-Native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KadirKarabacak%2FReact-Native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KadirKarabacak","download_url":"https://codeload.github.com/KadirKarabacak/React-Native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245219327,"owners_count":20579566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appwrite-database","expo","expo-router","file-based-routing","react-native","typescript"],"created_at":"2024-12-01T14:17:08.406Z","updated_at":"2026-05-09T10:42:06.628Z","avatar_url":"https://github.com/KadirKarabacak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `Aora [ React-Native \u0026 Expo ] App 📸`\n\nAora, React-Native ve Expo ile geliştirilmiş bir mobil video oluşturma ve paylaşım uygulamasıdır.\n\n### `Features 🥏`\n\n-   Kullanıcı adı, email ve şifre ile kullanıcıların uygulamaya **signUp** olabilmesi özelliği,\n-   Kayıtlı kullanıcıların, email ve şifreleri aracılığıyla uygulamaya **signIn** yapabilmesi özelliği,\n-   Kullanıcıların, kendi oluşturduğu veya diğer kullanıcılar tarafından oluşturulan videoları görebilmesi özelliği,\n-   Kullanıcıların bir video, thumbnail, video title ve Ai prompt ile ( video boyutu 50mb'dan büyük olmayacak şekilde ) yeni bir video oluşturabilmesi özelliği için bir create sekmesi,\n-   Kullanıcının uygulamadan güvenli bir şekilde çıkış yapabilmesi ve daha önce oluşturduğu tüm videoları görebilmesi için bir profile sekmesi,\n-   Anasayfada diğer kullanıcıların videoları içerisinden belirli bir başlığa göre video araması yapabilmesi ve filtreleyebilmesi özelliği,\n-   Kullanıcının kendi oluşturduğu videoları veya diğer kullanıcıların oluşturduğu videolara bookmark ekleyip daha sonra tamamına erişebileceği bir bookmark sekmesi,\n-   Kullanıcının bookmark'a eklediği videoların içerisinde arama ve filtreleme yapabilmesi özelliği,\n    gibi özellikleri bünyesinde barındırır.\n\n### `Tech Stack 📚`\n\n-   **react-native-picker** ▶ Video yükleme aşamasında video | thumbnail seçiminde spesifik yönlendirme için.\n-   **expo-av** ▶ Yüklenmiş videoların gösterilmesi için.\n-   **expo-constants** ▶ Enviroment variables oluşturabilmek ve uygulama veritabanı güvenliği için.\n-   **expo-router** ▶ File Based routing için.\n-   **react-native-appwrite** ▶ Uygulamanın appwrite database ile bağlantısının kurulması için.\n-   **react-native-safe-area-context** ▶ Uygulama arayüzü oluşturulmasında güvenli gösterim için.\n-   **react-native-webview** ▶ Video içeriği youtube - vimeo gibi platformlardan gelen videoların sorunsuz gösterilebilmesi için.\n-   **Typescript** ▶ Güvenli geliştirme ortamı ve tip doğrulaması için.\n-   **react-native-reanimated** ▶ Uygulama içi geçiş ve etkileşim animasyonları için.\n\n### `React-Native \u0026 Expo Educational Notes 📝`\n\n-   React-Native **IOS ve Android** için tek bir codebase ile geliştirme yapmamızı sağlar. Böylece geliştirme süreleri ve maliyet büyük ölçüde azalır.\n-   React-Native'in çok popüler olmasının ana sebeplerinden birisi **Native components** kullanımına izin vermesidir. **Native components** daha iyi performansa sahip ve daha kusursuz kullanıcı arayüzlü uygulamalar oluşturulmasına olanak verir.\n-   Büyük şirketler **( Meta, Discord, Microsoft, Tesla, Amazon, AirBNB Hatta Call of Duty )** React Native kullanıyorlar.\n-   React-Native aynı zamanda **Hot Reloading** özelliği ile geliştirme sürecinin çok hızlı olmasını sağlıyor.\n-   React-Native'in güçlü bir topluluk desteği bulunmakta ve her geçen gün de büyümekte. Aynı zamanda da öğrenmesi ve kullanması eğer **Javascript ve React** bilginiz bulunuyorsa çok daha kolay.\n-   React-Native projesi oluşturmak için React'ta olduğu gibi Create-React-App, Vite gibi paketler yerine **Expo** kullanıyoruz. Expo React-Native geliştirme sürecini daha da kolaylaştıran bir paket. **Geliştirme değişkenleri** ve Native bağımlılıklar hakkında düşünmemize gerek kalmaz, **Android Studio** ve **xCode** gibi devasa geliştirme ortamlarını yüklememize gerek kalmaz.\n-   Expo aynı zamanda pre-built componentler ve api'lar barındırır. (**Navigation, Gestures, Camera, Maps gibi**).\n-   Expo Nextjs'de olduğu gibi **Expo Router** ismini verdiği **File Based** routing sağlar ve yakın süreçte RSC **( React-Server-Components )** özelliğini bünyelerine eklemeye odaklandılar.\n\n### `Built-in Components`\n\n-   **Text** componenti React'ta kullandığımız p veya h1 gibi tagler yerine kullanılır ve text görüntüler.\n-   **View** componenti div kullanmaya benzer bir layout oluşturmak ve içerisine diğer component'leri eklemek için kullanılır. Default olarak flexbox yapısı kullanır.\n-   **TouchableHighlight**, **TouchableOpacity** dokunmanın kullanıcıya ekranda bir dönüş yapmasını sağlar. Aynı zamanda da onPress prop'u ile bazı fonksiyonlar oluşturup kullanmamıza olanak verir.\n-   **TouchableWithoutFeedback** dkunmanın kullanıcıya bir geri dönüşü olmaz. Genelde Linkler ve Resimler için kullanılır.\n-   **ActivityIndicator** bir spinner yada loading indicator göstermemize olanak verir.\n-   **FlatList** uzun listeler renderlamak ve scrollama gerektiğinde kullanılır. React'taki map fonksiyonuna benzer ve optimized scroll ve item seperation gibi extra özellikler sunar [ Uzun listeler ve smooth scrolling = Flatlist | Kısa listeler = map function ]\n-   **ScrollView** içerisinde birden fazla component barındırabilen ve onlar için scroll edilebilir bir container sağlar. Oluşturulan sayfanın mevcut telefon ekranından daha uzun olması muhtemel durumlarda kullanılır.\n-   **SafeAreaView** React'ta bir container'a 100dvh height vermek gibidir. Ekran boyutu ve ekranın yatay dikey olması gibi durumlar fark etmeksizin ekranın tamamını kaplamasını sağlar. Bu komponent yerine genelde react-native-safe-area-context kütüphanesini kullanmak daha doğru ve ekran yerleşimi daha güvenilirdir.\n-   **Image** bir resim göstermemizi sağlar. source prop'u resim kaynağını, resizeMode resmin object-fit özelliğini ayarlar\n-   **ImageBackground** bir background olarak resim göstermemizi sağlar.\n-   **Modal** modallar oluşturmamızı ve göstermemizi sağlar.\n-   **Alert.alert** tıklamalara bağlı modal olarak alert göstermemizi sağlar.\n-   **Switch** switch componenti oluşturmamızı sağlar.\n-   **StatusBar** telefonun status bar'ını görünür yada görünmez kılmak için kullanılabilir.\n\n## Indirilmesi gereken paketler\n\n-   👉 **npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar**\n-   **npx expo start -c** projemizi çalıştırmak için gereken komuttur.\n-   Sonrasında Setup etry point ayarlaması yapılmalıdır.\n-   **app.json** dosyası projemiz için genel bir configuration dosyasıdır.\n-   App folder'ı içerisinde (tabs) klasörü mobilde sekmeler oluşturmaya yarar. (tabs) içerisindeki **layout.tsx** bir navbar oluşturur Tabs içerisinde **Tabs.Screen**'ler yoluyla birden fazla sekme oluştururuz.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadirkarabacak%2Freact-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkadirkarabacak%2Freact-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadirkarabacak%2Freact-native/lists"}