인프런 커뮤니티 질문&답변

 
getStatusBarHeight의 값이 콘솔에 찍히는데 그 값이 화면에 적용되지 않습니다.

import {
  View,
  StyleSheet,
  StatusBar,
  Image,
  Text,
  TouchableOpacity,
  Animated,
  Platform,
} from 'react-native';
import {getStatusBarHeight} from 'react-native-status-bar-height';
import React, {useEffect, useRef} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import Ionic from 'react-native-vector-icons/Ionicons';

const Status = ({route, navigation}) => {
  const {name, image} = route.params;
  const statusBarHeight = getStatusBarHeight();
  const topMargin = Platform.OS === 'ios' ? statusBarHeight : 0;
  console.log('statusBarHeight', statusBarHeight);
  console.log('topMargin', topMargin);

  // Animated.Value(0)의 값을 직접 변경하면 안되기 때문에 useRef를 사용
  const progress = useRef(new Animated.Value(0)).current;

  const progressAnimation = progress.interpolate({
    inputRange: [0, 5],
    outputRange: ['0%', '100%'],
  });

  useEffect(() => {
    Animated.timing(progress, {
      toValue: 5,
      duration: 5000,
      useNativeDriver: false,
    }).start();
  });

  useEffect(() => {
    let timer = setTimeout(() => {
      navigation.goBack();
    }, 5000);

    return () => {
      clearTimeout(timer);
    };
  });

  return (
    <SafeAreaView style={styles.statusContainer}>
      <StatusBar barStyle="light-content" backgroundColor="black" />
      <View style={[styles.topGreyLineContatiner, {top: 18 + topMargin}]}>
        <Animated.View
          style={{
            backgroundColor: 'white',
            height: '100%',
            width: progressAnimation,
          }}
        />
      </View>

      <View style={[styles.headerContainer, {top: 12 + topMargin}]}>
        
      {* ... /*}
      </View>
      <Image style={styles.storyImage} source={image} />
    </SafeAreaView>
  );
};

export default Status;
const styles = StyleSheet.create({
  statusContainer: {
    backgroundColor: 'black',
    height: '100%',
    justifyContent: 'center',
  },
  topGreyLineContatiner: {
    height: 3,
    width: '95%',
    borderWidth: 1,
    backgroundColor: 'grey',
    position: 'absolute',
  },

  headerContainer: {
    padding: 15,
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    top: 12,
    left: 0,
    width: '90%',
  },
  headerImageContainer: {
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
//....

});

  console.log('statusBarHeight', statusBarHeight);
  console.log('topMargin', topMargin);

이렇게 했을경우 statusBarHeight 20 , topMargin 20값이 모두 정상적으로 디버깅 툴에 출력됩니다.
그러나 화면상에 ui에 적용되지 않아요.

일부로 const 에 넣어서 사용해봤고, margintTop과 top이 같이 있을경우 가끔 문제가 된다는 글을 봐서 아예 top에 값을 따로 추가하는 방식도 해보았습니다. 그리고 마지막으로 예제 코드를 그대로 가져와서 사용해보았지만 여전히 화면에서 적용이 되지 않습니다.

값이 찍히는 걸 보면 getStatusBarHeight가 동작하긴 하는건데 화면상에서 적용이 안되는 이유가 뭔지 알 수 있을까요?