React Native Swipeable with borderRadius

Question

image of how the view looks

I'm Trying to Extend the delete button a little bit so the background colour goes into the main bit, making it look flush. Swipeable swipes all the way to the end of the width of the delete button, not allowing it to look flush.

How do I remedy this?

            <Swipeable
              key={index}
              //overshootRight={false}
              ref={(swipeable) => {
                if (swipeable && resetSwipeable) {
                  swipeable.reset();
                  setResetSwipeable(false);
                }
              }}
              renderRightActions={(progress, dragX) => 
                const trans = dragX.interpolate({
                  inputRange: [-100, 0],
                  outputRange: [1, 0],
                  extrapolate: 'clamp', // Ensure the value stays within the specified range
                });
                
                return (
                  <TouchableOpacity
                    onPress={() => deleteWorkout(index)}
                    style={[styles.deleteButton, { transform: [{ translateX: trans }] }]}
                  >
                    <Animated.Text style={[styles.deleteButtonText]}>Delete</Animated.Text>
                  </TouchableOpacity>
                );
              }}
            >


 deleteButton: {
    backgroundColor: COLORS.danger_400,
    justifyContent: 'center',
    alignItems: 'flex-end',
    //width: "24%",
    marginBottom: 10,
    borderBottomRightRadius: 10,
    borderTopRightRadius: 10,
  },
  deleteButtonText: {
    color: COLORS.white,
    ...FONTS.h4_bold,
    padding: 20,
  },

I've Tried playing around with the CSS and looking for documentation

Answer 1

You can adjust the width of the delete button

deleteButton: {
  backgroundColor: COLORS.danger_400,
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%', // Set the width to 100% to make it flush with the main content
  marginBottom: 10,
  borderBottomRightRadius: 10,
  borderTopRightRadius: 10,
  borderBottomLeftRadius: 0, // Remove the left border radius
  borderTopLeftRadius: 0,
},
deleteButtonText: {
  color: COLORS.white,
  ...FONTS.h4_bold,
  padding: 20,
},