react-native#Dimensions TypeScript Examples

export function getDeviceHeight(statusBarTranslucent: boolean | undefined):number {
  var height = Dimensions.get("window").height;

  if (Platform.OS === "android" && !statusBarTranslucent) {

    return StatusBar.currentHeight ?  height - StatusBar.currentHeight : height;
  }

  return height;
}

export function withResponsiveWidth<T extends ResponsiveWidthRenderProps>(
  WrappedComponent: React.ComponentType<T>
) {
  return (props: T): React.ClassicElement<Omit<T, 'responsiveWidth'>> => {
    const [responsiveWidth, setResponsiveWidth] = React.useState<ResponsiveSize | undefined>(
      undefined
    );
    const [screenWidth, setScreenWidth] = React.useState<number | undefined>(undefined);

    const onLayout = (event: LayoutChangeEvent) => {
      const newScreenWidth = Dimensions.get('window').width;
      const newResponsiveWidth = getResponsiveSize(event.nativeEvent.layout.width);

      if (newScreenWidth !== screenWidth) {
        setScreenWidth(newScreenWidth);
      }

      if (newScreenWidth !== screenWidth && newResponsiveWidth !== responsiveWidth) {
        setResponsiveWidth(newResponsiveWidth);
      }
    };

    return (
      <View onLayout={onLayout} style={{ flex: 1 }}>
        <WrappedComponent {...(props as T)} responsiveWidth={responsiveWidth} />
      </View>
    );
  };
}

styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },

  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },

  nextButton: {
    backgroundColor: '#15c3d6',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    height: 56,

    position: 'absolute',
    left: 24,
    right: 24,
    bottom: 40,
  },

  nextButtonText: {
    fontFamily: 'Nunito_800ExtraBold',
    fontSize: 16,
    color: '#FFF',
  }
})

Onboarding = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Onboarding'>) => {
  const { height } = Dimensions.get('window');

  const handleGetStartedPress = () => navigation.navigate('Welcome');

  return (
    <Background>
      <ContentContainer height={height * 0.54} />
      <OnboardingSlider onGetStartedPress={handleGetStartedPress} />
    </Background>
  );
}

styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainerStyle: {
    backgroundColor: '#F3F4F9',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  iconContainer: {
    position: 'absolute',
    top: 32,
    width: 48,
    height: 48,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    paddingTop: Platform.OS === 'ios' ? 4 : 0,
    paddingLeft: Platform.OS === 'ios' ? 2 : 0,
  },
  panelHandle: {
    width: 40,
    height: 6,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 4,
    marginBottom: 10,
  },
})

styles = StyleSheet.create({
  button: {
    color: '#fff',
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff',
    padding: 2,
    borderRadius: 4,
  },
  buttonClose: {
    color: '#fff',
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff',
    padding: 2,
    borderRadius: 4,
  },
  container: {
    backgroundColor: '#007bffaa',
    position: 'absolute',
    width: 240,
    height: 80,
    top: Dimensions.get('screen').height / 2 - 80,
    left: Dimensions.get('screen').width / 2 - 120,
    zIndex: 100,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    alignItems: 'center',
  },
  fontStyle: {color: '#fff', fontWeight: '700', fontSize: 18},
  buttonText: {color: '#fff', paddingHorizontal: 8},
  buttonHolder: {
    flexDirection: 'row',
    display: 'flex',
    width: '100%',
    justifyContent: 'space-around',
  },
})

isIPhoneX = () => {
  const { width, height } = Dimensions.get('window');
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (height === 780 ||
      width === 780 ||
      height === 812 ||
      width === 812 ||
      height === 844 ||
      width === 844 ||
      height === 896 ||
      width === 896 ||
      height === 926 ||
      width === 926)
  );
}

styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },

  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },

  nextButton: {
    backgroundColor: '#15c3d6',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    height: 56,

    position: 'absolute',
    left: 24,
    right: 24,
    bottom: 40,
  },

  nextButtonText: {
    fontFamily: 'Nunito_800ExtraBold',
    fontSize: 16,
    color: '#FFF',
  }
})

getBorderRadius = ({ theme, radius = 'none' }: WrapperStyleProps) => {
  const borders = {
    none: 0,
    medium: theme.borderRadius.medium,
    circle: Dimensions.get('window').width * 2
  }

  return borders[radius] || borders.none
}

HomeListItem = ({ source, title, subtitle }) => {
  const isLarge = Dimensions.get('window').height >= 800
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: isLarge ? 16 : 8,
      }}
    >
      <Image source={source} style={{ marginRight: 30 }} />
      <View>
        <Text style={{ fontFamily: FONT_BOLD, fontSize: FONT_SIZES[600] }}>
          {title}
        </Text>
        <Text
          style={{
            fontFamily: FONT_FAMILY,
            fontSize: FONT_SIZES[500],
            color: COLORS.GRAY_2,
          }}
        >
          {subtitle}
        </Text>
      </View>
    </View>
  )
}

// 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;
}

styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 65 : 30,
    paddingHorizontal: SPACING_HORIZONTAL
  },
  button: {
    marginTop: Dimensions.get('window').scale > 2 ? 24 : 12
  }
})

function isIphoneX() {
  const dimen = Dimensions.get('window');
  return (
    Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
  );
}

Container = styled(RectButton)`
  width: ${Dimensions.get('window').width - 60}px;
  height: 60px;
  background: #ff9000;
  border-radius: 10px;
  margin-top: 8px;
  justify-content: center;
  align-items: center;
`

OnboardHeader = ({
  style,
}: PropTypes) => {
  if (Dimensions.get('window').height < 600) {
    return null
  }
  const logoHeight = Dimensions.get('window').height < 600 ? 40 : 60
  const logoWidth = (logoHeight * 101) / 54
  return (
    <View style={style}>
      <View style={styles.header}>
        <Image
          source={require('../../assets/logo_white.png')}
          style={{ height: logoHeight, width: logoWidth }}
          resizeMode="contain"
        />
      </View>
    </View>
  )
}

styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: "flex-start",
		alignItems: "center",
		marginTop: 25,
	},
	pdf: {
		flex: 1,
		width: Dimensions.get("window").width,
		height: Dimensions.get("window").height,
	},
})

{width: SCREEN_WIDTH} = Dimensions.get('window')

styles = themedStyles((theme) => ({
	container: {
		backgroundColor: theme.colors.themeBackground,
		flex: 1,
		padding: 15,
		position: "absolute",
		top: 0,
		left: 0,
		bottom: 0,
		right: 0,
	},

	webContainer: {
		backgroundColor: theme.colors.themeBackground,
		color: theme.colors.text,
	},

	pdf: {
		flex: 1,
		width: Dimensions.get("window").width,
		height: Dimensions.get("window").height,
	},
}))

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};
}

styles = StyleSheet.create({
  defaultTextInputStyle: {
    marginTop: 50,
    padding: 5,
    justifyContent: 'center',
    borderBottomWidth: 1,
    width: Dimensions.get('window').width * 0.8,
    fontSize: 24,
  },
})

public render() {
    const {
      indicatorId = 1,
      size = 50,
      text,
      direction,
      textStyle,
      isActive
    } = this.props;
    return isActive ? (
      <View
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "white",
          flexDirection: direction,
          position: "absolute",
          height: Dimensions.get("screen").height,
          width: "100%",
          zIndex: 999999,
          elevation: 1
        }}
      >
        {this.renderIndicator(indicatorId, size)}
        {text ? <Text style={textStyle}>{text}</Text> : null}
      </View>
    ) : null;
  }

constructor(props: ActionSheetProps) {
    super(props);
    this.state = {
      modalVisible: false,
      scrollable: false,
      layoutHasCalled: false,
      keyboard: false,
      deviceHeight:
        calculatedDeviceHeight ||
        getDeviceHeight(this.props.statusBarTranslucent),
      deviceWidth: Dimensions.get("window").width,
      portrait: true,
      safeAreaInnerHeight,
      paddingTop: safeAreaPaddingTop,
      keyboardPadding: 0,
    };

    this.scrollViewRef = createRef();
    this.safeAreaViewRef = createRef();

    this.currentOffsetFromBottom = this.props.initialOffsetFromBottom ?? 1;
    this.indicatorTranslateY = new Animated.Value(-this.state.paddingTop | 0);
  }

styles = StyleSheet.create({
  boxStyle: {
    marginTop: 50,
    borderRadius: 20,
    width: Dimensions.get('window').width * 0.8,
    borderWidth: 1,
    padding: 5,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
  },
  boxText: {
    fontSize: 20,
  },
  selectedStyle: {
    backgroundColor: 'black',
    borderColor: 'white',
  },
  selectedStyleText: {
    color: 'white',
  },
  unselectedStyle: {
    borderColor: '#9E9E9E',
  },
  unselectedStyleText: {
    color: '#9E9E9E',
  },
})

getDiameter = (frame: ShapeModifiers['frame']): number | `${number}%` => {
  if (!frame) return 0;
  const wWidth = Dimensions.get('window').width;
  const wHeight = Dimensions.get('window').height;

  const widthFromFrame = frame.width || 0;
  const heightFromFrame = frame.height || 0;

  const width =
    typeof widthFromFrame === 'string'
      ? (parseFloat(widthFromFrame) / 100) * wWidth
      : widthFromFrame;

  const height =
    typeof heightFromFrame === 'string'
      ? (parseFloat(heightFromFrame) / 100) * wHeight
      : heightFromFrame;

  return Math.max(width, height);
}

OnboardingSlider: React.FC<IOnboardingSliderProps> = ({ onGetStartedPress }) => {
  const ref = useRef<FlatList>(null);
  const { width } = Dimensions.get('window');

  const handleNextPress = (index: number) => {
    ref.current?.scrollToIndex({
      index,
      animated: true,
    });
  };

  const handleSkipPress = () => {
    ref.current?.scrollToIndex({
      index: 3,
      animated: true,
    });
  };

  const handleNextOrGetStarted = (isLast: boolean, index: number) => {
    if (isLast) {
      onGetStartedPress();
    } else {
      handleNextPress(index);
    }
  };

  return (
    <>
      <FlatList
        {...{ ref }}
        getItemLayout={(_, index) => ({ length: width * 4, offset: width * (index + 1), index })}
        snapToInterval={width}
        horizontal
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        decelerationRate="fast"
        data={onboardingSliderData}
        renderItem={({ item, index }) => {
          const isLast = index === 3;
          const { header, description, illustration } = item;
          return (
            <>
              <OnboardingSliderItem {...{ header, description, illustration }} index={index + 1} />
              <Box position="absolute" bottom={60} left={0} right={0} alignItems="center">
                <StyledButton
                  variant={isLast ? 'primary' : 'ghost'}
                  label={isLast ? "Let's get started" : 'Next Step'}
                  onPress={() => handleNextOrGetStarted(isLast, index)}
                />
              </Box>
              {!isLast && (
                <Box position="absolute" top={24} right={24}>
                  <PressableText
                    variant="sublimeSemiBold"
                    color="accent"
                    onPress={handleSkipPress}
                    label="Skip"
                  />
                </Box>
              )}
            </>
          );
        }}
        keyExtractor={(_, index) => index.toString()}
      />
    </>
  );
}

win = Dimensions.get('window')

{ width } = Dimensions.get('window')

{width: screenWidth, height: screenHeight} = Dimensions.get('screen')

function getScale(): number {
  return Dimensions.get('window').scale;
}