Expo SDK48を触ってみる（Expo ImageやExpo Routerなど）

SDK48が公開されたので、ちょっと触ってみます。

https://blog.expo.dev/expo-sdk-48-ccb8302e231

# Flexbox gap

React Nativeのバージョンが0.71になったのでgapが使えるようになりました。

https://developer.mozilla.org/ja/docs/Web/CSS/gap

```App.tsx
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>A</Text>
      </View>
      <View style={styles.box}>
        <Text>B</Text>
      </View>
      <View style={styles.box}>
        <Text>C</Text>
      </View>
      <View style={styles.box}>
        <Text>D</Text>
      </View>
      <View style={styles.box}>
        <Text>E</Text>
      </View>
      <View style={styles.box}>
        <Text>F</Text>
      </View>
      <View style={styles.box}>
        <Text>G</Text>
      </View>
      <View style={styles.box}>
        <Text>H</Text>
      </View>
      <View style={styles.box}>
        <Text>I</Text>
      </View>
      <View style={styles.box}>
        <Text>J</Text>
      </View>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    backgroundColor: "gray",
    alignItems: "center",
    justifyContent: "center",
    gap: 20, // ← ここでgapを指定
  },
  box: {
    backgroundColor: "white",
    width: 150,
    height: 150,
    justifyContent: "center",
    alignItems: "center",
  },
});

```

ちゃんとgapが効きました

<img width="300" alt="gapを指定" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/7fa23585-9cb0-994f-1416-c7a55640853c.png">

# Expo Image

https://docs.expo.dev/versions/latest/sdk/image/

公式ではこのように説明されています（DeepL翻訳）
とにかくパフォーマンスが良さ王です

> - スピード重視の設計
> - 多くの画像形式をサポート（アニメーションを含む）
> - ディスクとメモリのキャッシング
> - 画像のプレースホルダーをコンパクトに表現するblurhashをサポートします。
> - ソースが変わったときに画像間をトランジションさせる（もうチラつかない！）。
> - CSSのobject-fitとobject-positionプロパティを実装しています
> - 性能の高いSDWebImageとGlideをアンダーグラウンドで使用する

ChatGPTにも聞いてみました。なるほどです

<img width="600" alt="ChatGPTの回答" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/359c6f9a-8d77-f0a8-1fc8-5e3ec8141701.png">

サンプルコードを見る感じ、既存のReact NativeのImageと同じ感覚で使えそうでした
便利そうなpropsがたくさんありますが、特に`placeholder`と`transition`の組み合わせは便利そうです

```App.tsx
import { Image } from "expo-image";
import { StyleSheet, View } from "react-native";

const blurhash =
  "|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[";

export default function App() {![simulator_screenshot_20C5DAE3-7701-48CB-96CE-DDA95DEC5E07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/b43ccff8-84e8-5f2f-c7c5-27db48869667.png)

  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source='https://picsum.photos/seed/696/3000/2000'
        placeholder={blurhash} // イメージの読み込み中に代わりに表示するイメージ
        contentFit='cover'
        transition={{ // イメージの切り替え時のdurationやアニメーションを指定
          duration: 5000,
          effect: "curl-up", // この動き面白い
          timing: "ease-out",
        }}
      />
    </View>
  );
}
```

<img width="300" alt="ChatGPTの回答" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/1ed437e2-621f-afca-b8cb-ee5bbd4d552d.gif">

# Expo Router

ベータ版は公開されていましたが、SDK48のタイミングでv1リリースとなりました
Next.jsのようなファイルベースのルーティングができるということで、こちらもちょっと触ってみます

https://blog.expo.dev/announcing-expo-router-v1-1d97d7833605

https://expo.github.io/router/docs/


expo-routerのセットアップを行ったプロジェクトを作成します
```
npx create-expo-app@latest -e with-router
```
`App.jsx`が存在しないこのようなプロジェクトが作成されました
index.jsがエントリポイントになるようです

<img width="400" alt="ChatGPTの回答" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/100c9295-cb9d-087d-cdd2-c176240f6e7c.png">

ひとまずこの状態で立ち上げてみます
```
yarn && yarn start
```

かっこいいイメージとともにappディレクトリの作成を求められました
<img width="300" alt="ChatGPTの回答" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/216cd8f7-8cb8-5c72-d84e-b65ad70dacfc.png">

[Routing](https://expo.github.io/router/docs/features/routing)
> File-based routing enables URLs for every page in your app. All routes must be created within the root app/ directory. Within this directory, you can create routes by defining files using the route name.

↑すべてのルートはappディレクトリに作成する必要があるようです
ということでこの[Expo Router Guides](https://expo.github.io/router/docs/category/guides)を参考に以下のルーティングを作ってみます。
- タブを2つ作成
- それぞれのタブ内にstackを作成

![CleanShot 2023-03-05 at 21.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/4c4332bc-1771-4f23-dfee-63caa4fffe36.png)

実際に動かすとこんな感じです
ちゃんとナビゲーションできてます

<img width="300" alt="ChatGPTの回答" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631600/68370528-b92a-ec32-113a-1faae2006b26.gif">

https://github.com/centerfield77/sdk48-prac

# おわりに
ちょっと触ってみてバージョンを上げるモチベが少し上がりました
ちなみにExpo Routerはv2のロードマップも公開されていました。楽しみですね

https://github.com/expo/router/discussions/309