Schedule.js

const WEBVIEW_REF = 'WEBVIEW_REF'
import React, { Component } from 'react'
import {
  StyleSheet,
  ActivityIndicator,
  Text,
  View,
  TouchableOpacity,
  WebView
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'


class Schedule extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showText: false,
      canGoBack: false
    }

    const timerId = setInterval(() => {
      this.setState({ showText: !this.state.showText })
    }, 700)

    setTimeout(() => {
      clearInterval(timerId)
    }, 5000)
  }

  onBack() {
    this.refs[WEBVIEW_REF].goBack()
  }

  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack
    })
  }

  render() {
    const display = this.state.showText ? this.props.text : 'Ом Шанти'
    return (
      <View style={styles.container}>
        <View style={styles.topbar}>
          <TouchableOpacity
            disabled={!this.state.canGoBack}
            onPress={this.onBack.bind(this)}
          >
            <Icon name='ios-arrow-back' size={40} style={this.state.canGoBack ? styles.topbarBack : styles.topbarBackDisabled} />
          </TouchableOpacity>
          <Text style={styles.download}>{display}</Text>
        </View>
        <WebView
          ref={WEBVIEW_REF}
          style={{ flex: 1 }}
          source={require('./schedule.html')}
          onNavigationStateChange={this.onNavigationStateChange.bind(this)}
          startInLoadingState={true}
          renderLoading={() => (
            <ActivityIndicator
              style={{ paddingTop: 50 }}
              animating
              size="large"
              color="black"
            />
          )}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  topbar: {
    flexDirection: 'row',
    height: 40,
    justifyContent: 'space-between',
  },
  download: {
    marginRight: 125,
    paddingTop: 20, 
    color: 'gray'
  },
  topbarBack: {
    color: 'gray',
    marginTop: 8, 
    marginLeft: 15
  },
  topbarBackDisabled: {
    color: '#fff',
    marginLeft: 15
  }
})


export default Schedule