Breaking News: Grepper is joining You.com. Read the official announcement!

React native responsive screen design

Sher Muhammad answered on September 21, 2022 Popularity 8/10 Helpfulness 1/10

answer React native responsive screen design

related react native responsive screen

React native responsive screen design

Comment

Use the following function and pass it a number to get a new number that considers the screen's aspect ratio:

export const responsiveSize = (number: number): number => {
  const currentScreen = Dimensions.get('window')
  return (currentScreen.height / currentScreen.width) * number
}

Popularity 8/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: react-native responsive screen typescript

Link to this answer
Share Copy Link

Contributed on Oct 19 2023

Sher Muhammad

0 Answers Avg Quality 2/10

Closely Related Answers

react native responsive screen

Comment

#npm 
npm install --save react-native-responsive-dimensions
 
#yarn 
yarn add react-native-responsive-dimensions

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Isijola Ademie

0 Answers Avg Quality 2/10

react native responsive screen

Comment

import { StyleSheet } from "react-native";
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize
} from "react-native-responsive-dimensions";
 
const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    height: responsiveHeight(50), // 50% of window height
    width: responsiveWidth(50), // 50% of window width
    alignItems: "center"
  },
  sampleText: {
    fontSize: responsiveFontSize(2) // 2% of total window size
  }
});

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Isijola Ademie

0 Answers Avg Quality 2/10

React native responsive screen design

Contents

More Related Answers

React native responsive screen design

Closely Related Answers

react native responsive screen

react native responsive screen

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.