Rork makes building apps with natural language genuinely exciting — but AI-generated code occasionally comes with a specific set of error patterns that can leave you wondering why something that looks correct won't run. Build failures, immediate crashes after launch, UIs that render but don't respond — most of these trace back to five predictable issues in AI-generated React Native code.
Pattern 1: TypeScript Type Errors
Symptoms
Type 'string | undefined' is not assignable to type 'string'
Object is possibly 'undefined'
Property 'xxx' does not exist on type 'yyy'
Why it happens
Rork generates React Native / Expo-based code that sometimes uses broad types like any or optional properties without the null checks TypeScript requires in strict mode. TypeScript's type checker then flags these at build time.
Immediate fix
Add optional chaining and nullish coalescing:
// ❌ Will throw a type error
const userName = user.profile.name;
const price = product.price.toFixed(2);
// ✅ Fixed
const userName = user?.profile?.name ?? 'No name set';
const price = (product?.price ?? 0).toFixed(2);Use type assertions when API response types are unknown:
interface UserResponse {
id: string;
name: string;
email: string;
}
const user = response.data as UserResponse;Prompt prevention
Add this to your Rork prompts: "Use TypeScript strict mode with precise type definitions. Avoid any types. Use optional chaining and nullish coalescing wherever values may be undefined."
Pattern 2: Import Errors (Module Not Found)
Symptoms
Cannot find module 'expo-camera' or its corresponding type declarations
Unable to resolve module @react-navigation/native
Module '"react-native"' has no exported member 'StatusBar'
Why it happens
Rork may reference packages not yet in your project's package.json, or use API names from older Expo SDK versions that have since been renamed or moved.
Immediate fix
Install missing packages via Expo:
You can also just tell Rork in chat: "I'm getting an import error for expo-camera. Please add the required package." It handles this well. For manual installation:
npx expo install expo-camera
# React Navigation
npx expo install @react-navigation/native @react-navigation/stack
npx expo install react-native-screens react-native-safe-area-contextUpdate renamed modules (Expo SDK 50+ example):
// ❌ Old import
import { StatusBar } from 'react-native';
// ✅ New import (Expo SDK 50+)
import { StatusBar } from 'expo-status-bar';Prompt prevention
Specify your Expo SDK version: "Generate code compatible with Expo SDK 52. Use current API names and avoid deprecated imports."
Pattern 3: State Race Conditions
Symptoms
- UI renders correctly but button presses sometimes don't respond
- Data updates in the background but the list still shows old content
- Multiple taps put the screen into an unexpected state
Why it happens
AI-generated code often handles the happy path well but misses subtleties around concurrent state updates and incomplete useEffect dependency arrays, leading to stale state reads.
Immediate fix
Use functional updates to guarantee fresh state:
// ❌ May read stale state
const handleAdd = () => {
setItems([...items, newItem]);
setCount(count + 1);
};
// ✅ Functional updates always use the latest state
const handleAdd = () => {
setItems(prev => [...prev, newItem]);
setCount(prev => prev + 1);
};Complete the useEffect dependency array:
// ❌ Won't re-run when userId changes
useEffect(() => {
fetchUserData(userId);
}, []);
// ✅ Re-runs whenever userId changes
useEffect(() => {
fetchUserData(userId);
}, [userId]);Clean up async operations to prevent state updates after unmount:
useEffect(() => {
let isMounted = true;
const loadData = async () => {
const data = await fetchData();
if (isMounted) {
setData(data);
}
};
loadData();
return () => { isMounted = false; };
}, []);Prompt prevention
"Use functional state updates. Ensure all useEffect dependency arrays are complete. Clean up async operations on unmount."
Pattern 4: Missing Error Handling in Async Code
Symptoms
- App freezes during API calls
- A network error crashes the app entirely
- Loading spinners never disappear
Why it happens
AI-generated code tends to cover the happy path thoroughly but omits error states, loading indicators, and timeout handling — all of which are essential in production.
Immediate fix
Complete async pattern with all three states:
const [data, setData] = useState<UserData | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const fetchUserData = async (userId: string) => {
setLoading(true);
setError(null);
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);
const response = await fetch(`/api/users/${userId}`, {
signal: controller.signal
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const json = await response.json();
setData(json);
} catch (err) {
if (err instanceof Error) {
if (err.name === 'AbortError') {
setError('Request timed out. Please try again.');
} else {
setError(`Something went wrong: ${err.message}`);
}
}
} finally {
setLoading(false); // Always clear loading
}
};Render all three states in your component:
if (loading) return <ActivityIndicator size="large" />;
if (error) return (
<View>
<Text>{error}</Text>
<Button title="Retry" onPress={() => fetchUserData(userId)} />
</View>
);
if (!data) return null;Prompt prevention
"Include loading state, error state, and timeout handling for all API calls. Always clear the loading state in a finally block."
Pattern 5: Navigation Type Errors
Symptoms
Argument of type '"ProfileScreen"' is not assignable to parameter of type 'never'
The action 'NAVIGATE' with payload was not handled by any navigator
Cannot read property 'navigate' of undefined
Why it happens
React Navigation requires explicit type definitions to enable type-safe navigation. Rork sometimes omits the RootStackParamList type definition, causing TypeScript to reject screen names and parameters.
Immediate fix
Define typed navigation parameters:
// navigation/types.ts
export type RootStackParamList = {
Home: undefined;
Profile: { userId: string };
Settings: undefined;
Chat: { chatId: string; userName: string };
};
// In your component
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
type NavigationProp = StackNavigationProp<RootStackParamList>;
const MyComponent = () => {
const navigation = useNavigation<NavigationProp>();
const goToProfile = () => {
navigation.navigate('Profile', { userId: '123' });
// ✅ TypeScript now catches wrong parameters at compile time
};
return <Button title="Go to Profile" onPress={goToProfile} />;
};Type nested navigators:
export type TabParamList = {
HomeTab: undefined;
ProfileTab: undefined;
};
export type RootStackParamList = {
Auth: undefined;
Main: NavigatorScreenParams<TabParamList>;
Modal: { message: string };
};Prompt prevention
"Always include React Navigation type definitions (RootStackParamList and related types). Use typed useNavigation hooks throughout."
Three Debugging Tips for Rork Projects
1. Use the Metro bundler terminal output
The terminal where you run npx expo start shows detailed error messages that are much more useful than the on-device display. Keep it visible while testing.
2. Paste the full error message back to Rork
When you hit an error, copy the complete error message — including the stack trace — and paste it into the Rork chat with "Please fix this error." Rork handles these well and often resolves the issue in one round.
3. Build incrementally
Generating a full-featured app in one prompt leads to compounding errors that are hard to untangle. Instead: generate the basic list view → test it → add one feature → test again. This approach is slower per prompt but faster overall.
Wrapping Up
The five patterns covered here — TypeScript type errors, missing imports, state race conditions, missing error handling, and navigation type issues — account for the majority of errors in Rork-generated code. A combination of targeted prompt instructions and knowing how to fix each pattern when it appears will take you a long way. We hope this makes your app building with Rork smoother and more enjoyable.