ReactNativeでstyled-componentsを使ったbox-shadowの正しい設定方法: 3つの例で完全解説

ReactNativeでスタイリングを行う際、styled-componentsを使用すると、簡潔に美しいデザインが作れることが多いです。しかし、box-shadowの設定は少しトリッキーな部分があります。

この記事では、ReactNativeプロジェクトでstyled-componentsを使用してbox-shadowを設定する方法を、3つの例（2つの失敗例と1つの成功例）を通して解説します。

目次

1.失敗例1: 一般的なbox-shadowの指定
2. 失敗例2: shadow-offsetの誤った書き方
3. 成功例: 正しいshadow-offsetの書き方
4. まとめ

失敗例1: 一般的なbox-shadowの指定

ReactNativeでは一般的なCSSのようにbox-shadowを直接指定することができません。

import styled from 'styled-components/native';

export const Container = styled.View`
  width: 150px;
  height: 52px;
  border-radius: 26px;
  backgroundColor: "#FFFFFF";

  //shadow
  box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.16);
`;

このように書いても、シャドウは反映されません。

失敗例2: shadow-offsetの誤った書き方

ReactNativeでは、shadow-color, shadow-opacity, shadow-radius, shadow-offsetなどのプロパティを使用してシャドウを設定します。しかし、次のようにshadow-offsetをオブジェクトで指定すると、反映されません。

import styled from 'styled-components/native';
import { Platform } from 'react-native';

export const Container = styled.View`
  width: 150px;
  height: 52px;
  border-radius: 26px;
  backgroundColor: "#FFFFFF";

  //shadow
  shadow-color: "#000000";
  shadow-opacity: 0.16;
  shadow-radius: 12px;
  shadow-offset: {
    width: 2px;
    height: 8px;
  };
  ${Platform.OS === 'android' && `elevation: 6;`}
`;

成功例: 正しいshadow-offsetの書き方

正しいshadow-offsetの書き方は次のようになります。

import styled from 'styled-components/native';
import { Platform } from 'react-native';

export const Container = styled.View`
  width: 150px;
  height: 52px;
  border-radius: 26px;
  backgroundColor: "#FFFFFF";

  //shadow
  shadow-color: "#000000";
  shadow-opacity: 0.16;
  shadow-radius: 12px;
  shadow-offset: 2px 8px;
  ${Platform.OS === 'android' && `elevation: 6;`}
`;

このように指定すると、シャドウが正しく反映されます。

まとめ

ReactNativeでstyled-componentsを使用してbox-shadowを指定する際は、shadow-offsetの書き方に注意が必要です。正しい書き方をマスターすることで、美しいシャドウ効果をアプリに追加できます。この記事が、あなたの開発をスムーズに進める助けになれば幸いです。