EventDetailsScreen.js

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  StyleSheet,
} from 'react-native';
import { ConnectivityRenderer } from 'react-native-offline';
// Rest of component imports ...

class EventDetailsScreen extends Component {

  render() {
    const { event } = this.props;
    return (
      <ScrollView style={styles.container}>
        <EventCover uri={event.uri} />
        <View style={styles.content}>
          <EventBasicInformation
            data={event.basicInfo}
          />
          <ConnectivityRenderer>
            {isConnected => isConnected && <EventLocation
              address={event.fullAddress}
              eventId={event.eventId}
            />}
          </ConnectivityRenderer>
          <EventDescription description={event.description} />
          <ConnectivityRenderer>
            {isConnected => <RsvpButtons disabled={!isConnected} />}
          </ConnectivityRenderer>
        </View>
        <ConnectivityRenderer>
          {isConnected => (
            <SnackBar
              message="You are currently offline, some features may be disabled"
              predicate={!isConnected}
            />
          )}
        </ConnectivityRenderer>
      </ScrollView>
    );
  }
}

export default EventDetailsScreen;