Frontend · Claude Code (via permissions.deny)
React Native & Expo Router .claudeignore
A .claudeignore for React Native & Expo Router: the paths Claude Code should stay out of, with matching permissions.deny rules.
- Path
- .claudeignore
- Loads
- Pattern list
- Format
- gitignore syntax
- Used by
- Claude Code (via permissions.deny)
What this file tells the agent
Claude Code reads files while it works. This .claudeignore keeps the list of React Native & Expo Router paths it should stay out of (build output, large binaries, logs and secrets). Copy the sensitive ones into permissions.deny in .claude/settings.json, which Claude Code enforces.
- Use Expo Router file-based filesystem routing (app/_layout.tsx, app/(tabs)/index.tsx); ban legacy React Navigation container boilerplate.
- Enforce react-native-safe-area-context (useSafeAreaInsets or SafeAreaView) for all top-level mobile screen boundaries.
- Use modern Expo SDK native modules (expo-image, expo-secure-store, expo-crypto) instead of unmaintained bare native packages.
- Optimize for React Native New Architecture (Fabric renderer): avoid synchronous layout measurements in render passes.
- Always test cross-platform styling on both iOS and Android (e.g. elevation vs shadowColor, notch handling).
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
// Discouraged: Missing safe-area insets, slow standard Image component, obsolete navigation prop
export default function BadProfile({ navigation }: any) {
return (
<div style={{ marginTop: 50 }}>
<img src="avatar.png" />
<button onClick={() => navigation.navigate("Home")}>Go</button>
</div>
);
}import { View, Text, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function ProfileScreen() {
const insets = useSafeAreaInsets();
return (
<View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
<Image
source={{ uri: "https://example.com/avatar.png" }}
style={styles.avatar}
contentFit="cover"
transition={200}
/>
<Text style={styles.title}>User Profile</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 16 },
avatar: { width: 80, height: 80, borderRadius: 40 },
title: { fontSize: 20, fontWeight: "600", marginTop: 12 },
});Install it in one command
- 01
Go to your project root
The file goes at .claudeignore, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Claude Code does not enforce .claudeignore by itself. Copy the sensitive paths into permissions.deny in .claude/settings.json, which it does enforce.
$ curl -fsSL "https://www.devscratchpad.tech/api/raw/claudeignore/react-native-expo" -o ".claudeignore"
writes .claudeignore
.claudeignore
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for React Native & Expo Router
Questions
- Does Claude Code honor .claudeignore?
- Not by itself. Claude Code enforces permission rules, so copy the sensitive paths into permissions.deny in .claude/settings.json, for example Read(./.env). Keep .claudeignore in the repository root as the reviewable list.
- What should I put in .claudeignore?
- Exclude large build caches, minified bundles, lockfiles, and environment files containing sensitive credentials.