Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kadirkarabacak/react-native

This repo is about my React-Native learnings and my first mobile app
https://github.com/kadirkarabacak/react-native

appwrite-database expo expo-router file-based-routing react-native typescript

Last synced: 3 days ago
JSON representation

This repo is about my React-Native learnings and my first mobile app

Awesome Lists containing this project

README 

        
# `Aora [ React-Native & Expo ] App 📸`



Aora, React-Native ve Expo ile geliştirilmiş bir mobil video oluşturma ve paylaşım uygulamasıdır.



### `Features 🥏`



-   Kullanıcı adı, email ve şifre ile kullanıcıların uygulamaya **signUp** olabilmesi özelliği,

-   Kayıtlı kullanıcıların, email ve şifreleri aracılığıyla uygulamaya **signIn** yapabilmesi özelliği,

-   Kullanıcıların, kendi oluşturduğu veya diğer kullanıcılar tarafından oluşturulan videoları görebilmesi özelliği,

-   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,

-   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,

-   Anasayfada diğer kullanıcıların videoları içerisinden belirli bir başlığa göre video araması yapabilmesi ve filtreleyebilmesi özelliği,

-   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,

-   Kullanıcının bookmark'a eklediği videoların içerisinde arama ve filtreleme yapabilmesi özelliği,

    gibi özellikleri bünyesinde barındırır.



### `Tech Stack 📚`



-   **react-native-picker** ▶ Video yükleme aşamasında video | thumbnail seçiminde spesifik yönlendirme için.

-   **expo-av** ▶ Yüklenmiş videoların gösterilmesi için.

-   **expo-constants** ▶ Enviroment variables oluşturabilmek ve uygulama veritabanı güvenliği için.

-   **expo-router** ▶ File Based routing için.

-   **react-native-appwrite** ▶ Uygulamanın appwrite database ile bağlantısının kurulması için.

-   **react-native-safe-area-context** ▶ Uygulama arayüzü oluşturulmasında güvenli gösterim için.

-   **react-native-webview** ▶ Video içeriği youtube - vimeo gibi platformlardan gelen videoların sorunsuz gösterilebilmesi için.

-   **Typescript** ▶ Güvenli geliştirme ortamı ve tip doğrulaması için.

-   **react-native-reanimated** ▶ Uygulama içi geçiş ve etkileşim animasyonları için.



### `React-Native & Expo Educational Notes 📝`



-   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.

-   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.

-   Büyük şirketler **( Meta, Discord, Microsoft, Tesla, Amazon, AirBNB Hatta Call of Duty )** React Native kullanıyorlar.

-   React-Native aynı zamanda **Hot Reloading** özelliği ile geliştirme sürecinin çok hızlı olmasını sağlıyor.

-   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.

-   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.

-   Expo aynı zamanda pre-built componentler ve api'lar barındırır. (**Navigation, Gestures, Camera, Maps gibi**).

-   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.



### `Built-in Components`



-   **Text** componenti React'ta kullandığımız p veya h1 gibi tagler yerine kullanılır ve text görüntüler.

-   **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.

-   **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.

-   **TouchableWithoutFeedback** dkunmanın kullanıcıya bir geri dönüşü olmaz. Genelde Linkler ve Resimler için kullanılır.

-   **ActivityIndicator** bir spinner yada loading indicator göstermemize olanak verir.

-   **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 ]

-   **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.

-   **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.

-   **Image** bir resim göstermemizi sağlar. source prop'u resim kaynağını, resizeMode resmin object-fit özelliğini ayarlar

-   **ImageBackground** bir background olarak resim göstermemizi sağlar.

-   **Modal** modallar oluşturmamızı ve göstermemizi sağlar.

-   **Alert.alert** tıklamalara bağlı modal olarak alert göstermemizi sağlar.

-   **Switch** switch componenti oluşturmamızı sağlar.

-   **StatusBar** telefonun status bar'ını görünür yada görünmez kılmak için kullanılabilir.



## Indirilmesi gereken paketler



-   👉 **npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar**

-   **npx expo start -c** projemizi çalıştırmak için gereken komuttur.

-   Sonrasında Setup etry point ayarlaması yapılmalıdır.

-   **app.json** dosyası projemiz için genel bir configuration dosyasıdır.

-   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.