Open2021/10/21にコメント追加1

TouchableNativeFeedbackとTouchableOpacityをTypeScriptでうまく使う

kenfdev 2021/10/21

AndroidだとTouchableNativeFeedback使いたいけど、iOSではTouchableOpacityを使いたいとき、JSだとそれほど困らないけど、TypeScriptでこだわると、どうやって型を定義したものかと思ってしまう。

答えは↓に載っている通り。
https://stackoverflow.com/a/60329511

ComponentTypeにTouchableOpacityPropsあるいはTouchableNativeFeedbackPropsを渡せるようにする。

import { ComponentType } from 'react';
import { Platform, TouchableOpacity, TouchableOpacityProps, TouchableNativeFeedback, TouchableNativeFeedbackProps, View, Text } from 'react-native';

const getCardContent = (message: string): JSX.Element => {
    const { placeInfo } = this.props;
    const TouchableComponent: ComponentType<TouchableOpacityProps | TouchableNativeFeedbackProps> = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;
    return (
        <View>
            <Text>{placeInfo.name}'s phone number:</Text>
            <TouchableComponent onPress={() => {}}>
                <Text>{placeInfo.phoneNumber}</Text>
            </TouchableComponent>
        </View>
    );
}