React Native HeroFabLayout

App.js

/**
 * @flow
 */

import React, { Component } from "react";
import { View } from "react-native";

type State = {
  heroLayout: { height: number, width: number },
  buttonLayout: { height: number, width: number }
};

export default class App extends Component<void, {}, State> {
  state = {
    heroLayout: { height: 0, width: 0 },
    buttonLayout: { height: 0, width: 0 }
  };

  generateElevationStyles = (level: number) => {
    let elevation = {};

    switch (level) {
      case 1:
        return {
          elevation: 1,
          shadowColor: "black",
          shadowOpacity: 0.12,
          shadowRadius: 0.8,
          shadowOffset: {
            height: 0.8
          }
        };
      case 2:
        return {
          shadowOpacity: 0.18,
          elevation: 2,
          shadowColor: "black",
          shadowRadius: 0.9,
          shadowOffset: {
            height: 1
          }
        };
      case 3:
        return {
          shadowOpacity: 0.18,
          elevation: 3,
          shadowRadius: 1.4,
          shadowColor: "black",
          shadowOffset: {
            height: 2
          }
        };
      case 4:
        return {
          elevation: 4,
          shadowOpacity: 0.18,
          shadowColor: "black",
          shadowRadius: 2.5,
          shadowOffset: {
            height: 2.8
          }
        };
      case 5:
        return {
          shadowColor: "black",
          shadowOpacity: 0.24,
          shadowRadius: 3.2,
          elevation: 5,
          shadowOffset: {
            height: 4
          }
        };
      default:
        return {};
    }
  };

  render() {
    const { heroLayout, buttonLayout } = this.state;
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#F5FCFF"
        }}
      >
        <View
          onLayout={({ nativeEvent: { layout: { width, height } } }) => {
            this.setState((prevState: State) => ({
              ...prevState,
              heroLayout: { height, width }
            }));
          }}
          style={{
            ...this.generateElevationStyles(4),
            width: "100%",
            height: "40%",
            backgroundColor: "palevioletred",
            marginBottom: 24
          }}
        />
        <View
          onLayout={({ nativeEvent: { layout: { width, height } } }) => {
            this.setState((prevState: State) => ({
              ...prevState,
              buttonLayout: { height, width }
            }));
          }}
          style={{
            ...this.generateElevationStyles(5),
            height: 56,
            borderRadius: buttonLayout.height / 2,
            width: 56,
            backgroundColor: "papayawhip",
            position: "absolute",
            top: heroLayout.height - buttonLayout.height / 2,
            right: 16,
            zIndex: 3
          }}
        />
      </View>
    );
  }
}