Problem: realm.isClosed is undefined

App.js

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Realm from 'realm';

const App = () => {
  const [state, setState] = useState('');

  // replace componentDidMount()
  // The problem: Using a second useEffect to replace componentWillUnmount was incorrect.
  // The solution was to remove the executed code from that useEffect and simply call it directly 
  // from the return() function. Kudos to @foyarash and @pratyaksh on Reactiflux #react-native channel
  
  useEffect(() => {
    Realm.open({
      schema: [{name: 'Dog', properties: {name: 'string'}}],
    }).then(realm => {
      realm.write(() => {
        realm.create('Dog', {name: 'Rex'});
      });
      setState({realm});
    });
    //replaces componentWillUnmount
    return () => {
      if (Realm !== null && !Realm.isClosed) {
        Realm.close();
      }
    };
  }, []);

  const info = state.realm
    ? 'Number of dogs in this Realm: ' + state.realm.objects('Dog').length
    : 'Loading...';

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>{info}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    backgroundColor: 'cyan',
  },
});

export default App;