offlineBarRef Error

HomeView.js

import React from 'react';
import styles from './styles';
import Wallpaper from "../Wallpaper/index";
import BottomBar from "../BottomBar/index";
import {View,Image,Text,TouchableHighlight,Alert } from 'react-native';
import HomeTopBar from "../HomeTopBar/index";
import { Container, Header, Content ,Button,Icon} from 'native-base';
import home1 from '../../assets/images/home1.png';
import home2 from '../../assets/images/home2.png';
import home3 from '../../assets/images/home3.png';
import home4 from '../../assets/images/home4.png';
import home5 from '../../assets/images/home5.png';
import {AppText, Color} from "../../utils/constant";
import ButtonsWithIcons from "../../component/ui/Buttons/index";
import { Actions } from 'react-native-router-flux';
import OfflineBar from "../../component/ui/OfflineBar/index";

export default class HomeView extends React.Component {

    onPress = () => {
        Actions.myProfile()
    };

    logout = () => {
        // signOut();
        // Actions.login();

    };

    constructor(props) {
        super(props);

    }
    onList = () => {
        Actions.home_listview()
    };
    onListDetails = () => {
        Actions.firstShopList()
    };

    render() {
        return (

                <View style={styles.container}>
                    <OfflineBar ref={(r) => this.offlineBarRef = r} />
                    <View style={styles.content}>
                        <View style={styles.firstContent}>
                            <ButtonsWithIcons styles={styles.btnsContent} onPress={this.onList}>

                                <Image source={home1} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{AppText.homebtnSearch}</Text>

                            </ButtonsWithIcons>

                            <ButtonsWithIcons styles={styles.btnsContent}>

                                <Image source={home2} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{AppText.homebtnLocal}</Text>

                            </ButtonsWithIcons>

                            <ButtonsWithIcons styles={styles.btnsContent} onPress={this.onListDetails}>

                                <Image source={home3} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{AppText.homebtnOnline}</Text>

                            </ButtonsWithIcons>

                        </View>
                        <View style={styles.secondContent}>

                            <ButtonsWithIcons styles={styles.btnsContent}>

                                <Image source={home4} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{AppText.homebtnDeals}</Text>

                            </ButtonsWithIcons>

                            <ButtonsWithIcons styles={styles.btnsContent} onPress={() => this.offlineBarRef.triggerAnimation}>

                                <Image source={home5} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{this.offlineBarRef.state.isConnected}</Text>

                            </ButtonsWithIcons>

                            <ButtonsWithIcons styles={styles.btnsContent} onPress={this.onPress}>

                                <Image source={home5} style={styles.iconLeft} />

                                <Text style={styles.btnText}>{AppText.homebtnMyProfile}</Text>

                            </ButtonsWithIcons>

                        </View>
                    </View>

                </View>
        );
    }
}