React Nativeでreact-native-swiperを使わずに、indexが変更された際に何かしたい的なお話

React Nativeで代表的なライブラリであるreact-native-swiper。
簡単にcarouselというかpagerみたいなことができるんだけども、厄介なことにchildrenの要素が増えたときにactiveIndexが0に変更されてしまう。
ちなみにScrollViewだとそういうpagerみたいなのを行うのは少々手間が折れる部分があるのでいかんせんし難いところではあるが、
FlatListでonViewableItemsChangedを使うことで実は対応できる。
さらにonViewableItemsChangedを使うことで見えてないViewを一時的に消すとかそういうこともできるわけで。

ということで今日はそのお話をば。

https://snack.expo.io/ryKXXQt0M

前提として自分がやりたいのは縦スクロールでpagingEnabledで1個ずつしか表示しないやつ。

FlatListもそうだしScrollViewもそうなんだけど、flex:1を指定したところで自動的に画面の高さに設定されるわけではない。
なのでrenderItemの中でView自体の高さをちゃんと指定してあげる必要がある。

次にonViewableItemsChangedでやっていることとしては、viewableItemsからアクティブになった要素を取得する。
で、onIndexChangedみたいなところでindexが変更された場合云々みたいな処理をやってあげればよい。
ちなみにthis.setState({ viewableItemIndices: viewableItems.map(item => item.index) });でやっていることは、今現在見えている要素のindexを配列として保持している。
なのでこれを見て先ほどのrenderItemsの中で出し分けをしてあげればよい。

もちろんこのサンプルは単純に空のViewにすることで一時的に消すという感じになっている。
例えば画像でもいいしテキストでもいいし適当な要素を入れてあげてもよい。

ちなみにviewabilityConfigで閾値などの設定ができる。
とりあえず自分としてはminimumViewTime: 1,viewAreaCoveragePercentThreshold: 0でよいかなぁと。

なお注意点としては、onViewableItemsChanged={({ viewableItems, changed }) => {/* 処理 */}}や、viewabilityConfig={{/* config */}}みたいなことをやるとエラーがでるので注意。

ってな感じでやってあげれば簡易的にindexを見てあげることができるようになる。
しかもついでに表示されていない要素は表示しないでおけるので、レンダリング的なものとしても優しい的なみたいな感じ。