Fast refresh that was introduced in React Native 0.61 doesn't work

Question

(also posted in https://github.com/facebook/react-native/issues/27583 )

Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened... From the fact that two people marked this question as useful, I understand that I am not the only one having this problem...

I am running a very basic 'app' (a single file, a single component) for which the code is attached below, using React native 0.61.

Developing for android, on windows 10 with genymotion.

Fast Refresh is turned on, but it doesn't seem to work, for example, when:

1. I am changing the 'Posts' string to 'New Posts'
2. When I remove the posts button

Only the debug menu's "reload" refreshes the app and renders the changes. Any idea why?

Here is the code:

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

export const App = () => {

  const [resource, setResource] = useState('todos');

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 30 }}>
      <View style={{ flexDirection: 'row', marginTop: 0,
        alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => (setResource('posts'))}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>
              Posts
            </Text>
          </View>
        </TouchableOpacity>
        <View style={{ width: 20 }} />
        <TouchableOpacity onPress={() => setResource('todos')}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>
              Todos
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  buttonText: {
    color: 'black',
    fontSize: 20
  },
  button: {
    backgroundColor: '#a8a',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 2
  }
});

Answer 1

I've found that sometimes the Metro Bundler gets 'stuck'. That would explain why when you ran it the next day, it worked fine.

When things get weird for (seemingly) no apparent reason, I do:

yarn start --reset-cache

Answer 2

In my case I ran watchman watch-del-all and suddenly I lost fast reload.

Re-installing node_modules and clear & rebuilding app did not help me.

Update: a day passed and I started my app again. Didn't change anything since posting the question. Now it works fine. No idea what happened...

Got a hint from this and restarted my computer. Now it works fine.

Answer 3

I had the same issue few minutes back. Fast refresh was not working even though it was enabled. I closed the metro bundle and started the new instance. Worked for me.