Awesome-jetbrains-claude rn-dev

Professional React Native/Expo development. Covers component creation, Redux Toolkit slices, RTK Query APIs with optimistic updates and infinite scroll, custom hooks, Expo Router screens, and TypeScript patterns. Use this skill when working on any frontend code - creating or editing components, adding Redux state/API endpoints, writing custom hooks, building screens, or following project conventions. Triggers on any React Native, Redux, RTK Query, Expo Router, or component design task within this project.

install

source · Clone the upstream repo

git clone https://github.com/IliyaBrook/awesome-jetbrains-claude

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/IliyaBrook/awesome-jetbrains-claude "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/rn-dev" ~/.claude/skills/iliyabrook-awesome-jetbrains-claude-rn-dev && rm -rf "$T"

manifest: .claude/skills/rn-dev/SKILL.md

source content

Project Stack

React 19 + React Native 0.81 + Expo 54
Redux Toolkit + RTK Query (server state)
TypeScript strict mode
StyleSheet.create() + Colors/FontStyles from
```
@/styles
```
React Native Reanimated for animations
Expo Router (file-based routing)
Gluestack UI (low-level primitives in
```
components/ui/
```
)

Critical Rules

Barrel exports — every new file MUST be exported from its
```
index.ts
```
Named exports only — no
```
export default
```
for components/hooks (slices use default for reducer only)
DRY — extract shared logic into hooks or utils, never copy-paste
Types co-located — export interfaces from the file that defines them (slice, API, component)

Imports — use path aliases:

@/styles

@/store

@/hooks

@/components

@/constants

MongoDB IDs — all entity IDs use
```
_id
```
field

Workflow: New Component

Create

components/ComponentName.tsx

(or

components/featureName/ComponentName.tsx

for feature groups)

Define and export
```
ComponentNameProps
```
interface
Export named function component

Use

StyleSheet.create()

with

Colors

FontStyles

from

@/styles

Add export to
```
components/index.ts
```
(and feature
```
index.ts
```
if grouped)

See references/components.md for templates and variant patterns.

Workflow: New Redux Slice

Create
```
store/slices/featureSlice.ts
```
Define state interface, initial state, reducers, selectors
Export actions (named), reducer (default), types, selectors
Register in
```
store/slices/index.ts
```
and
```
store/index.ts
```

See references/redux.md for slice template and store registration.

Workflow: New RTK Query API

Create
```
store/api/featureApi.ts
```
Use
```
createApi
```
with
```
baseQueryWithReauth
```
Define types, endpoints (queries + mutations), tag-based caching
Export auto-generated hooks
Register in
```
store/index.ts
```
(reducer + middleware + re-export)

For optimistic updates: use

onQueryStarted

api.util.updateQueryData

undo()

on error. For infinite scroll: use

serializeQueryArgs

merge

forceRefetch

pattern.

See references/redux.md for full API template, optimistic updates, and infinite scroll patterns.

Workflow: New Custom Hook

Create
```
hooks/useFeatureName.ts
```

Export

UseFeatureNameOptions

UseFeatureNameResult

interfaces

Export named function
```
useFeatureName
```
Use
```
useCallback
```
for functions,
```
useMemo
```
for computed values
Add export to
```
hooks/index.ts
```

See references/hooks.md for hook templates and patterns.

Workflow: New Screen (Expo Router)

Create file in
```
app/
```
following Expo Router conventions:
- Tab screen:
```
app/(tabs)/screen-name.tsx
```
- Route group:
```
app/(group-name)/screen-name.tsx
```
- Modal: set
```
presentation: 'transparentModal'
```
  in parent layout
Use
```
ScreenWrapper
```
component for safe area + layout
Connect to Redux via
```
useAppSelector
```
/
```
useAppDispatch
```
or RTK Query hooks

Navigation:

router.push()

router.replace()

router.back()

Reference Files

references/components.md — component templates, variant pattern, barrel exports, styling guide
references/redux.md — slice template, RTK Query API template, infinite scroll, optimistic updates, store registration
references/hooks.md — hook template, options/result pattern, cache-reading hooks, animation hooks