dripsy

🍷 A super-simple responsive design system for React Native Web.


Keywords
react-native, ios, android
License
MIT
Install
npm install dripsy@3.3.0-alpha.1

Documentation

og

Unstyled, responsive UI primitives for React Native + Web.

<View sx={{ bg: '$primary', height: [100, 200] }} />

Documentation & Installation

Highlights

Code.-.App.tsx.dripsy.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

Fernando Rojo at Next.js Conf

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