@startupjs-ui/div 0.1.5 → 0.1.11

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.11](https://github.com/startupjs/startupjs-ui/compare/v0.1.10...v0.1.11) (2026-01-20)
+
+**Note:** Version bump only for package @startupjs-ui/div
+
+
+
+
+
+## [0.1.10](https://github.com/startupjs/startupjs-ui/compare/v0.1.9...v0.1.10) (2026-01-18)
+
+
+### Features
+
+* **div:** add automatic Reanimated support for animations and transitions ([#3](https://github.com/startupjs/startupjs-ui/issues/3)) ([043c39a](https://github.com/startupjs/startupjs-ui/commit/043c39aafd332276082bcbe3233ad0355b85e38a))
+
+
+
+
+
 ## [0.1.5](https://github.com/startupjs/startupjs-ui/compare/v0.1.4...v0.1.5) (2025-12-29)
 
 **Note:** Version bump only for package @startupjs-ui/div

package/README.mdx

@@ -187,6 +187,37 @@ styl`
 `
 ```
 
+## Animations
+
+Div automatically uses React Native Reanimated when a `transition` or `animation` property is detected in the style. This allows you to create smooth animations without any additional setup.
+
+**Note:** When using modifier classes to add transitions/animations dynamically, set `animation: none` in the base styles. This ensures Div uses the animated component from the start.
+
+```jsx example
+const [isGreen, setIsGreen] = useState(false)
+const boxStyle = {
+  width: 50,
+  height: 50,
+  backgroundColor: isGreen ? 'green' : 'red',
+  transitionProperty: 'backgroundColor',
+  transitionDuration: 1000
+}
+const buttonStyle = {
+  paddingVertical: 8,
+  paddingHorizontal: 16,
+  backgroundColor: '#2962FF',
+  borderRadius: 4
+}
+return (
+  <Div row align='left' vAlign='center' gap>
+    <Div style={boxStyle} />
+    <Div style={buttonStyle} onPress={() => setIsGreen(!isGreen)}>
+      <Span style={{ color: 'white' }}>Toggle Color</Span>
+    </Div>
+  </Div>
+)
+```
+
 ## Sandbox
 
 <Sandbox

package/index.tsx

@@ -9,11 +9,19 @@ import {
   type ViewProps,
   type AccessibilityRole
 } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { pug, observer, u, useDidUpdate } from 'startupjs'
 import { colorToRGBA, getCssVariable, themed } from '@startupjs-ui/core'
 import { useDecorateTooltipProps } from './useTooltip'
 import STYLES from './index.cssx.styl'
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+function hasAnimatedProperty (style: any): boolean {
+  if (!style) return false
+  return Object.keys(style).some(key => key.startsWith('animation') || key.startsWith('transition'))
+}
+
 const DEPRECATED_PUSHED_VALUES = ['xs', 'xl', 'xxl']
 const PRESSABLE_PROPS = ['onPress', 'onLongPress', 'onPressIn', 'onPressOut']
 const isWeb = Platform.OS === 'web'
@@ -166,7 +174,10 @@ function Div ({
 
   if (!accessible) accessibilityRole = undefined
 
-  const Component = isPressable ? Pressable : View
+  const isAnimated = hasAnimatedProperty(style) || hasAnimatedProperty(pressableStyle)
+  const Component = isPressable
+    ? (isAnimated ? AnimatedPressable : Pressable)
+    : (isAnimated ? Animated.View : View)
   const testID = props.testID ?? props['data-testid']
   const divElement = pug`
     Component.root(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/div",
-  "version": "0.1.5",
+  "version": "0.1.11",
   "publishConfig": {
     "access": "public"
   },
@@ -12,14 +12,15 @@
     "./useTooltip": "./useTooltip.tsx"
   },
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.1.5",
-    "@startupjs-ui/core": "^0.1.5",
-    "@startupjs-ui/span": "^0.1.5"
+    "@startupjs-ui/abstract-popover": "^0.1.11",
+    "@startupjs-ui/core": "^0.1.11",
+    "@startupjs-ui/span": "^0.1.11"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "1b90893dc24a9b3ffde1284c58996b42e98913c6"
+  "gitHead": "b21659a9d8408cd921560196db22a18fd8eda82d"
 }