FlatListとセーフエリアの表示を考える - OTOBANK Engineering Blog
こんにちは、アプリ開発担当のエモトです。田舎からリモートワークで働いているのですが、どうも家のインターネット回線が不安定。今年前半の緊急事態宣言でリモートワークが広まった時期から明白に不安定になりだし、騙し騙し使ってましたが、流石に支障が出るため、ネットワーク環境の更新を計画中です。これを機に、IPoEで本当のインターネットを始めたい。 私の React Native 開発あるあるの１つとして、実装が終わったと安堵して確認したら、セーフエリア対応が不十分だったことがしばしばあります。ネイティブ開発なら勝手に動いていたことを忘れてしまい、後で SafeAreaView タグで囲って修正します。 今回、FlatList でセーフエリア対応したときに気づいたこと、その対応方法を紹介したいと思います。なお、以降に提示するコード例は簡易的にしています。 単純に以下のコードのように FlatList
React Native の ScrollView でスクロール時に child を上部に貼り付けたい - OTOBANK Engineering Blog
こんにちは、アプリ開発担当のエモトです。本業は稲作で、合間に横スクロールのダンジョン攻略や、アプリ開発を行っています。 React Native で画面を作る時、ScrollView を利用する方は多いと思います。その画面でスクロールするとき、ある child だけ上部に固定させたいというシーンが出てくるかもしれません。iOS で言うと UITableView におけるセクションヘッダーに近い動きです。さて、それを React Native で実装したい場合、どうすれば良いでしょうか？ 上部固定させたい まず最初にネイティブ開発で考えると、iOS の UIScrollView にはそのような機能がないので、UITableView のセクションヘッダーをカスタマイズする方法が考えられます。 それに従うと React Native なら ScrollView から SectionList に置
Reactのkey propに配列のindexを使うことが良くない理由
始め Reactのmapを使う時、keyエラーをなくすためindexを使ったことがあります。しかし最近それがanti-patternだということを知りましたので、その理由をまとめました。 1. keyの存在意義 1-1. keyってなんだっけ そういえばそもそもkeyって何で必要だったけ…？と、ふいと思ってしまいました。何となくは知ってますが、明確にしたいのでこの部分から始めましょう。 まずはこのサンプルコードをご覧ください。 export default function App() { let fruits = [{ name: "apple" }, { name: "banana" }, { name: "pear" }]; return ( <div className="App"> {fruits.map((fruit) => ( <p>{fruit.name}</p> ))}
Expo Router
const Stack = createNativeStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } // 公式ドキュメントより 自分はこの記法がかなり苦手で、一々遷移するためのパス管理アプリを用意するのが面倒に感じていました。 そこでNextjsのファイルの構造がそのまま遷移先になるのがとても感動し、Nextjsのル
【RN Update 2023年5月】Expo Router v2発表 他
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、今月のReact Nativeに関連するニュースを紹介します。 目次 ライブラリ情報 App.js Conference 2023 React Native関連情報 Blueskyアプリのオープンソース化 ライブラリ情報 App.js Conference 2023 React Nativeに関するカンファレンスのApp.js Conference 2023が開催されました！ このカンファレンス内でライブラリに関する情報が公開されていたので、紹介します。 Write Once, Route Everywhere: File System-based Navigation for Native Apps Expo Router V2が発表されました！ V2では、WebアプリのリンクからM
React Native で「ユーザが画面を見る」イベントを発火する
はじめに タイトル見て「ユーザが画面を見るイベントってなんぞや」ってなると思います。すみません、語彙力がなくてこれ以上説明できる文章が思いつかなかったです^_^… １つ例をあげてみましょう。皆さんスマホでYoutube見てるとき動画リストをスクロールしてたら動画が勝手に再生されたこと、ありませんか？ 動画の再生ボタン押してないのに不思議だなーと思いましたね。多分ユーザが動画リストをスクロールしてるとき「このセクションを見た」と判断したら再生させる処理をしてるのではないかなと推測しています。 今回話す「ユーザーが画面を見る」イベントもこれと同じです。もうちょっと正確な定義をすると「リストでレンダリングしてる各要素が画面に表示されると発火するイベント」でしょうか。 1. FlatList 本題に入る前に React Native のリストレンダリングについて軽く説明したいと思います。 ウェブの
穂高駅前 安曇野ブルワリーBrewPubで出来たてのビールと安曇野産食材たっぷりのもちもちピザ - 温泉ブログ 山と温泉のきろく
2022年2月オープン！ブルワリー併設のピザレストランで下山後の一杯 燕岳や常念岳など、北アルプスの山々への玄関口となる大糸線の穂高駅。 コロナ禍前は毎年のように登っていた大好きな山、燕岳に登るためにひさびさに穂高駅に降り立ったところ、気になるお店を発見しました。 下山後に立ち寄ってみると、店内で醸造されたクラフトビールと安曇野産食材がふんだんに使われたもちもちのピザを味わえる素敵なお店でした。 2022年2月にオープンしたばかりの新しいお店だそうですが、これから本格的な登山シーズンが始まったら、人気店になるだろうなと思います。2023年5月にお邪魔した際のメニューや、いただいたものについてレポートしたいと思います。 ◆ お知らせ ◆ 2020年10月に著書が発売となりました。 ひとり酒、ひとり温泉、ひとり山 [ 月山 もも ] posted with カエレバ 楽天市場 Amazon Y
Railsで作るBFFの功罪
This document discusses using Rails as a backend for front (BFF) layer in a microservices architecture. It describes how Rails was used to build the BFF layer for an e-commerce site called HPB, acting as an API gateway between the client and various backend services. Key points discussed include using Puma to improve throughput, caching APIs to reduce response time, and implementing an API gateway
SPA開発におけるWeb API設計入門（エンドポイント編） | Hypertext Candy
この記事では、シングルページアプリケーション開発での Web API 設計について書いていきます。 ここで言う「エンドポイント」とは、HTTP メソッドと URL の組み合わせです。また、本記事で扱うのは、いわゆる REST API と呼ばれるタイプの Web API です。最近は GraphQL が台頭してきていますが、まだ現場では REST タイプの API を扱うことがほとんどでしょう。 API 設計は大きく2つの側面があります。エンドポイント定義と、リクエストおよびレスポンスメッセージの JSON 定義です。本記事では、特にエンドポイント定義の設計について取りあげます。なぜなら、どちらかというと、エンドポイント定義のほうが、これから SPA 開発にチャレンジする方にとって、難しさがあるように感じるからです。 Web API とは 何を API にするのか まず、そもそも何を API
Webアプリケーションで、APIが画面と結びつきすぎる問題を解決するには - Qiita
概要 Webアプリケーションを開発しているとしばしば、APIサーバ側がクライアントのことを考えたレスポンスを返すことを意識した結果、いろいろと辛い状態になることがある。このような状態をいかに解消していくかを考察していく。 本稿で想定するWebアプリケーション サーバサイドはWeb API (大抵はHTTP, JSON)であり、iOSアプリ、Androidアプリ、ブラウザアプリ(Single Page Application=SPA)があるような、一般的なWebアプリケーションを考える。 開発の流れは、まず仕様が提案され、それをもとに、iOS/Android/Browserでの画面仕様が作られる。それを見ながら、アプリのエンジニアとサーバサイドのエンジニアが打ち合わせ、APIのエンドポイント・リクエスト・レスポンスの型を定め、その後お互いに開発を開始する。 Smart UI アンチパターン
菓子メーカー「シャトレーゼ」 甲府の老舗ホテル事業 取得へ | NHK
新型コロナウイルスの感染拡大の影響などで経営が行き詰まった山梨県甲府市にある老舗ホテルの事業を、菓子メーカー「シャトレーゼ」の持ち株会社が取得して再建を目指すことになりました。 これは31日、「シャトレーゼホールディングス」が発表しました。 それによりますと、「シャトレーゼホールディングス」は甲府市中心部にある「ホテル談露館」の運営会社が設立した別会社のすべての株式を6月1日付けで取得します。 株式の取得にかかった金額は非公表としています。 「ホテル談露館」は明治20年創業の老舗ホテルで、宿泊のほか宴会や結婚式場の運営などを手がけてきましたが、新型コロナの影響で業績が悪化し、経営が行き詰まっていました。 ホテルの名称は「シャトレーゼホテル 談露館」に変更し、「シャトレーゼホールディングス」が完全子会社化して経営再建を目指すということです。 パートやアルバイトを含む従業員およそ50人は、引き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating youtube shorts component in react-native
React Native — Infinite Scroll Pagination with FlatList
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割 / JJUG2019Spring