🎨 Design Experiments

A curated collection of high-fidelity UI experiments and fluid animations built with React Native, Expo SDK 54, Reanimated, and Skia.

---

✨ Overview

Design Experiments is a playground for exploring modern mobile UI patterns and interaction design. Each screen is a self-contained experiment that pushes the boundaries of what's possible with React Native — from gesture-driven carousels to Skia-powered graphics and spring-physics animations.

Built for learning, inspiration, and reuse. Fork it, remix it, ship it.

---

🖼️ Experiments

#	Experiment	Description
1	Vertical Carousel	A smooth, gesture-driven vertical card carousel with parallax effects and spring animations
2	Call Interface	A polished phone call UI with animated wave visualizations and interaction states
3	Financial Summary	A rich financial dashboard card with animated charts and real-time data visualization
4	Hamburger Menu	A fluid, animated side-menu with staggered item reveals and backdrop blur
5	Transactions Page	A production-grade transaction list UI featuring branded merchant icons and smooth transitions

---

🛠️ Tech Stack

Layer	Technology
Framework	Expo SDK 54 + React Native 0.81
Animations	React Native Reanimated 4
Graphics	Shopify React Native Skia
Gradients	Expo Linear Gradient
SVG	React Native SVG
Language	TypeScript 5.9
Web Companion	Next.js (in /web)

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• Expo CLI — installed globally or via npx
• Android Studio / Xcode (for native builds) or Expo Go (for quick testing)

Installation

# Clone the repository
git clone https://github.com/sandeepannandi/Design-Experiments-in-React-Native-Expo-SDK54.git
cd Design-Experiments-in-React-Native-Expo-SDK54

# Install dependencies
npm install

Running the App

# Start the Expo dev server
npm start

Then choose your target:

Key	Platform
a	Android emulator
i	iOS simulator (macOS only)
w	Web browser
📷	Scan QR code with Expo Go on a physical device

Running the Web Companion

cd web
npm install
npm run dev

---

📁 Project Structure

DesignExperiments/
├── App.tsx                  # Entry point — renders the active experiment
├── src/
│   └── screens/
│       ├── VerticalCarouselScreen.tsx
│       ├── CallInterface.tsx
│       ├── CallInterfacePage.tsx
│       ├── FinancialSummary.tsx
│       ├── FinancialSummaryPage.tsx
│       ├── HamburgerMenuPage.tsx
│       └── TransactionsPage.tsx
├── assets/                  # Brand SVGs (Airtel, Amazon, Flipkart, etc.)
├── web/                     # Next.js web companion app
├── app.json                 # Expo configuration
├── babel.config.js
├── metro.config.js
├── tsconfig.json
└── package.json

---

🔧 Troubleshooting

Babel preset missing / runtime not ready

Ensure babel-preset-expo is installed and referenced in babel.config.js:

npm install --save-dev babel-preset-expo

Missing assets referenced in app.json

Either add the referenced files under assets/, or remove the icon / splash entries from app.json.

Dependency version mismatches

Use Expo's built-in version resolver to align all packages:

npx expo install --fix

---

🤝 Contributing

Contributions are welcome! If you have a cool UI experiment, feel free to open a PR.

1. Fork the repository
2. Create a feature branch — git checkout -b experiment/my-cool-ui
3. Commit your changes — git commit -m "feat: add parallax card stack"
4. Push to the branch — git push origin experiment/my-cool-ui
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Made with ❤️ by Sandeepan Nandi