[WIP] react-sketchapp responsive breakpoints

react-sketchapp-breakpoints-app.js

import { Page, Artboard, View, Text, useWindowDimensions } from 'react-sketchapp';

const breakpoints = [360, 768, 1024];

const getBreakpoint = (width) => {
  for (let i = 0; i < breakpoints.length - 1; i += 1) {
    if (width <= breakpoints[i]) {
      return i;
    }
  }

  return breakpoints.length - 1;
}

const useBreakpoint = width => {
  const breakpoint = getBreakpoint(width);

  return (styles) => breakpoint > (styles.length - 1)
    ? styles[styles.length - 1]
    : styles[breakpoint];
}

const HomePage = () => {
  const { height, width } = useWindowDimensions();
  const getStyle = useBreakpoint(width);

  return (
    <View style={{ flex: 1 }}>
      <View style={{ height, width }}>
        <Text>Hello World</Text>
      </View>
      {/* Return flexDirection column on mobile, and row on tablet or desktop*/}
      <View style={{ height, width, backgroundColor: 'blue', flexDirection: getStyle(['column', 'row']) }}>
        <View style={{ backgroundColor: '#ccc', borderWidth: 1, borderColor: '#888' }}>
          <Text>
            Item 1
          </Text>
        </View>
        <View style={{ backgroundColor: '#ccc', borderWidth: 1, borderColor: '#888' }}>
          <Text>
            Item 2
          </Text>
        </View>
      </View>
    </View>
  );
};

const devices = [{
  name: 'Mobile',
  width: 360,
  height: 640,
}, {
  name: 'Tablet',
  width: 768
  height: 1024,
}];

render(
  <Page style={{ flexDirection: 'row' }}>
    {devices.map(viewport => (
      <Artboard viewport={viewport}>
        <HomePage />
      </Artboard>
    ))}
  </Page>,
);