Button did not round on applying borderRadius: '50%' in ios-CodePudding

In the android the same code rounds off the button properly. However in ios the button does not appear as rounded. Is percentage value not compatible to ios platform in react?

import { TouchableOpacity, Text } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <TouchableOpacity
        style={{
          width: 200,
          height: 200,
          borderRadius: '50%',
          backgroundColor: 'red',
        }}>
        <Text> Click Me</Text>
      </TouchableOpacity>
    );
  }
}

CodePudding user response：

You should do it like below

       <TouchableOpacity
        style={{
          width: 200,
          height: 200,
          borderRadius: 100,
          backgroundColor: 'red',
        }}>

CodePudding user response：

Try doing so :

import {TouchableOpacity, Text } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      < TouchableOpacity
        style={{
          width: 200,
          height: 200,
          borderRadius: 100,
          backgroundColor: 'red',
        }}>
        <Text> Click Me</Text>
      </TouchableOpacity >
    );
  }
}