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

<TouchableWithoutFeedback
  onPressIn={this.handlePressIn}
  onPressOut={this.handlePressOut}
  disabled={disabled}
  style={[styles.buttonContainer, style]}
  testID={testID || `button_${text}`}
>
  <Animated.View
    style={[
      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