react-native feat/v8

updated to be compatible with v8
new ui
ui components extracted to ui package
better hmr (story list updates live without reloads)

breaking:

new requirements
- @gorhom/bottom-sheet, react-native-gesture-handler, react-native-reanimated, react-native-svg

todo:

[ ] new controls ui
[ ] currently on rn cli a react-native-url-polyfill is needed to not crash the app, need to track this down and fix
[x] rework the bottom sheet
[ ] make the new ui work on web/wide screens
[ ] refactor theme, right now its a mix between old and new (copy of web theme). Instead should update anywhere that references old theme values to use new theme values.

progress:

https://github.com/storybookjs/react-native/assets/3481514/be142218-189f-47f4-a3b6-13856a78c836

Jan 21 '24 14:01 dannyhw

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@adobe/[email protected]	None	`0`	180 kB	adobe-admin
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+57`	11.2 MB	nicolo-ribaudo
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+53`	10.8 MB	nicolo-ribaudo
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+60`	11.2 MB	nicolo-ribaudo
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+57`	10.8 MB	nicolo-ribaudo
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+57`	10.9 MB	nicolo-ribaudo
npm/@babel/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+53`	10.8 MB	nicolo-ribaudo
npm/@babel/[email protected]	unsafe Transitive: environment, filesystem, shell	`+64`	12.1 MB	nicolo-ribaudo
npm/@babel/[email protected]	environment Transitive: filesystem, shell, unsafe	`+158`	14.5 MB	nicolo-ribaudo
npm/@babel/[email protected]	environment, filesystem, unsafe Transitive: shell	`+71`	11.8 MB	nicolo-ribaudo
npm/@expo/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+548`	127 MB	aleqsio, brentvatne, bycedric, ...21 more
npm/@expo/[email protected]	environment, eval, network Transitive: filesystem, shell, unsafe	`+523`	179 MB	brentvatne
npm/@mdx-js/[email protected]	Transitive: environment	`+8`	1.99 MB	wooorm
npm/@storybook/[email protected]	None	`+9`	3.85 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment	`+9`	6.11 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+269`	250 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+312`	257 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+323`	258 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	None	`+1`	12.4 kB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+56`	20.1 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment	`+6`	890 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment	`+7`	6.04 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment	`+7`	6.05 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	None	`0`	9.96 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment	`+2`	82 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+268`	250 MB	alexandrebodin, amalik2, dandean, ...26 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+291`	237 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+424`	289 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval	`+21`	893 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+574`	280 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	None	`+1`	11.7 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, shell, unsafe	`+295`	34.4 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+58`	18.2 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+237`	232 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	None	`+1`	111 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+349`	255 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+238`	232 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+97`	15.5 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+92`	14.7 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	None	`0`	9.18 MB	shilman
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+244`	233 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment	`+4`	6 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+59`	7.51 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+51`	12.6 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	None	`0`	2.29 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	None	`0`	168 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+370`	289 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+44`	6.84 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	None	`0`	334 kB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment	`+4`	4.88 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+2092`	715 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+487`	299 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+266`	272 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval	`+17`	711 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+254`	233 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+379`	67.8 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment	`+9`	5.66 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem	`+40`	6.47 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@types/[email protected]	None	`+1`	16 kB	types
npm/@types/[email protected]	None	`+3`	1.63 MB	types
npm/@types/[email protected]	None	`0`	6.28 kB	types
npm/@ungap/[email protected]	None	`0`	26.2 kB	webreflection
npm/@vitest/[email protected]	None	`+14`	1.32 MB	oreanno
npm/@vitest/[email protected]	None	`+1`	31.6 kB	antfu, oreanno, patak
npm/[email protected]	Transitive: environment	`+2`	49.2 kB	tootallnate
npm/[email protected]	Transitive: environment, filesystem, shell, unsafe	`+61`	12 MB	nicolo-ribaudo
npm/[email protected]	None	`+1`	43.3 kB	rich_harris
npm/[email protected]	None	`0`	15.9 kB	wooorm
npm/[email protected]	None	`+2`	25.1 kB	wooorm
npm/[email protected]	None	`+2`	42.3 kB	wooorm
npm/[email protected]	None	`+2`	24.5 kB	wooorm
npm/[email protected]	None	`0`	3.52 kB	sindresorhus
npm/[email protected]	Transitive: environment	`+3`	747 kB	probablyup
npm/[email protected]	environment Transitive: eval, network	`+29`	10.1 MB	necolas
npm/[email protected]	None	`+9`	192 kB	wooorm
npm/[email protected]	None	`+8`	149 kB	wooorm
npm/[email protected]	None	`0`	7.75 kB	wooorm
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+575`	280 MB	ndelangen, shilman, usulpro
npm/[email protected]	None	`+1`	33.4 kB	wooorm
npm/[email protected]	None	`+2`	66.3 kB	wooorm
npm/[email protected]	None	`+3`	94.8 kB	wooorm

View full report↗︎

Jan 21 '24 14:01 socket-security[bot]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

Jan 21 '24 14:01 socket-security[bot]

@SocketSecurity ignore-all

Jan 21 '24 15:01 dannyhw

Hey! Great work here. Just wondering what work is left to get v8 support and maybe offer assistance to move this along. Thanks!

Jun 08 '24 23:06 vstlouis

@vstlouis Hey at this point its missing

[ ] Updated controls ui
[x] rework the bottom sheet
[ ] make the new ui work on web/wide screens
[ ] refactor theme, right now its a mix between old and new (copy of web theme). Instead should update anywhere that references old theme values to use new theme values.

Problem is I've had a lot going on in my personal/work life so haven't had any time to pick this up.

If you or anyone wants to have a go at bringing the controls ui closer to the web version of mobile ui or anything else listed then im happy to review prs

Jun 09 '24 10:06 dannyhw

v8.2 was a bit of a setback as there was a large change to upstream apis that broke a lot in RN storybook. I've now introduced @storybook/react-native/metro/withStorybook That works around many issues and also provides the required metro config.

Metro config for storybook should now be done like this in 8.2.0-alpha.1

const withStorybook = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: process.env.STORYBOOK_ENABLED === 'true',
  configPath: path.resolve(__dirname, './.storybook'),
});

This follows the same pattern as tamagui and nativewind for metro configuration. Should also be compatible, see this tamagui example: https://github.com/dannyhw/tamagui-expo-router-sb8

Note that this is still early and until we reach RC status there can still be a few more changes. I believe this withStorybook change is actually positive and makes it easier to explain setup anyway.

Jul 20 '24 13:07 dannyhw

v8.2 was a bit of a setback as there was a large change to upstream apis that broke a lot in RN storybook. I've now introduced @storybook/react-native/metro/withStorybook That works around many issues and also provides the required metro config.

Metro config for storybook should now be done like this in 8.2.0-alpha.1
const withStorybook = require('@storybook/react-native/metro/withStorybook');

module.exports = withStorybook(defaultConfig, {
  enabled: process.env.STORYBOOK_ENABLED === 'true',
  configPath: path.resolve(__dirname, './.storybook'),
});
This follows the same pattern as tamagui and nativewind for metro configuration. Should also be compatible, see this tamagui example: https://github.com/dannyhw/tamagui-expo-router-sb8

Note that this is still early and until we reach RC status there can still be a few more changes. I believe this withStorybook change is actually positive and makes it easier to explain setup anyway.

Hey @dannyhw , wondering how this ties in to existing metro configs that select different App.tsx files based on STORYBOOK_ENABLED eg:

if (process.env.STORYBOOK_ENABLED === 'true') {
  const { generate } = require('@storybook/react-native/scripts/generate')
  generate({
    // eslint-disable-next-line no-undef
    configPath: path.resolve(__dirname, './.storybook'),
  })
  config.resolver.sourceExts = [
    // XXX: For the App.storybook.tsx file this must be first
    'storybook.tsx',
    ...config.resolver.sourceExts,
    'mjs',
  ]
}

The idea is to make sure storybook isn't bundled on prod apps. p.s. appreciate the effort on updating this to 8.2 :)

Jul 29 '24 15:07 kzlar

@kzlar If you want to remove storybook from the bundle the easiest way is to adjust metros resolveRequest to ignore storybook files.

defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(
    context,
    moduleName,
    platform
  );

  if (
    process.env.STORYBOOK_ENABLED !== "true" &&
    defaultResolveResult?.filePath?.includes?.(".storybook/")
  ) {
    return {
      type: "empty",
    };
  }

  return defaultResolveResult;
};

withStorybook should respect any existing resolveRequest function.

I could add this automatically but it requires resetting cache when switching between including/not including storybook, so I'm not sure.

Jul 29 '24 15:07 dannyhw

@kzlar If you want to remove storybook from the bundle the easiest way is to adjust metros resolveRequest to ignore storybook files.
defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(
    context,
    moduleName,
    platform
  );

  if (
    process.env.STORYBOOK_ENABLED !== "true" &&
    defaultResolveResult?.filePath?.includes?.(".ondevice/")
  ) {
    return {
      type: "empty",
    };
  }

  return defaultResolveResult;
};
withStorybook should respect any existing resolveRequest function.

I could add this automatically but it requires resetting cache when switching between including/not including storybook, so I'm not sure.

@dannyhw ty for your reply, and please let me know if you want further discussion on discord or anywhere else so to not spam this pr :)

Wouldn't that method above still include storybook in the production app? The App.storybook.tsx file has this import for me:

import { view } from './.storybook/storybook.requires'

const StorybookApp = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
})

If I merge it into App.tsx and add the resolveRequest as you mentioned, it'd still bundle in everything imported from storybook.requires.ts which has a bunch of stuff that aren't useful in production. Right?

Another minor issue with the above is that my stories are shared between web and native in a package that is separate from my expo app (still using a relatively old tamagui monorepo setup with apps/next, apps/expo for the apps and packages/app for the components).

Jul 29 '24 16:07 kzlar

@kzlar it wouldn't bundle it in because its resolving an empty module, you'd basically have a fake empty module in its place. You can also add other filepaths here if you want and exclude everything that you think shouldn't get included.

see

  if (
    process.env.STORYBOOK_ENABLED !== "true" &&
    defaultResolveResult?.filePath?.includes?.(".storybook/")
  ) {
    return {
      type: "empty",
    };
  }

Feel free to dm me on discord

Jul 29 '24 16:07 dannyhw

added an alpha version of the expo template

to try run npx create-expo-app --template expo-template-storybook@next alphastorybook8

Jul 30 '24 15:07 dannyhw

Hi! I'm getting

The package at "../../node_modules/jose/dist/node/esm/runtime/decrypt.js" attempted to import the Node standard library module "node:crypto".
It failed because the native React runtime does not include the Node standard library.

on 8.2.0-alpha.1

It randomly alternates between node:crypto and node:buffer not found in jose. I tried digging but have no idea which package pulls it and why.

When storybook is disabled the app builds just fine. And storybook works fine in v7.

Any pointers?

Thanks!

Aug 19 '24 15:08 moimael

react-native react-native copied to clipboard

feat/v8

Next steps

react-native
react-native copied to clipboard