How Can I Make This Custom Button Component Reusable Across Different Controls?

I have this custom component class that I apply to my React Native Buttons and it has the expected behavior of scaling in and out (adding animation to shrink and resize) which is t

Solution 1:

Try passing them as children of TouchableBounce

<TouchableBounce><CardView/></TouchableBounce>

In the TouchableBounce render them as

<TouchableWithoutFeedbackonPressIn={this.handlePressIn}onPressOut={this.handlePressOut}disabled={disabled}style={[styles.buttonContainer,style]}
  testID={testID || `button_${text}`}
><Animated.Viewstyle={[styles.button,
      disabled ? { opacity:0.5 } : {},
      { backgroundColor },
      buttonStyle,
      animatedStyle
    ]}
  >
    {this.props.children}//Here is the cardview that you have sent
  </Animated.View></TouchableWithoutFeedback>

Edit:

For clear understanding iam attaching a working demo Expo demo

and also the official docs React.Children