import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
const ContainerSlot = ({
  children
}) => {
  const [, setBottomCenterHeight] = useState(0);
  const [bottomOffset, setBottomOffset] = useState(0);
  const handleBottomCenterLayout = event => {
    const {
      height
    } = event.nativeEvent.layout;
    setBottomCenterHeight(height);
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.bottomLeft,
    onLayout: event => setBottomOffset(event.nativeEvent.layout.height)
  }, children.bottomLeft), /*#__PURE__*/React.createElement(View, {
    style: styles.bottomRight
  }, children.bottomRight), /*#__PURE__*/React.createElement(View, {
    style: [styles.bottomCenter, {
      bottom: bottomOffset
    }],
    onLayout: handleBottomCenterLayout
  }, children.bottomCenter));
};
const App = () => {
  return /*#__PURE__*/React.createElement(ContainerSlot, null, {
    bottomLeft: /*#__PURE__*/React.createElement(View, {
      style: styles.item
    }, "Bottom Left"),
    bottomRight: /*#__PURE__*/React.createElement(View, {
      style: styles.item
    }, "Bottom Right"),
    bottomCenter: /*#__PURE__*/React.createElement(View, {
      style: styles.item
    }, "Bottom Center")
  });
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0
  },
  bottomLeft: {
    position: 'absolute',
    left: 0,
    bottom: 0
  },
  bottomRight: {
    position: 'absolute',
    right: 0,
    bottom: 0
  },
  bottomCenter: {
    position: 'absolute',
    left: '50%',
    transform: [{
      translateX: -50
    }],
    justifyContent: 'center',
    alignItems: 'center'
  },
  item: {
    padding: 10,
    backgroundColor: 'lightblue',
    borderRadius: 5
  }
});
export default App;
//# sourceMappingURL=demo.js.map