React Native Paperで困ったところ ①List.Accordionをカスタムしたい

やりたき事

• 三角形を押下した時は開閉
• それ以外の部分を押下した時は別画面に遷移

元々のコード

import { List } from "react-native-paper";
export const Accordion = () => {
    return (
        <List.Accordion
            title="Summary"
        >
            <List.Item title="Detail 1" />
            <List.Item title="Detail 2" />
        </List.Accordion>
    );
}

修正方針

List.Accordionを使わない。開閉アイコンだけを使うことにする。

修正後コード

import { List } from "react-native-paper";
import { TouchableWithoutFeedback } from "react-native";
export const Accordion = () => {
    const [expanded, setExpanded] = useState(false);
    const handlePress = () =>{/* タイトルクリック時のアクション */}
    return (
        // Summary
         <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TouchableWithoutFeedback onPress={handlePress}>
              <Text>Summary</Text>
          </TouchableWithoutFeedback>

          // 開閉アイコン
          <TouchableWithoutFeedback onPress={() => setExpanded(!expanded)}>
            <View>
              <List.Icon icon={expanded ? "chevron-up" : "chevron-down"} />
            </View>
          </TouchableWithoutFeedback>
        </View>

        // Details
        {expanded && (
            <List.Item title="Detail 1" />
            <List.Item title="Detail 2" />
        )}
    );
}

メモ

• タッチ時に視覚的な変化をつけたいならTouchableWithourFeedbackじゃないのを使う

その他

僕がもっとReactに詳しければ、最高なんですが