Problem with StatusBar, how to use "currentHeight"?

How to / Third Party Tooling
1

Hello, I just started to create my app and learning how to do it ^^’
So my only code for the moment is the basic code you have when you create a blank project:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

When I display something on the top screen, what I display is under the status bar, so I was thinking that the best is to take the height of the status bar to display everything at the bottom of it but when I do

console.log(StatusBar.currentHeight)

the console say undefined.

So, can someone tell me what i do wrong please? ^^

2

Hey @sevlac, it’d be best to use SafeAreaContext or if you plan on using react-navigation it will handle safearea logic for you.

Cheers,
Adam

3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.