Как сделать кнопку со стилем неоморфизма с помощью React Native как для Android, так и для iPhone?

Question

После прочтения этой статьи о стиле neomorphsim я пытаюсь создать такой же эффект с помощью React Native, создав кнопку, которая выглядит как this :

На iPhone мне удалось воспроизвести кнопку в соответствии с приведенным ниже кодом, но границы и затенение не отображаются на Android. Как я могу преобразовать приведенный ниже стиль для работы с Android?

См. Код ниже и связанный :

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';


const App = () => {
  return (
    <View style={styles.background}>
      <View style={styles.button}>
      <View style={styles.dark_shadow}>
        <View style={styles.light_shadow}>
        </View>
      </View>
      </View>
    </View>
  )
}

export default App 


const main_background = "#EFEEEE"
const light_shadow = "#FFFFFF"
const dark_shadow = "#D1CDC7"
const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: main_background,
    alignItems: "center",
    justifyContent: "center"
  },
  button: {
    flexDirection: "row",
    height: 500,
    width: 500,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 20,
  },
  dark_shadow: {
      borderRadius: '50px',
      backgroundColor: main_background,
      shadowColor: dark_shadow,
      shadowRadius: "16",
      shadowOpacity: 0.5,
      shadowOffset: { width: "20px", height: "20px" },
      flex: .5
  },
  light_shadow: {
      borderRadius: '50px',
      backgroundColor: main_background,
      shadowColor: light_shadow,
      shadowRadius: "16",
      shadowOpacity: 0.5,
      shadowOffset: { width: "-20px", height: "-20px" },
      flex: .5
  }
});