Dripsy

Responsive, unstyled UI primitives for React Native + Web

React NativeCSS in JS
nandorojo/dripsydripsy.xyzdripsy

README

og

Unstyled, responsive UI primitives for React Native + Web.

  1. ``` js
  2. <View sx={{ bg: '$primary', height: [100, 200] }} />
  3. ```

Documentation & Installation


- Documentation
- Installation

Highlights


https://user-images.githubusercontent.com/13172299/136265481-4c93d5bb-15e7-4e5f-9464-64748ebf1214.mp4

- Custom fonts, edited globally
- Full TypeScript support
- Responsive styles
- Universal (Android, iOS, Web, & more)
- Works with Expo
- Works with Vanilla React Native
- Works with Next.js
- Full theme support
- Custom theme variants
- Insanely simple API (themed, responsive designs in one line!)
- Works with Animated/Reanimated/Moti
- Dark mode / custom color modes
- Memoized styles, even when written inline
- Atomic CSS classes, with StyleSheet.create under the hood
- Use with @expo/vector-icons (example)
- Linear Gradient
- Performant: sx prop is memoized under the hood (even if you write it in render)

Next.js Conf


<img
  alt="Fernando Rojo at Next.js Conf"
  src="https://user-images.githubusercontent.com/13172299/138509139-412b2d32-841b-4a7e-950e-f8721c1da17f.png"
/>

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

License


MIT