Skip to content

Commit

Permalink
v4 release notes
Browse files Browse the repository at this point in the history
  • Loading branch information
marklawlor committed Jul 27, 2023
1 parent 57431dc commit f97cb2d
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions v4-release-DRAFT.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ We're well aware it's been some time since our last update, and in recognition o

## The Updated Architecture

Nativewind v4 is distinguished by its transition to a `jsxImportSource` transform, making the previous babel plugin redundant. In the older architecture, babel wrapped every component with a `className` in the `StyledComponent` wrapper (or it was manually wrapped using `styled()`). This wrapper converted the `className` prop into the injected `StyleSheet` styles. Now, with the `jsxImportSource` transform, this conversion happens at the `jsx` level, allowing for the `className` prop to be accessed inside a component, and permitting it to be passed or altered for child components. This change eradicates a major limitation of Nativewind and encourages component styling via widely used tools like `classnames`, `clsx`, or `cva`.
Nativewind v4 is distinguished by its transition to a `jsxImportSource` transform, making the previous babel plugin redundant. In the older architecture, babel wrapped every component with a `className` in the `StyledComponent` wrapper (or it was manually wrapped using `styled()`). This wrapper converted the `className` prop into the injected `StyleSheet` styles. Now, with the `jsxImportSource` transform, this conversion happens at the `jsx` level, **allowing for the `className` prop to be accessed inside a component, and permitting it to be passed or altered for child components**. This change eradicates a major limitation of Nativewind and encourages component styling via widely used tools like `classnames`, `clsx`, or `cva`.

This `jsx` transform also substantially enhances performance, applying the transform only to leaf components (e.g., `View`, `Text`) rather than higher-level custom components. For example, in the case of the `FlatList` component, which comprises several sub-components, dynamic style changes will only re-render the `View` within your `ListFooterComponent`. This improvement is especially crucial as Nativewind v4 introduces a host of new dynamic styles!

This architectural revision also solves a notable issue we encountered with Nativewind - compatibility with Metro and Babel cache. With the new architecture, Nativewind now seamlessly integrates with the Metro cache, speeding up build times and supporting fast refresh when updates are made to your theme in `tailwind.config.js`. These enhancements emphasize our dedication to delivering a more efficient and streamlined development experience.
This architectural revision also solves Nativewind's second major issue - compatibility with Metro and Babel cache. With the new architecture, Nativewind now seamlessly integrates with the Metro cache, speeding up build times and **supporting fast refresh when updates are made to your theme in `tailwind.config.js`**. These enhancements emphasize our dedication to delivering a more efficient and streamlined development experience.

## Breaking Changes from v2

Expand Down

0 comments on commit f97cb2d

Please sign in to comment.