2018年9月13日木曜日

Expo30.0.0の主な変更点的なお話

  • このエントリーをはてなブックマークに追加

Expoの30.0.0が使えるようになったので、それを簡単にまとめました的な。 ちなみに本家のブログはこちらから。

2018年9月6日木曜日

firebaseのfirestoreで文字列のプレフィックス検索(前方一致検索)を行いたい的なお話し

  • このエントリーをはてなブックマークに追加

firebaseはなかなか便利なもので。
中規模程度までのもので、SNSとかじゃないリレーションがあまり発生しないアプリとかサービスだったらオススメ的な。
とりあえずサーバサイドを書かずともいろんなのが使えるサービスだよ的な。

で、今日はそんなfirebaseでfirestoreを使っているんだけども。
firestoreのドキュメントを見ていると検索をするときに文字列型なのに">="とか使っているからどういうこっちゃと。
これの意味がわからないんだけど試してみるとどうやら文字が検索できるっぽい。
色々と調べたり試してみるとプレフィックス検索ができるみたい。

てなわけで今日はfirestoreにて文字列のプレフィックス検索を行う的なお話しをば。

2018年7月27日金曜日

React NativeのUIテストを行うためにwix/detoxを使ってみましょう的なお話

  • このエントリーをはてなブックマークに追加

React Nativeでテストをするとなるとjestなど色々とあるわけで。
けどそれはどちらかというとコンポーネントにデータが通ったかとかAPIの通信とかうんちゃらとか。
視覚的にそもそも遷移だとか、例えばログイン画面でメールアドレスとパスワードを入力して、エラーだったらアラートが出るかどうかをテストしたいとかあるわけで。
もちろん視覚的じゃなくてもできるわけだけど視覚的にちゃんと出てるのかなとか見てみたいわけで。

そういうときにwixから出てるdetoxを使えばできるよ的な。
ということで今日はそのお話をば。

Expo29.0.0の主な変更点的なお話

  • このエントリーをはてなブックマークに追加

Expoの29.0.0が使えるようになったので、それを簡単にまとめました的な。
ちなみに本家のブログはこちらから。

2018年7月10日火曜日

React Native(Expo)を使って、Twitterのいいねを検索するためのアプリを作ったので諸々晒す的なお話

  • このエントリーをはてなブックマークに追加

Twitterの公式検索の機能ではいいねを検索する機能はないわけで。
過去に自分がどういういいねをしていたのか、またいいねしたんだけどいつのツイートをいいねしたんだっけ?みたいなことってあるわけで。
そんなときに検索ができるアプリがあったらいいな〜と思って作ってみた。

ちなみにReact NativeでExpoを使って実装。
さらに自分が作ったreact-native-simple-twitterを使っている。
ということで今日はExpoのどういうコンポーネントやらを使ってたり、npmのパッケージを使っているかどうか的なお話をば。

react-navigationをv1からv2に更新した的なお話

  • このエントリーをはてなブックマークに追加

react-navigationをv1からv2へとバージョンアップした的なお話。
v1からv2に移行するにあたって色々と変更する点があったので、それらを雑多なメモ的な感じで。

2018年6月1日金曜日

react-nativeでWebView内のCookieをjsのコードのみで削除するには的なお話

  • このエントリーをはてなブックマークに追加

そもそもWebViewのCookieを削除する場面ってある?と思ったんだけども、最近instagramのAPIを簡単に扱うためのライブラリを作った。
watanabeyu/react-native-simple-instagram
これはまぁ以前作ったwatanabeyu/react-native-simple-twitterとほぼ同じ的なもので、
とりあえずreact-native linkとか必要なしにjsだけでinstagramのAPIを叩けるようにしましょう的な。
Twitterと違ってInstagramのAPIはかなり実装は楽だった。

ただ問題になるのはAPIを使うためにTwitterもだしInstagramもだけど、ログインをする必要がある。
Twitterの場合は都度このアカウントでよいですか?みたいな表示を出してくれるけど、Instagramの場合はそういうアラートも出ないのでアカウントの切り替えが出来ない。
Cookieが残っているからというのが理由なんだけど、WebViewのメソッドだったりでCookieを削除するようなものはなかったりする。
ちなみにiOSだったらNSHTTPCookieStorageに保存されているのでここをいじらなければいけない。
ということで今日はnativeをbridgeしなくてもWebViewのCookieを削除するには的なお話をば。

2018年5月16日水曜日

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

  • このエントリーをはてなブックマークに追加

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

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

2018年4月27日金曜日

react native0.54.2以降でTextInputでonChangeTextを使うと日本語変換ができなくなる的なお話

  • このエントリーをはてなブックマークに追加

まんまタイトル通り。
https://github.com/facebook/react-native/pull/18456
valueもしくはdefaultValueとして値を入れてかつonChangeTextを使うと日本語の変換ができなくなる。
なんか望ましくない文字を入れたくないためのアップデートらしい。

とりあえずこのままだと困るので、今日はこれを対処するお話をば。

ちなみにExpo30(2018/09/13)とReact Native0.57以降ではこの問題修正されてるので気にせずで大丈夫的な。

2018年4月11日水曜日

reactjsでes6で作ったnpmパッケージはimportできないので要注意的なお話

  • このエントリーをはてなブックマークに追加

タイトル通り。
React Nativeだとそんなことないような気がするんだけど、reactjsだとダメっていう。
class propertiesとかそういうところとかで引っかかる。
ちなみにnpmパッケージじゃなくて自分でes6のcomponentを作ってimportをしたときはbabelの設定をちゃんとしていればOK的な。

とりあえず理由はわからないわけではないんだけど、面倒なので、今日はちゃんとnpm publishする前に確認をしよう的なお話をば。

Adsense