Dashed border style not working in react native paper button

Issue

I'm trying to create a button for a document picker container, and I want the button to have a dashed border. However, I'm facing an issue where it seems that the properties of the paper button are cutting off the border I have. What should I do?

<Text>Select Document:</Text>
   <Button
        mode="text"
        icon={"plus"}
        onPress={pickDocument}
        contentStyle={{
          height: 50,
          borderWidth: 1, 
          borderStyle: "dashed",
          borderColor:'#060d60'
        }}
    >
        Select Document{" "} 
  </Button>

This is what my code looks like

Solution

Add borderRadius:50 same as height value

Example:

import {View, Text} from 'react-native';
import {Button} from 'react-native-paper';
const ButtonView = () => {
  const buttonHeight = 50
  return (
    <View style={{flex:1,justifyContent:'center',alignContent:'center',width:'90%',alignSelf:'center'}}>
    <Text>Select Document:</Text>
    <Button
      mode="text"
      icon={"plus"}
      onPress={()=>{}}
      contentStyle={{
        height: buttonHeight,
        borderWidth: 1,
        borderRadius: buttonHeight,
        borderStyle: "dashed",
        borderColor:'#060d60'
      }}>
      Select Document{" "}
    </Button>
    </View>
  );
};
export default ButtonView;

Answered By - Shivo'ham