# my-react-native-playground

> Open-source collection of advanced React Native UI animations and components

An open-source repository containing recreated mobile UI interactions and micro-animations built with React Native and Reanimated. It features practical implementations of popular design concepts, including a dynamic password-strength stroke animation, custom time pickers, and dynamic island transitions.

Website: https://github.com/bufgix/my-react-native-playground

## What it is for

- Inspect production-ready React Native animation code for complex micro-interactions
- Implement an animated password strength ring indicator into a mobile app
- Study implementations of custom UI components like gauge charts and time pickers

## Features

- PasswordInput component featuring an animated stroke and color transitions based on strength
- Solar Time Picker and Scrollable Time Picker components
- Scroll Numbers animation recreation
- Telegram Dynamic Island Profile and Chat Story transitions
- Notification Stack interaction model
- BMI Calculator gauge chart implementation
- Built with React Native, TypeScript, and Expo

## Pricing

Open source

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: iOS, Android
- For: React Native and mobile frontend developers looking for animation examples
- Tags: react native, animations, reanimated, expo, typescript, mobile ui

## Why it was saved

- [@farukbfx, 2 September 2023](https://x.com/farukbfx/status/1697772173484507559): Thread follow-up by the author links the playground where this password ring implementation lives, so the technique can be studied and reused.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/my-react-native-playground

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.