gistfile1.js

const React = require('react');
const {render, Box, Text, measureElement} = require('..');

const Scroller = ({ width, height, children, ...props }) => {
  const [scrollX, setScrollX] = React.useState(0);
  const [scrollXDir, setScrollXDir] = React.useState(1);
  const [scrollY, setScrollY] = React.useState(0);
  const [scrollYDir, setScrollYDir] = React.useState(1);
  
  React.useEffect(() => {
    if(scrollX + scrollXDir < -5 || scrollX + scrollXDir > 5){
      setScrollXDir(scrollXDir * -1);
      return;
    }
    
    setTimeout(() => setScrollX(scrollX + scrollXDir), 100);
  }, [scrollX, scrollXDir])
  
  React.useEffect(() => {
    if(scrollY + scrollYDir < -7 || scrollY + scrollYDir > 7){
      setScrollYDir(scrollYDir * -1);
      return;
    }
    
    setTimeout(() => setScrollY(scrollY + scrollYDir), 100);
  }, [scrollY, scrollYDir])

  return (
    <Box overflow="hidden" width={width} height={height} {...props}>
      <Box flexDirection="column" marginTop={-scrollY} marginLeft={-scrollX} flexGrow={0} flexShrink={0}>
        {children}
      </Box>
    </Box>
  )
};

const AmazeBoxRenderer = ({ children }) => {
  const ref = React.useRef();
  const [height, setHeight] = React.useState(null);
  const [width, setWidth] = React.useState(null);

  React.useEffect(() => {
    const {width, height} = measureElement(ref.current)
    setHeight(height);
    setWidth(width);
    console.log(width, height);
  }, []);

  return (
    height !== null && width !== null ? (
      <Scroller height={height} width={width}>
        <Box height={height} width={width}>
          {children}
        </Box> 
      </Scroller>
    ) : (
      <Box ref={ref}>
        {children}
      </Box>
    )
  )
}

const Main = () => {
  return (
    <AmazeBoxRenderer>
      <Box width={10} height={5} borderColor="white" borderStyle="single" flexShrink={0}>
        <Text>box 1</Text>
      </Box>
      <Box height={10} borderColor="white" borderStyle="single" flexShrink={0}>
        <Text>box 2</Text>
      </Box>
    </AmazeBoxRenderer>
  );
}

render(<Main />);