Component doesn't render on certain phone

How to / Third Party Tooling
1

Hi!

I’ve made a small app in Expo that mostly works OK, but on one of my colleagues’ phones (Honor 10) a component below doesn’t render:

function SendSurveyScreen({ route, navigation }) {
  const { surveyerName, otherParam } = route.params
  const [fileResponse, setFileResponse] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [sName, setSName] = useState(surveyerName)
  const [refresh, setRefresh] = useState(false)

  const Item = ({ item, onPress, backgroundColor, textColor }) => (
    <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
      <Text style={[styles.title, textColor]}>{item.title}</Text>
    </TouchableOpacity>
  );

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : 'lightblue';
    const color = item.id === selectedId ? 'white' : 'black';
    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
      />
    );
  };

  const readFiles = async () => {
    try {
      return (await FileSystem.readDirectoryAsync(FileSystem.documentDirectory))
        .map((value, index) => {
          return value.slice(-4) == '.txt' ? { id: index, title: value } : null
        });
    } catch (err) {
      console.warn(err);
    }
  }

  useEffect(() => {
    let isMounted = true;
    readFiles().then(data => { if (isMounted) setFileResponse(data) });
    return () => { isMounted = false };
  }, [refresh])

  const getFileByID = (files, id) => {
    const retFile = files.find(file => file.id == id)
    return retFile.title
  }

  const emailFile = (filename) => {
    MailComposer.composeAsync({
      recipients: [EMAIL_ADDRESS_FOR_FILES],
      body: `Survey report from ${(new Date(Date.now())).toLocaleDateString('ru-RU', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      })}, performed by ${sName}`,
      attachments: [FileSystem.documentDirectory + filename],
      subject: 'Report'
    }).then(result => console.log(result)).catch(e => console.log(e))
  }

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={fileResponse}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />
      <Text></Text>
      <Button
        title='Send by e-mail'
        disabled={selectedId == null}
        onPress={() => {
          emailFile(getFileByID(fileResponse, selectedId))
        }}
      />
      <Button
        title='Delete'
        disabled={selectedId == null}
        onPress={() => {
          Alert.alert(
            "Are you sure?",
            "You want to delete survey report? It can't be undone.",
            [
              { text: "Keep it", style: 'cancel', onPress: () => { } },
              {
                text: "Delete it",
                style: 'destructive',
                onPress: () => {
                  FileSystem.deleteAsync(FileSystem.documentDirectory + getFileByID(fileResponse, selectedId))
                    .then(value => console.log(value))
                    .catch(e => console.log(e))
                  setRefresh(!refresh)
                  setSelectedId(null)
                },
              },
            ]
          );
        }
        }
      />
      <Button
        title='To the main screen'
        onPress={() => navigation.navigate('Start')}
      />
    </SafeAreaView>
  );
};

All it shows is just that:

photo_2022-04-12_11-01-57
photo_2022-04-12_11-01-57606×1280 18.6 KB

Everything else is working ok. App is built as an apk (internal testing build) and works on most other phones (another colleague can’t install it on his Xiaomi for some unknown reason). I can’t use Expo Go to check the problem 'cause we work remotedly. Maybe there is something you can recommend to solve the case?

2

Hi @astronom

Have a look at the following document and the “manual debugging” link:

expo.fyi/splash-screen-hanging

3

Thank you for the answer. The problem is: I’ve changed nothing in that component from the previous (working) version and that version worked well… It’s some extremely nasty bug.

4

So if you replace the above screen with something like the following, does it work or does it fail in the same way?

function SendSurveyScreen({ route, navigation }) {
  return <Text>SendSurveyScreen</Text>;
}