[備忘録]React Nativeで動的にスタイルを当てるヘルパーを作った

きっかけ

React然り、React Nativeを使っているときに動的にスタイルを当てたいことが多々ある。
Emotion や Styled Components では、クラスを生成するためにpropsを引数とした関数を渡すことができる。
それと同じことがしたいと思いヘルパー関数を作成した。

ただ、この記事を書いているときに、React NativeでもEmotionが使えることがわかったので、
そっちを使うといいと思う

とりあえずコードだけ

（メモ書きなので型の指定が緩いです。時間があるときに直します。）

ヘルパー関数

helper.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useMemo } from "react"
import { StyleProp, StyleSheet } from "react-native"

type CreateStylePropFunc = (...args: Array<any>) => StyleProp<any>

// TODO: 使う際にインテリセンスが有効になるように型をもっと細かくする
export const createUseStyles = (createStyles: CreateStylePropFunc) => {
    return (...args: Array<any>) => {
        return useMemo(() => StyleSheet.create(createStyles(...args)), [...args])
    }
}

使い方

sample.tsx

import React, { useCallback, useMemo } from "react"
import { Image, StyleSheet } from "react-native"
import { createUseStyles } from "./helper.ts"

type ThumbnailProps = {
    src?: string
    size?: number
}

export const Thumbnail: React.FC<ThumbnailProps> = ({src, size=56}) => {
    const styles = useStyles(size)

    return (
        <Image source={{uri: src}} style={styles.thumbnail} />
    )
}

const useStyles = createUseStyles((size: number) => ({
    thumbnail: {
        width: size,
        height: size,
        borderRadius: 14,
        marginRight: 10,
    },
}))