Amikor a billentyűzet kitakarja a tartalmat 2.

Gyakori jelenség, hogy a megjelenő billentyűzet eltakarja a tartalom egy részét. Szép megoldás erre a KeyboardAwareScrollView használata. És tegyük hozzá most már azt is, hogy akkor, ha nincsen nagyon sok tartalom a képernyőn.

KeyboardAvoidingView vagy KeyboardAwareScrollView?

Hogy, ha a tyúk – tojás példáját akarnám felhozni, vagyis melyik volt előbb, akkor azt mondanám, hogy a KeyboardAvoidingView.

Egy előző bejegyzésben írtam, hogy „a KeyboardAvoidingView hatása, hogy amikor a mobil képernyőjén a billentyűzet alulról felúszva megjelenik, akkor a tartalmat úgy tolja feljebb, hogy minden látszódjon a képernyőn. A tartalom is és a billentyűzet is.”

A komponens addig pöpecül teszi is a dolgát, amíg a képernyőn a tartalom kényelemesen elfér. De, ha már annyi tartalom van, hogy a képernyőt egyébként görgetni kellene, akkor a tartalom felül szépen ki fog futni a képernyőből és nem látjuk.

Nos, ezt a problémát meg lehet oldani a ScrollView komponens használatával is, amit a KeyboardAvoidingView komponens köré kell helyezni. Így a tartalom görgethetővé válik és a billenytűzet megjelenítése közben is tudjuk a tartalmat nézni scrollozással.

Ez ugyebár két komponens használatát jelenti és bár mindkét komponens a react-native csomag része, azért mégiscsak két komponenst kell erre használnunk. 🙂

Így jön tehát képbe mentőővként a KeyboardAwareScrollView. Ez egy harmadik fél által írt komponens, ergo telepíteni kell. Alapból tartalmazza a ScrollView komponenst, tehát ezzel sem kell törődnünk.

Telepítés

A komponens itt érhető el, és ezzel az utasítással kell telepíteni:

npm i react-native-keyboard-aware-scroll-view

vagy

yarn add react-native-keyboard-aware-scroll-view

Használat

Használata brutálisan egyszerű. Először is importálni kell:

import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

Aztán elhelyezni a kódban. A KeyboardAwareScrollView az egész képernyőt görgethetővé teszi. Célszerű a közvetlenül ez alatti „konténer” komponensnek megadni egy flex: 1 értéket, ami azt jelenti, hogy a benne található tartalom a teljes rendelkezésre álló területet elfoglalja.

<KeyboardAwareScrollView>
    <View style={{flex: 1, justifyContent: "space-around"}}>
    // ...
    </View>
</KeyboardAwareScrollView>