CODEWITHSUNDEEP
androidiosiphonereact-native
DeveloperApps
DeveloperApps

Reputation: 803

Access to screen height depending on the device

Below are various situations with the screen on the phone:

enter image description here

How can I access the height in red?

I am currently trying to use:

react-native-responsive-screen

But it doesn't always work well. When I test on the screen with notches it is OK but when I test on another device, the height does not match

When I do something on the device without Android navigation bar, when I run the application on the phone with this bar it covers part

Upvotes: 1

Views: 80

Answers (2)

Hend El-Sahli
Hend El-Sahli

Reputation: 6752

You could use measure method to get your View height dynamically:

class YourComponent extends React.Component {
  componentDidMount() {
    setTimeout(
      () =>
        this.mainView.measure((fx, fy, width, height, px, py) => {
          console.log(`Component width is: ${width}`);
          console.log(`Component height is: ${height}`);
          console.log(`X offset to frame: ${fx}`);
          console.log(`Y offset to frame: ${fy}`);
          console.log(`X offset to page: ${px}`);
          console.log(`Y offset to page: ${py}`);
        }),
      0
    );
  }

  render() {
    return (
      <View ref={ref => this.mainView = ref}>
        {/* content */}
      </View>
    );
  }
}

Don't forget to wrap your mainView with SafeAreaView

Upvotes: 1

Daniel Givoni
Daniel Givoni

Reputation: 753

You can use View onLayout that is returned on first render 

const redView = () => {
  return
  <View
    style={styles.redStyle}
    onLayout={({nativeEvent}) =>
      console.log(nativeEvent.layout.height)
    }
  />
}

Upvotes: 0

Related Questions