CODEWITHSUNDEEP
react-native
Jiseong Hong
Jiseong Hong

Reputation: 13

(React Native) How to set margin or padding or width or height?

<View style={width: 20}>Hello</View>

Platform.OS ?

Dimensions.get("screen") ? -> 1100, 1440 ... ?

How to separate width? I want it to look the same on all devices, both Android and iPhone.

Upvotes: 1

Views: 1585

Answers (2)

Niranjan
Niranjan

Reputation: 61

You generally don't need to get Platform information for making a responsive UI. You can simply import "Dimensions" and get width from it.

Example :

import {Dimension} from "react-native"

//for width
const SCREEN_WIDTH = Dimensions.get('screen').width;

//for height
const SCREEN_HEIGHT = Dimensions.get('screen').height;

Upvotes: 0

crispengari
crispengari

Reputation: 9321

If you want to set responsive width, or the width that varies with the device width, use Dimension. Take a look at the following code:

import {Dimension, StyleSheet} from 'react-native`

.....
<View style={styles.container}>Hello</View>
.....

const styles = StyleSheet.create({
      container:{
          width: Dimension.get('screen').width, // the container will take the whole width of the device screen width
       }
 })

If you are answered let me know

Upvotes: 1

Related Questions