How to use react-native-status-bar-height - 10 common examples

import Carousel, { Pagination } from 'react-native-snap-carousel';
import MaintainPrivacy from './onboardingCards/MaintainPrivacy';

/* Description */
/* ======================================== */

/**
 * Initial Onboarding screen of BrightID
 * Uses react-native-snap-carousel for displaying onboarding cards
 */

/* Constants */
/* ======================================== */

const winWidth = Dimensions.get('window').width;
const statusBarHeight = getStatusBarHeight();

/* Onboarding Screen */
/* ======================================== */

type Props = {
  navigation: { navigate: Function },
};

class Onboard extends React.Component {
  static navigationOptions = {
    headerBackTitle: ' ',
    header: null,
  };

  constructor(props) {
    super(props);

const useInsets = () => {
    const [insets, setInsets] = useState({
        left: 0,
        top: getStatusBarHeight(true),
        bottom: 0,
        right: 0,
    })
    useEffect(() => {
        const updateInsets = () => {
            currentInsets()
                .then(insets => {
                    setInsets({
                        ...insets,
                        top: insets.top ? insets.top : getStatusBarHeight(true),
                    })
                })
                .catch(e => console.log(e))
        }
        updateInsets()
        Dimensions.addEventListener('change', () => {

import { getStatusBarHeight } from 'react-native-status-bar-height';
import { MaterialIcons } from '@expo/vector-icons';
import Color from 'color';
import { ItemDetail } from '../../../lib/db/itemDetail';
import getKind, { KINDS } from '../../../lib/getKind';
import theme from '../../../config/theme';
import s from '../../../config/style';
import { whenIPhoneSE } from '../../../lib/responsive';
import { Item as ItemParam } from '../../../domain/item';
import IconImage from '../../organisms/CreatePlan/IconImage';
import List from '../../organisms/Schedule/List';
import Header from '../../molecules/Header';
import { ConnectedType } from '../../pages/Schedule/Connected';

const top =
  Platform.OS === 'android' ? StatusBar.currentHeight : getStatusBarHeight();

type State = {
  imageHeader: boolean;
};

type Props = Pick &
  ItemParam & {
    data: ItemDetail[];
    onFinish: () => void;
    onGoBack: () => void;
    onCreateScheduleDetail: () => void;
  };

export default class extends Component {
  state = {
    imageHeader: true,

import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import GlobalStyles from '../../../GlobalStyles';
import getKind, { KINDS, KIND_DEFAULT } from '../../../lib/getKind';
import { SuggestItem } from '../../../lib/suggest';
import s from '../../../config/style';
import theme from '../../../config/theme';
import { ItemDetail } from '../../../domain/itemDetail';
import Header from '../../molecules/Header';
import HeaderImage from '../../molecules/ScheduleHeader/Header';
import TimeDialog from '../../organisms/CreateScheduleDetail/TimeDialog';
import Body from '../../organisms/CreateScheduleDetail/Body';
import Suggest from '../../organisms/Suggest/List';

const top =
  Platform.OS === 'android' ? StatusBar.currentHeight : getStatusBarHeight();

type PropsBase = Pick<
  ItemDetail,
  'title' | 'kind' | 'place' | 'url' | 'memo' | 'moveMinutes'
> & {
  iconSelected: boolean;
  suggestList: SuggestItem[];
  onDismiss: () => void;
  onIcons: (title: string) => void;
  onSave: (
    title: string,
    kind: string,
    place: string,
    url: string,
    memo: string,
    moveMinutes: number

import React, { Component } from 'react'
import { View, Platform } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
import ActionButton from './../elements/ActionButton'
import constant from './../../commons/constant'
import images from './../../commons/images'
import AppStyle from '../../commons/AppStyle'

const marginTop = Platform.OS === 'ios' ? getStatusBarHeight() : 0
const data = [
  {
    name: constant.RECEIVE,
    icon: images.iconQrCode,
    background: 'backgroundBlue'
  },
  {
    name: constant.RECEIVE,
    icon: images.iconQrCode,
    background: 'backgroundOrange'
  },
  {
    name: constant.SEND,
    icon: images.iconSend,
    background: 'backgroundWhite'
  },

import React, { Component } from 'react'
import { View, Platform } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
import Hamburger from './../elements/HamburgerButton'

const marginTop = Platform.OS === 'ios' ? getStatusBarHeight() : 0

export default class HamburgerButtonExam extends Component {
  static propTypes = {
  }

  static defaultProps = {
  }
  componentDidMount() {
  }
  render() {
    return (

import React, { Component } from 'react'
import { View, Platform } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
import TransactionItem from './../elements/TransactionsItem'
import constant from './../../commons/constant'

const marginTop = Platform.OS === 'ios' ? getStatusBarHeight() : 0
const data = [
  {
    type: constant.SEND,
    balance: '- 0.0044 ETH',
    date: 'Today 01:02 AM',
    balanceUSD: '$37.87',
    status: 1
  },
  {
    type: constant.RECEIVED,
    balance: '- 0.0044 ETH',
    date: 'Today 01:02 AM',
    balanceUSD: '$37.87',
    status: 1
  },
  {

TouchableWithoutFeedback
} from 'react-native'
import { observer } from 'mobx-react'
import { getStatusBarHeight } from 'react-native-status-bar-height'
import PropTypes from 'prop-types'
import Modal from 'react-native-modalbox'
import AppStyle from '../../../commons/AppStyle'
import images from '../../../commons/images'
import ChooseAddressScreen from './ChooseAddressScreen'
import Checker from '../../../Handler/Checker'
import MainStore from '../../../AppStores/MainStore'
import BottomButton from '../../../components/elements/BottomButton'
import NavStore from '../../../AppStores/NavStore'

const { width, height } = Dimensions.get('window')
const marginTop = Platform.OS === 'ios' ? getStatusBarHeight() : 20
const isIPX = height === 812

@observer
export default class AdressInputScreen extends Component {
  static propTypes = {
    navigation: PropTypes.object
  }
  static defaultProps = {
    navigation: {}
  }
  constructor(props) {
    super(props)
    this.state = {
      extraHeight: new Animated.Value(0)
    }
  }

import React from 'react';
import {
  TouchableOpacity,
  View,
  Text,
  Platform,
  StatusBar,
} from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import theme from '../../../config/theme';

const top =
  Platform.OS === 'android' ? StatusBar.currentHeight : getStatusBarHeight();

type Props = {
  title: string;
  right: any;
  color: string;
  position?: string;
  onClose: () => void;
};

export default (props: Props) => {
  let style: any = {
    position: props.position || 'absolute',
    height: 60 + Number(top) / 2,
    width: '100%',
    zIndex: 10,
  };

/>
    
  )
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  initialLayout: {
    height: 0,
    width: Dimensions.get('window').width
  },
  statusBar: {
    paddingTop: Platform.OS === 'ios' ? getStatusBarHeight() : StatusBar.currentHeight
  },
  tabBar: {
    indicatorStyle: {
      backgroundColor: TEXT_DARK
    },
    labelStyle: {
      color: TEXT_NORMAL
    },
    self: {
      backgroundColor: BLUE1,
      elevation: 0
    }
  }
}

const mapStateToProps = state => {