React NativeでスタイリッシュなButton Groupsを作る

目標

コード

improt type { FC } from "react";

type ButtonGroupProps<P = unknown> = {
  items: {
    label: string;
    value: P;
  }[];
  value: P;
  onChange: (value: P) => void;
};

const ButtonGroup: FC<ButtonGroupProps> = ({ items, value, onChange }) => {
  return (
    <View style={style.wrapper}>
      {items.map((item) => (
        <TouchableOpacity
          key={item.label + Math.random()}
          style={[style.item, value === item.value ? style.itemActive : {}]}
          disabled={value === item.value}
          onPress={() => onChange?.(item.value)}
        >
          <Text>
            {item.label}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const style = StyleSheet.create({
  wrapper: {
    width: '100%',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#F2F2F2",
    padding: 5,
    borderRadius: 1000,
  },
  item: {
    flex: 1,
    width: '100%',
    borderRadius: 1000,
    padding: 10,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  itemActive: {
    backgroundColor: "#FFF",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: isIos() ? 1 : 2,
    },
    shadowOpacity: Platform.OS === 'ios' ? 0.2 : 0.3,
    shadowRadius: 3,
    elevation: 1,
  },
});

ReactNativeでのアニメーションはまだ経験してないので、アニメーションを追加できたら記事を更新します🙇🏻‍♂️