Add icon to border button in React native - css

Question

I'm a newbie to react-native and when I learned that there are many CSS properties that are not in the react-native stylesheet like gap, grid, etc.
I am in trouble regarding this new issue and haven't found any answer anywhere to this.
I hope stack overflow will surely help me. Thanks in advance!
Goal: To create a button with an icon on its border.
Here is my code:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react';
//styles
import CommonStyles from '../constants/CommonStyles';
//icons
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
const App = () => {
return (
<View style={styles.copyButton}>
<Text style={{fontSize:36, fontWeight:'800'}}>Copy</Text>
<Text style={{borderRadius:50, backgroundColor:"#fff", padding: 10}}>
<MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />
</Text>
</View>
)
}
export default App;
const styles = StyleSheet.create({
copyButton: {
backgroundColor: '#BFBFBF',
borderRadius: 5,
marginLeft: 72,
marginRight: 72,
marginTop: 40,
padding: 32,
position: 'relative',
flexDirection: 'row'
},
copyIcon: {
// backgroundColor: '#fff',
// padding:10,
// borderRadius:50
position: 'absolute',
transform: [{translateX: 50}],
transform: [{translateY: 50}],
right: 0, top: '50%',
}
})
Expected Output

Answer 1

here you can check sample
<View style={styles.copyButton}>
<Text style={styles.btnText}>Copy</Text>
<View style={styles.btnRelative}>
<MaterialIcon name={"file-copy"} size={30} style={styles.copyIcon} />
</View>
</View>
const styles = StyleSheet.create({
copyButton: {
backgroundColor: '#BFBFBF',
borderRadius: 5,
padding: 32,
flexDirection: 'row',
width: '40%',
},
copyIcon: {
position: 'absolute',
transform: [{translateX: 50}],
right: 0,
top: '50%',
},
btnText: {fontSize: 36, fontWeight: '800'},
btnRelative: {
borderRadius: 50,
backgroundColor: '#fff',
padding: 10,
position: 'absolute',
end: -25,
alignSelf: 'center',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
},
});