ReactNative

最近Expoでアプリ書いてるのに使ったTipsなど

React Native Advent Calendar 2018 - 17日目の記事です 最近Expoでアプリを書いているので、そこで使った小ネタを紹介 独自実装したモーダルの動き#reactnative #expo pic.twitter.com/bBKOtMKdvk— .あーる (@DotEarl) December 3, 2018 画面全体を覆うスタ…

ReactNative アップグレード対応 v0.52 -> v0.56

みんな大好き恒例のアップグレードをしたので、その時にハマった事のメモ 今回は v0.52.2 から v0.56.0 にアップグレードした 前回のアップグレードよりは楽だったけど、本体のバグらしき罠にだいぶはめられた ちなみに前回と同じく $ react-native-git-upgr…

react-native-firebaseでプッシュ通知を扱う

react-native-firebaseでプッシュ通知を扱う時のメモ github.com 実装 基本的な実装はドキュメントへ React Native Firebase - Simple Firebase integration for React Native 扱い方 プッシュ通知を押すとアプリが起動するが、そのパターンが3つある ① ア…

react-navigationでスクリーンの重なりを保持したまま深い階層に飛ぶ

小ネタ 良いタイトルが思いつかなかった react-navigationでいっきにnavigate()で2つStack詰む方法あるのかな?バックボタン押した時に戻る分も設定したくて— .あーる (@DotEarl) 2018年4月2日 プッシュ通知からのDeeplinkで特定の深い階層に飛ばしたい時、…

ReactNative アップグレード対応 v0.46 -> v0.52

最近、苦行のアップグレード対応をした RN v0.46からv0.52にアップグレードした時に色々エラーで引っかかったので なにを修正したかのメモをする $ react-native-git-upgrade はうまく動かなかったので使ってない 自力で差分をみてマージした 前提として、iO…

igniteで自分専用のボイラープレート環境を作る

この記事は React Native Advent Calendar 2017 16日目です。 こんにちは。Webエンジニアの@DotEarlです。 Togetterという会社で、自社アプリをReactNativeで開発しています。 目次 目次 モチベーション igniteとは igniteでプロジェクトを始める時 自分用の…

ReactNativeにStorybookを導入するまで

storybookはコンポーネント単位でサンドボックス開発できる開発環境 どんなコンポーネントが存在するか、どんな種類があるか、使い方は?など ドキュメントとしても機能するのであると便利 最近Webの方でよく使われてるようで、ReactNativeでも使える 導入 …

igniteでモダンなReactNative環境を楽々セットアップ

react-native init appでアプリを始めても最初はreduxやmiddlewareなど いつも決まって使うような環境は入っていない とりあえず試したいけど面倒くさいよ!って時はigniteコマンドを使うと 定番の環境、いわゆるボイラープレートをいい感じに構築してくれる…

ReactNativeのAsyncStorageをコンソールから直接操作する

前回の記事で導入したReact Native Debuggerを使うと AsyncStorageを直接操作することが出来る rskull.hateblo.jp AsyncStorageとは アプリ本体にデータを保存したい時に使えるkey-valueストア 永続化されるのでアプリを落としてもデータが保持される 実際に…

React Native Debuggerを使ってみる

React Nativeで開発をする際 redux を使用することが多いと思う そんな時に使うと開発が捗るのが React Native Debugger インストール github.com $ brew update && brew cask install react-native-debugger インストールが完了すると、アプリ一覧にアイコ…

ReactNativeでglamorous-nativeとstyled-componentsを使ってみた

ReactNativeでスタイルを書きやすくしてくれるライブラリがある styled-comopnentsはスター数が1万を超えの人気ライブラリ 主にウェブの方で使われてるがReactNativeにも対応してるっぽい glamorous-nativeは後発でstyled-componentsなどに影響を受けて出て…

クラッシュレポートからバグの原因を特定する - ReactNative

FabricのCrashlyticsを使ってユーザーがクラッシュした時のログを収集できる 収集したログからバグってる箇所を特定する方法の一つとしてメモ クラッシュレポートから探る Fabricの管理画面を開いてクラッシュレポートを見ると、こんな報告があった undefine…

ReactNativeでE2EテストをするDetoxをちょっとだけ触ってみた(iOS)

Detoxというライブラリを使ってE2Eテストを書いてみる github.com 前提 Mac brew xCode 8.2以上 node 7.2以上 準備 シミュレーターを動かすのに必要なのでインストールする $ brew tap facebook/fb $ export CODE_SIGNING_REQUIRED=NO && brew install fbsim…

バージョン指定でReactNativeのプロジェクトを始める

メモ $ react-native init App --version v0.46.0 運用してるプロジェクトで入れたモジュールがうまく動いてない時 同じバージョンの新規プロジェクトを作って一番素の状態で想定通り動くかテストしたい時に使う わりと最終手段だけど、問題の切り分けできて…

ReactNativeで開発中、Androidのビルドで64K問題のエラーが出てハマった

64K問題 ReactNativeに限った話ではないが Androidアプリでメソッド数が65536を超えるとビルドエラーになる問題のこと Androidエンジニアにとっては常識だと思うが、Webから入った人間からすると結構厄介だった 検索すると沢山ヒットする 分かりやすかった記…

ReactNativeでActionSheetを実装する - その②

この前書いたActionSheetの記事書いたけど、特定の状況下だと使えないじゃん!ってなることに気づいた rskull.hateblo.jp 駄目だった理由 iOSはネイティブの機能を使ってるのでどこで呼び出しても起動するけど Androidはネイティブの機能ではなく、モーダル…

ReactNativeにActionSheetを実装してみた

ActionSheetとは? この下から出てきてるやつ RN本体でサポートしてくれてはいるが、iOSの標準機能なので iOS用のコンポーネントになってる。 ActionSheetIOS うーん…同じコードで両方対応したいですね… react-native-action-sheet そんなときはコレ github.…

LayoutAnimation 使うと楽しい

ReactNativeで LayoutAnimation を使うと、要素が消えたり表示したりする時に 勝手にいい感じのアニメーションを付けてくれるから便利 import { LayoutAnimation, } from 'react-native'; ボタンを押すとメニューが出てくる仕様があったとして、それにアニメ…