I am writing a mobile application using React Native and Firebase on the server-side. After registering, the client must wait for a Firebase function to create a Firestore document. I've made a retry function based on this blog. My only problem is that it gives me the error "Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null". I know what this error means, but I could not find the source of the problem. I've probably overlooked something but I would appreciate it if someone could help me find it. This is my render method:
render() {
const { currentUser } = this.props
const retry = async (fn, maxAttempts) => {
const execute = async (attempt) => {
try {
return await fn()
} catch (err) {
if (attempt <= maxAttempts) {
const nextAttempt = attempt + 1
console.log(`Retrying after 1 second due to:`, err)
return delay(() => execute(nextAttempt), 1000)
}
}
}
return execute(1)
}
const delay = (fn, ms) => new Promise((resolve) => setTimeout(() => resolve(fn()), ms))
const app = () => {
return (
<Tab.Navigator
<Tab.Screen name="Feed" component={FeedScreen} options={{
headerRight: () => (
<Button
onPress={() => console.log("Filter Function")}
title="Filters"
/>
),
}} />
<Tab.Screen name="Search" component={SearchScreen} options={{ headerShown: true }} />
<Tab.Screen name="Create Post" component={CreatePostScreen} options={{ unmountOnBlur: true }} />
<Tab.Screen name="Messages" component={MessagesScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{
headerRight: () => (
<Button
onPress={() => RootNavigation.navigate("Settings")}
title="Settings"
/>
),
title: currentUser.displayName
}} />
</Tab.Navigator>
)
}
retry(app, 60)
}