set status bar height

package.json

@@ -60,6 +60,7 @@
     "react-native-scroll-into-view": "^1.0.3",
     "react-native-scrollable-tab-view": "^1.0.0",
     "react-native-shadow-cards": "^1.0.2",
+    "react-native-status-bar-height": "^2.5.0",
     "react-native-swiper": "^1.5.14",
     "react-native-view-pager": "^0.2.3",
     "react-native-view-shot": "3.0.2",

view/NewsDetail.js

@@ -4,7 +4,7 @@ import { Image } from 'react-native-elements';
 import Axios from 'axios';
 import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
 import HTML from 'react-native-render-html';
-
+import { getStatusBarHeight } from 'react-native-status-bar-height';
 export default class NewsDetail extends React.Component {
     constructor(props) {
         super(props);
@@ -13,14 +13,17 @@ export default class NewsDetail extends React.Component {
             subtitle: '',
             image: '',
             content: '',
-            image_height: 400
+            image_height: 400,
+            statusbar_height: 50
         }
     }
 
     componentDidMount() {
         const screenWidth = Math.round(Dimensions.get('window').width);
+        const statusBarHeight = getStatusBarHeight();
         this.setState({
-          image_height: screenWidth
+          image_height: screenWidth,
+          statusbar_height: statusBarHeight
         })
         this.get_news_detail(this.props.route.params.slug)
     }
@@ -42,7 +45,7 @@ export default class NewsDetail extends React.Component {
     render() {
         console.log('Image : ' + this.state.image)
         return (
-            <View style={styles.container}>
+            <View style={styles.container(this.state.statusbar_height)}>
                 <View style={styles.header}>
                     <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                     <Image source={require('../assets/icon/back.png')} style={{width: 35, height: 35}} />
@@ -66,11 +69,11 @@ export default class NewsDetail extends React.Component {
 
 
 const styles = StyleSheet.create({
-    container: {
+    container: (marginTop) => ({
         flex: 1,
-        marginTop: 29,
+        marginTop: marginTop,
         backgroundColor: 'white',
-    },
+    }),
     header: {
         height: 60,
         paddingHorizontal: 10,