CODEWITHSUNDEEP
react-nativereact-native-ios
keerthi c
keerthi c

Reputation: 71

How to make the all Components to be responsive

import {Dimensions} from 'react-native'

var {height, width} = Dimensions.get('window');

const styles = StyleSheet.create({
  HeddingStyle:{
    fontSize: (width*0.02)
  }
})

But this is not working properly by using Dimensions

Upvotes: 0

Views: 86

Answers (1)

kivul
kivul

Reputation: 1158

Use them separated, like this:

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

Then on your styles you can do stuff like this:

inputContainer: {
  width: SCREEN_WIDTH - 50,
}

Or in your case:

HeddingStyle:{
  fontSize: SCREEN_WIDTH * 0.02,
}

Upvotes: 2

Related Questions