Neumorphism in React Native

react-native-neumorphism.js

import React, { Component } from 'react';
import { Text,  ScrollView, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.roundedButtonContainer}>
          <View style={styles.roundedButton}>
            <Text style={styles.text}>f</Text>
          </View>
        </View>
        <View style={styles.roundedButtonContainer}>
          <View style={styles.roundedButton}>
            <Text style={styles.text}>t</Text>
          </View>
        </View>
        <View style={styles.roundedButtonContainer}>
          <View style={styles.roundedButton}>
            <Text style={styles.text}>i</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
    backgroundColor: '#252525',
  },
  roundedButtonContainer: {
    height: 80,
    width: 80,
    backgroundColor: '#252525',
    shadowColor: '#181818',
    shadowOpacity:0.5,
    shadowRadius: 3,
    borderRadius: 5,
    shadowOffset: {
      height: 3,
      width: 3,
    },
    border: 1,
    marginBottom: 20,
  },
  roundedButton: {
    height: 80,
    width: 80,
    shadowColor: '#2b2b2b',
    shadowOpacity:0.7,
    shadowRadius: 3,
    borderRadius: 5,
    shadowOffset: {
      height: -3,
      width: -3,
    },
    border: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 36,
  }
});