https://github.com/enzomanuelmangano/expo-sensors-demo
Linear-inspired 3D Logo animation with React Native
https://github.com/enzomanuelmangano/expo-sensors-demo
expo react-native reanimated sensors
Last synced: 3 months ago
JSON representation
Linear-inspired 3D Logo animation with React Native
- Host: GitHub
- URL: https://github.com/enzomanuelmangano/expo-sensors-demo
- Owner: enzomanuelmangano
- Created: 2024-09-29T10:46:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T17:03:04.000Z (12 months ago)
- Last Synced: 2025-04-24T14:08:22.945Z (6 months ago)
- Topics: expo, react-native, reanimated, sensors
- Language: TypeScript
- Homepage: https://expo.dev/blog/how-to-bring-your-react-native-apps-to-life-using-sensors
- Size: 229 KB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Skia 3D Logo Demo
This project demonstrates a 3D logo effect using React Native and Skia, inspired by Linear's app welcome screen. It showcases the power of React Native Skia for creating complex animations and 3D-like effects on mobile devices.
https://github.com/user-attachments/assets/142e733b-5b97-42f9-9f8d-b5aa2f2360e0
## Written article
You might want to check out the detailed tutorial on the Expo Blog: [How to bring your React Native apps to life using sensors](https://expo.dev/blog/how-to-bring-your-react-native-apps-to-life-using-sensors)
## Features
- 3D logo effect with realistic shadows
- Responsive to device rotation and gravity
- Animated React Native logo
- Custom background with radial gradient
## Main Components
### App Component (`src/index.tsx`)
The main component that sets up the 3D logo effect. It uses:
- `useAnimatedSensor` from React Native Reanimated to respond to device rotation and gravity
- Skia's `Canvas`, `Group`, and other primitives to create the 3D effect
- Custom `GoodOldSquare` component for the logo base
- Dynamic shadows that respond to the logo's rotation
### ReactNativeLogo Component (`src/react-logo.tsx`)
A custom component that renders the React Native logo using Skia. It features:
- Three rotated ovals to create the atom-like structure
- Centered positioning within the logo base
- Blur effect for a glowing appearance
## How It Works
1. The app uses device sensors to detect rotation and gravity changes.
2. These sensor values are used to calculate the logo's rotation using `useDerivedValue`.
3. The logo base is rendered using Skia's `Group` and `RoundedRect` components, with transforms applied for the 3D effect.
4. Shadows are dynamically adjusted based on the logo's rotation to enhance the 3D illusion.
5. The React Native logo is rendered on top of the base, completing the effect.
## Running the Project
To run this project:
1. Ensure you have React Native and its dependencies installed.
2. Clone the repository.
3. Run `npm install` or `yarn install` to install the required packages.
4. Run `npx react-native run-android` or `npx react-native run-ios` to start the app on your device or emulator.
Note: For the best experience, run this on a physical device to take advantage of the rotation and gravity sensors.
## Dependencies
- React Native
- React Native Skia
- React Native Reanimated