react-native#ScaledSize TypeScript Examples

The following examples show how to use react-native#ScaledSize. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useWindowDimensions.tsx    From nlw2-proffy with MIT License 6 votes vote down vote up 
// This is similar to the new useWindowDimensions hook in react-native
// However, we have a custom implementation to support older RN versions
export default function useWindowDimensions() {
  const [dimensions, setDimensions] = React.useState(() => {
    // `height` and `width` maybe undefined during SSR, so we initialize them
    const { height = 0, width = 0 } = Dimensions.get('window');

    return { height, width };
  });

  React.useEffect(() => {
    const onChange = ({ window }: { window: ScaledSize }) => {
      const { width, height } = window;

      setDimensions((d) => {
        if (width === d.width && height === d.height) {
          return d;
        }

        return { width, height };
      });
    };

    // We might have missed an update before the listener was added
    // So make sure to update the dimensions
    onChange({ window: Dimensions.get('window') });

    Dimensions.addEventListener('change', onChange);

    return () => Dimensions.addEventListener('change', onChange);
  }, []);

  return dimensions;
}
Example #2
Source File: layout.ts    From iotc-cpm-sample with MIT License 6 votes vote down vote up 
export function useScreenDimensions() {
  const [screenData, setScreenData] = useState(Dimensions.get('screen'));
  const [orientation, setOrientation] = useState<Orientation>(
    getOrientation(screenData.width, screenData.height),
  );

  const onChange = useCallback(
    (result: {window: ScaledSize; screen: ScaledSize}) => {
      setScreenData(result.screen);
      setOrientation(getOrientation(result.screen.width, result.screen.height));
    },
    [],
  );

  useEffect(() => {
    const dimsub = Dimensions.addEventListener('change', onChange);
    return () => {
      // @ts-ignore
      // typings for 0.65.x not available yet
      dimsub?.remove();
    };
  }, [orientation, onChange]);
  return {screen: screenData, orientation};
}
Example #3
Source File: SafeContainer.tsx    From react-native-notifier with MIT License 5 votes vote down vote up 
onSizeChange({ window }: { window: ScaledSize }) {
    this.setState({
      displayPadding: window.height > window.width,
    });
  }