React Native Cursor Rules
Learn about cursor rules specific to React Native development.
React Native-Specific Rules
Cursor rules in React Native provide intelligent navigation and manipulation capabilities designed specifically for mobile development with React Native. These rules help you work more efficiently with React Native components, native modules, and platform-specific code.
Component Navigation
- Navigate between component definitions
- Jump to native module declarations
- Move between platform-specific files
Smart Selection
- Select JSX blocks and expressions
- Expand selection to include props and styles
- Smart native module usage selection
Code Manipulation
- Quick component insertion
- Automated style handling
- Native module declaration management
Best Practices
- Use component-aware navigation
- Leverage platform-specific cursor movements
- Utilize style-aware selection
Examples
// Navigate between component definitions
function CustomButton({ title, onPress }) {
return (
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text style={styles.buttonText}>{title}</Text>
</TouchableOpacity>
);
}
// Smart selection of styles and native modules
function ProfileScreen({ userId }) {
const [userPhoto, setUserPhoto] = useState(null);
useEffect(() => {
ImagePicker.launchCamera({
mediaType: 'photo',
quality: 0.8,
}, response => {
if (!response.didCancel) {
setUserPhoto(response.uri);
}
});
}, []);
return (
<View style={styles.container}>
<Image
source={{ uri: userPhoto }}
style={styles.photo}
/>
<CustomButton
title="Take Photo"
onPress={handleTakePhoto}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
padding: 12,
backgroundColor: '#007AFF',
borderRadius: 8,
},
buttonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
},
photo: {
width: 200,
height: 200,
borderRadius: 100,
},
});
Configuration
Customize React Native-specific cursor rules in your settings:
{
"reactNative.cursorRules": {
"componentNavigation": true,
"smartSelection": true,
"styleHandling": true
}
}