Anpassad bild src: https://blog.discordapp.com/

Bygga Facebook Messenger-klon i React Native.

"Hej, jag letar efter möjligheter till deltid på distans"

Detta är det första i en serie blogginlägg där jag redogör för min erfarenhet med React Native.

UPPDATERING:

DEL 2: React Native Lottie-animationer - Bygga Facebook Messenger - Reaktioner [Nästa del]

Airbnb publicerade ett långt, fem-delat blogginlägg som tillkännagav och förklarade sitt beslut att solnedgången React Native och återinvesterar alla insatser tillbaka till infödda. Precis som alla, när någon frågar mig "Ska vi använda React Native?" Jag kan säga "ja" med säkerhet och påpeka företag som Airbnb, Tesla ... etc. Tyvärr har Airbnb lämnat boet tillsammans med Udacity Mobile Team.

Men det betyder inte att det går ner, React Native utvecklas snabbare än någonsin. Det har gått över 2500 åtaganden under det senaste året och Facebook tillkännagav just att de hanterar några av de tekniska utmaningarna vi möttes framför oss ..

Jag vill fortfarande säga att vi stött på de flesta av de problem som Airbnb påpekade, men det är säkert att RN är på den söta platsen just nu. Microsoft använder den för den nya versionen av Office och skriver om den nya Skype-appen helt och hållet igen. Visual Studio Code - Bästa redigeraren för React just nu är från Microsoft.

Så när alla fattade beslut, tänkte jag på att bygga en skalbar applikation som reaktivt för att se till att saker och ting är coola. Eftersom jag arbetar med en chattmodul med eldbas, dyker Facebook-messenger in i mitt sinne. Kan jag bygga något som Messenger bara med hjälp av react-native ?? Det visar sig att jag kunde göra de flesta saker på reaktivt infödda ... Inte allt utom nära.

Den här artikeln förklarar olika steg jag använde och problem som uppstod när jag byggde appen. Vi kommer att börja med navigering och sedan hoppa till UI och äntligen ansluta funktionalitet med hjälp av eldbasen, vilket gör saker verkligen funktionella.

Så hela processen är indelad i tre huvuddelar

  1. Navigation - Setup & Fallfalls - React Navigation
  2. UI / UX - Minska BoilerPlate-koden med verktygssats
  3. Funktionalitet / Firebase Integration - (Eventuellt nästa inlägg;))

Navigering

Så det bästa alternativet för navigering i react native är reanavigering. Den har stöd för olika typer av navigering som vi kommer att använda i appen. Inställningsproceduren är smidig. Vi kan enkelt definiera navigationsstacken bara genom att titta på den befintliga appen.

I roten finns det StackNavigator följt av den nedre navigeringen på huvudskärmen. Den första skärmen "Home" är en TopTabNavigator och den andra skärmar / staplar efter behov. Så det grundläggande navigeringsträdet kommer att vara följande

index sida-undersökningNavigering längst ner och Navigering på övre flikenSlutresultat - Allt inne i en enda navigationsstack

Add-ons

Vi har nu ett fungerande navigationssystem som liknar den befintliga appen. Men det finns vissa tillägg som behövs annat än den vanliga navigeringen. Det skulle vara

  • Öppna CameraScreen som modal när du klickar på kameraknappen i bottennavigering.
  • Sökhuvud överst delas mellan alla skärmar i navigeringsfliken Hem.

Vårt primära mål bör vara att lösa dessa problem på det enklaste sättet som möjligt utan mycket kodrefaktor och problem.

Funktion 1: Camera Modal Setup

En modal visar innehåll som tillfälligt blockerar interaktioner med huvudvyn

För att öppna skärmen som en modal (animering från botten till topp) kan vi använda lägeegenskap i navigering. Men om vi lägger till läge: 'modal' till rotnavigatorn, kommer det att påverka alla skärmar som vi kommer att definiera i framtiden. Vi behöver bara göra att detta fungerar för CameraScreen. Så istället separera skärmarna från rotnavigatorn ...

Modalinställning som endast påverkar kameraskärmen

Phew ... Den första halvan är klar ...

Nu nästa utmaning, vi måste öppna CameraScreen när användaren trycker på kameraknappen, som i själva verket är en TAB i BottomTabNavigation.

Överbryter flikenBarOnPress på BottomTabNavigator

Vi måste åsidosätta onPress för att navigera till modal kameraskärm. För att navigationen Optioner har tabBarOnPress-egenskap som vi kan åsidosätta för att göra detta möjligt.

Och resultatet

Kameramodell skärm

Du kan detaljerade instruktioner för denna funktion här:

Tack till Spencer Carli: https://egghead.io/lessons/react-native-open-a-modal-from-tab-bar-in-react-navigation

Funktion 2: Sök Header över HomeTab

För messenger har vi ett alternativ att söka över appen. Den här fältet delas av alla fyra flikar i hemsektionen. Nu gör de flesta av oss det första fel sättet som kommer i åtanke (åtminstone jag gjorde det för två appar).

  • Definiera en huvudskärm
  • Lägg till den nedre navigeringsfönstret på skärmen
  • Lägg till UI för sökfält ovanför navigatorn

Detta är en stor misstag Varför ??!

Framför allt mer än en navigatör
De flesta appar bör bara någonsin göra en navigator inuti en React-komponent, och det är vanligtvis någonstans nära rotkomponenten i din app. Det här är lite motintuitivt till en början men det är viktigt för arkitekturen för React Navigation.

Vilket innebär att vi definierar vår nedre navigering inuti en skärm, kommer den att ha sitt eget navigationsläge, rekvisita och inte kunna interagera med överordnad navigatör.

Vi kan koppla in vår barnnavigator manuellt med hjälp av screenProps eller använda redux-integration till båda navigatörerna, men allt detta låter som mycket arbete att göra för att bara definiera rubriken för navigeringen.

Se React-Navigation-Common-misstag för mer information om varför du bör undvika denna strategi

Så vad är det bästa sättet att uppnå den här funktionen för sökhuvud?

Använd bara rubrikstödet på din huvudskärm i ModalStack. Ge också rubrik: null för ModalStack för att undvika flera rubriker. Se också till att headerMode: 'none' inte anges för ModalStack eftersom dessa kommer att ta bort rubriker som anges i alternativen

Funktionell sökfält

Vi har sökalternativet som fungerar nu. Men nu måste du tänka på hur kommer den här komponenten att interagera med alla andra skärmar. Jag hade samma förvirring. Budbäraren öppnar en ny skärm när sökfältet är fokuserat. Jag tror att vi så småningom kan använda redux för att kommunicera med andra delar av appen och för den andra övergångsdelen

SearchBar Modal Transition med delad rubrik över skärmar

När vi klickar på Sökalternativet överst i Messenger, händer huvudsakligen två saker

  • Sökinmatningsfältet fokuseras
  • Vi dirigeras till en ny sökskärm med en modal övergång.

Hur kan vi göra detta med reaktionsnavigering ?? Vår nuvarande headerimplementering och stackkonfiguration har flera brister nu.

Huvudsakligt problem

  • Header är nu unikt för MainScreen, vilket betyder att även om vi lägger till en ny rubrik för SearchScreen kommer det att vara annorlunda. Så användaren kommer att se flera rubriker (dvs. samma rubrikkomponent som visas på olika skärmar nu)

Lösning 1: Flytta huvudet till vår huvudsakliga stackkonfiguration

Eftersom vår Modal Stack har skärmar inklusive BottomNavigator, CameraScreen & SearchScreen delas rubriken för alla skärmar. Så kameraskärmen visar också denna rubrik. Det vill vi inte ...

Så det bästa sättet är att skapa en Search StackNavigator som har bottennavigering & SearchScreen definierad i den och en global rubrik.

SearchHeader delade mellan Bottom Navigator & SearchScreen

Nu har vi en delad funktionell rubrik för båda skärmarna. Låt oss lägga till ytterligare inställningar för att hantera fokushändelser och hantera tillbaka presshändelser.

Med en fullfjädrad fungerande navigering tror jag att vi nu är säkra att börja med UI / UX i appen.

UI / UX

I mitt sista inlägg "Super Cool Material UI-komponenter i React Native!" Jag beskrev varför det är bättre att använda små bibliotek istället för att använda helt packade UI-verktygssatser. Men det är inte fallet om ...

  • App följer strikta plattformsriktlinjer.
  • Du behöver inte skriva anpassad kod för alla dessa rippeleffekter och allt
  • Verktygssatserna kommer att ha ett brett utbud av komponenter (Android och iOS)
  • Kan använda komponenter som verktygsfält, kort, låda etc från en enda lib.

Så vi kommer att behöva en av de bästa verktygssatserna som finns tillgängliga för att reagera naturligt för att håna den inhemska känslan och upplevelsen. Så jag gjorde en hel del forskning där jag kunde hitta verktygssatser som NativeBase, materialpaket, material-ui och naturligtvis reagera-native-papper. Slutligen bestämde jag mig för att använda papper .. varför ??

Ange React Native Paper

Ger en jämn och smidig användarupplevelse med plattformsanpassning.

Papper: Anpassning av plattformen

Vi kan använda komponenter som TouchableRipple som fungerar utmärkt på Android och iOS enligt riktlinjerna. Papper stöder också dynamiskt temasupport för appen (Feature Enhancement: Dark Mode;))

En annan bra sak med att använda en verktygssats som Papper är att minska källan för pannplattan som vi behöver skriva.

Det bästa exemplet för detta skulle vara verktygsfältet och sökfältet. Jag var tvungen att skriva cirka 120 rader kod för att uppnå denna funktion. Men med papper minskade antalet rader till mindre än 40, vilket exponentiellt ökar kodläsbarheten.

Tack till alla bidragsgivare inklusive Satyajit Sahoo för denna fantastiska verktygssats ...

Jag har använt flexBox maximalt, alla åtgärder är relativt. Vi kanske måste skala saker lite i framtiden ... men för tillfället ser det bra ut.

Landskapsläge

Jag använde https://randomuser.me/ api för att generera slumpmässiga användardata. De har också några trevliga användarbilder support också, som fungerade bra för mig.

CameraScreen implementeras med hjälp av reaktionskamera. Denna lib har också stöd för ansiktsigenkänning. Med hjälp av ett overlay-system och ett enkelt API bakom oss kunde vi göra några intressanta saker. Men jag tror inte att detta kommer att fungera lika bra som den inhemska appen. Native har sina förmåner när det gäller saker som kamera och högpresterande media rendering.

Jag kommer att inkludera funktionen så snart som möjligt. Kommer att använda reaktiva native firebase för att integrera en till en chatt och gruppchatt som en modul.

UPPDATERING: Detta händer i Watermelon Messenger nu [Kolla in länken högst upp]

Nästa del av det här inlägget kommer att täcka brandbasintegrationen med offline-stöd tillsammans med chatgränssnittets UI med mer om UI & Paper-funktioner.

DEL 2: React Native Lottie-animationer - Bygga Facebook Messenger - Reaktioner [Nästa del]

TL; DR: Källkod - React-Native-Messenger (WIP)

Exempel på nedladdning av APK (uppdaterad: v1.1) här

React Native BoilerPlate

Den här appen använder reagerande pannplatta som har stöd för nästan alla libs inklusive redux, reageringsnavigering och redux-saga som jag byggde från skrapa. Pannplattan är välstrukturerad och korrekt separerar logik och problem.

Om någon vill använda det, se -

UPDATE: Funktionsbaserad Architecture Boilerplate

Fler artiklar från mig

Hej, jag letar efter avlägsna deltidsmöjligheter

  • Kommentarer eller frågor? Fråga mig på Medium, Github, Twitter eller LinkedIn