Storybook: How to use with react-native?

Created on 15 Apr 2017  ·  28Comments  ·  Source: storybookjs/storybook

Issue by hadfieldn
_Tuesday Jan 03, 2017 at 18:40 GMT_
_Originally opened as https://github.com/storybooks/storybook-addon-knobs/issues/83_

It looks like others have had success getting knobs to work with react-native storybook, but when I include import '@kadira/storybook-addon-knobs/register'; in my addons.js file I get the error document is not defined -- due to a dependency on insert-css, which requires document.

Is there another way to register the addon that works with react native?

knobs question / support
Source
picture shilman

Most helpful comment

For those who are struggling with "document is not defined" - it works if I get rid of import "./addons" from the main storybook.

It appears that you don't need to import "./addons" but rather that the storybook server takes it automatically from the stroybook config folder.
There is also a need to make sure that "./addons.js" is a js file and not a ts or tsx file if you are using typescript.

https://github.com/storybooks/storybook/blob/release/3.3/app/react-native/docs/manual-setup.md - needs to be changed, it shouldn't require "./addons" in storybook.js

picture alonbardavid on 14 Sep 2017
👍7 🎉1 😄1

All 28 comments

Comment by arunoda
_Thursday Jan 05, 2017 at 17:04 GMT_

It's works for me without any issues.

shilman picture shilman on 15 Apr 2017

Comment by ndbroadbent
_Tuesday Feb 21, 2017 at 10:25 GMT_

Also if you interested in using this in the browser instead of on your device, you should check out react-native-web. It can be tricky to set up, but it's working very well for me.

shilman picture shilman on 15 Apr 2017

Comment by xareelee
_Friday Mar 10, 2017 at 05:56 GMT_

Hi @ndbroadbent

How to set up react-native-web to develop React Native components with storybook on a browser?

shilman picture shilman on 15 Apr 2017

Comment by Gongreg
_Thursday Mar 23, 2017 at 20:05 GMT_

Hey, You can try to look into https://github.com/wix/react-native-storybook-example . It has knobs running in react-native.

shilman picture shilman on 15 Apr 2017

It looks like others have had success getting knobs to work with react-native storybook, but when I include import '@kadira/storybook-addon-knobs/register'; in my addons.js file I get the error document is not defined -- due to a dependency on insert-css, which requires document.

I'm struck here as well. Obviously there is a dependency on the 'document' which is missing in the react-native environment. Any workarounds/fixes?

sowdri picture sowdri on 23 Jun 2017

@Gongreg any help here?

shilman picture shilman on 23 Jun 2017

@shilman I can't reproduce it. The default environment definitely works. I didn't hear that crna users would also have any problems.

@sowdri , are you using any custom packager? What RN version are you using?

Gongreg picture Gongreg on 26 Jun 2017

@Gongreg I'm using the default setup. Recently star But with Typescript, not sure if that would have an impact. I'm using the latest stable version of react-native rn-0.45.

sowdri picture sowdri on 27 Jun 2017

@sowdri, Could you try to get an example with this issue?

Gongreg picture Gongreg on 27 Jun 2017

This issue is quite easy to reproduce:

react-native init StoryBookKnobsDemoApp
cd StoryBookKnobsDemoApp/
getstorybook
rm -rf node_modules
yarn install

Either while running getstorybook or while deleting node_modules and running yarn install again, we could see the following warning:

Nishas-MBP:StoryBookKnobsDemoApp sowdri$ yarn install
yarn install v0.24.6
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@storybook/[email protected]" has incorrect peer dependency "[email protected] - 0.43.x".
warning "[email protected]" has incorrect peer dependency "react@^15.6.1".
warning "[email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-0".
warning "@storybook/[email protected]" has incorrect peer dependency "react@^0.14.7 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^0.14.7 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^0.14.3 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^0.14.7 || ^15.0.0".
warning "[email protected]" has incorrect peer dependency "react@^15.5.4".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 17.94s.

I'm guessing the issue is with this incorrect peer dependency:

warning "[email protected]" has incorrect peer dependency "react@^15.6.1".

Now if I try to run storybook:

yarn run storybook

The following error occurs:

yarn run v0.24.6
$ storybook start -p 7007 
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).

React Native Storybook started on => http://localhost:7007/

Scanning 845 folders for symlinks in /Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules (8ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/storybook
   /Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp
   /Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp 


React packager ready.

Loading dependency graph, done.
webpack built d08752acfec1daf1f09f in 5758ms
Hash: d08752acfec1daf1f09f
Version: webpack 2.6.1
Time: 5758ms
                   Asset     Size  Chunks                    Chunk Names
static/manager.bundle.js  4.63 MB       0  [emitted]  [big]  manager
chunk    {0} static/manager.bundle.js (manager) 1.66 MB [entry] [rendered]
    [1] ./~/react/index.js 190 bytes {0} [built]
   [15] ./~/babel-runtime/core-js/object/get-prototype-of.js 104 bytes {0} [built]
   [41] ./~/global/window.js 232 bytes {0} [built]
  [116] ./~/@storybook/ui/dist/index.js 2.41 kB {0} [built]
  [185] ./~/@storybook/react-native/dist/manager/index.js 495 bytes {0} [built]
  [186] ./storybook/addons.js 88 bytes {0} [built]
  [192] ./~/@storybook/addon-actions/register.js 30 bytes {0} [built]
  [195] ./~/@storybook/addon-links/register.js 30 bytes {0} [built]
  [200] ./~/@storybook/react-native/dist/manager/provider.js 3.86 kB {0} [built]
  [204] ./~/@storybook/ui/dist/modules/api/index.js 759 bytes {0} [built]
  [207] ./~/@storybook/ui/dist/modules/shortcuts/index.js 509 bytes {0} [built]
  [229] ./~/@storybook/ui/dist/modules/ui/index.js 1.01 kB {0} [built]
  [349] ./~/mantra-core/index.js 41 bytes {0} [built]
  [469] ./~/uuid/index.js 120 bytes {0} [built]
  [473] multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js 40 bytes {0} [built]
     + 459 hidden modules

ERROR in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMount.js 17:12-38
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMount.js 19:24-62
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/findDOMNode.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/findDOMNode.js 15:24-62
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactUpdateQueue.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactUpdateQueue.js 15:24-62
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDebugTool.js 16:29-72
 @ ./~/react-dom/lib/ReactInstrumentation.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactNodeTypes.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactNodeTypes.js 16:12-38
 @ ./~/react-dom/lib/getHostComponentFromComposite.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/instantiateReactComponent.js
Module not found: Error: Can't resolve 'react/lib/getNextDebugID' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/instantiateReactComponent.js 20:21-56
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactDOMOption.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactDOMOption.js 15:12-38
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactMultiChild.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactMultiChild.js 19:24-62
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactCompositeComponent.js 16:12-38
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactCompositeComponent.js 18:24-62
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/ReactChildReconciler.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/ReactChildReconciler.js 29:27-70 37:31-74
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/LinkedValueUtils.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/LinkedValueUtils.js 18:12-38
 @ ./~/react-dom/lib/ReactDOMTextarea.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/flattenChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/flattenChildren.js 26:27-70 42:33-76
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/checkReactTypeSpec.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/checkReactTypeSpec.js 29:27-70 71:37-80
 @ ./~/react-dom/lib/ReactCompositeComponent.js
 @ ./~/react-dom/lib/instantiateReactComponent.js
 @ ./~/react-dom/lib/ReactMount.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

ERROR in ./~/react-dom/lib/traverseAllChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/sowdri/Documents/3rd-party-repo/StoryBookKnobsDemoApp/node_modules/react-dom/lib'
 @ ./~/react-dom/lib/traverseAllChildren.js 15:24-62
 @ ./~/react-dom/lib/ReactChildReconciler.js
 @ ./~/react-dom/lib/ReactMultiChild.js
 @ ./~/react-dom/lib/ReactDOMComponent.js
 @ ./~/react-dom/lib/ReactDefaultInjection.js
 @ ./~/react-dom/lib/ReactDOM.js
 @ ./~/react-dom/index.js
 @ ./~/@storybook/ui/dist/modules/ui/routes.js
 @ ./~/@storybook/ui/dist/modules/ui/index.js
 @ ./~/@storybook/ui/dist/index.js
 @ ./~/@storybook/react-native/dist/manager/index.js
 @ multi ./storybook/addons.js ./~/@storybook/react-native/dist/manager/index.js

As this is a default setup. It will be good to fix this.

sowdri picture sowdri on 29 Jun 2017

@sowdri please upgrade @storybook/cli and try again. this was fixed in the latest release 3.1.6

shilman picture shilman on 29 Jun 2017

@sowdri @shilman is this actually fixed? On the latest versions, the knobs addon still uses insert-css and has a peer dependency react-dom. How can it work in react native?

idris picture idris on 2 Aug 2017

Hey, @idris.
Those dependencies are used in manager side of addon (in browser). There both inser-css and react-dom do work :)

Gongreg picture Gongreg on 7 Aug 2017

@Gongreg
I still stuck at this error: Can't find module: document
My env:

  • @storybook/addon-knobs: 3.2.8
  • @storybook/react: 3.2.8
  • @storybook/react-native": 3.2.8

If I remove this line: import '@storybook/addon-knobs/register'; from addon.js, it works without error, but knobs not work (of course). Otherwise, it doesn't

dzuncoi picture dzuncoi on 12 Sep 2017

@dzuncoi We recently added addon-knobs to our own example / kitchen-sink for react-native.

But this is still on the release/3.3 branch:
https://github.com/storybooks/storybook/tree/release/3.3/examples/react-native-vanilla

Perhaps this is of help already for you.
You could try the alpha release?

ndelangen picture ndelangen on 12 Sep 2017

@ndelangen
I follow this example and update version to 3.3.0-alpha.0, but it's still. I don't think the problem is about version, someone were successful with previous version, there should be something that we miss, I'll try to investigate

dzuncoi picture dzuncoi on 13 Sep 2017

@sowdri Did you make it work?

dzuncoi picture dzuncoi on 13 Sep 2017

For those who are struggling with "document is not defined" - it works if I get rid of import "./addons" from the main storybook.

It appears that you don't need to import "./addons" but rather that the storybook server takes it automatically from the stroybook config folder.
There is also a need to make sure that "./addons.js" is a js file and not a ts or tsx file if you are using typescript.

https://github.com/storybooks/storybook/blob/release/3.3/app/react-native/docs/manual-setup.md - needs to be changed, it shouldn't require "./addons" in storybook.js

alonbardavid picture alonbardavid on 14 Sep 2017
👍7 🎉1 😄1

@alonbardavid
Ohhh you made my day, thank you so much.
Btw, can you tell that how could you find this way? I spent nearly a day to research but no clue about this.

dzuncoi picture dzuncoi on 14 Sep 2017

Sure, I found out where inject-css was used, tracked it up until I realized that it was only loaded through @storybook/addon-knobs/register.
It was then obvious that either it doesn't work for anyone or you don't need to require it from react-native itself. I then looked at the manual for regular storybook and there was really no mention of requiring addons.js at all.

alonbardavid picture alonbardavid on 14 Sep 2017

or you don't need to require it from react-native itself

That's what I missed 😅 thank you.

dzuncoi picture dzuncoi on 14 Sep 2017

@storybook/addon-info outputs the same message as well, any solutions? same goes for notes addon.

notgiorgi picture notgiorgi on 26 Sep 2017

@notgiorgi storybook addon-info doesn't work with react native.

Gongreg picture Gongreg on 26 Sep 2017

Then we need this: https://github.com/storybooks/storybook/issues/1895

if someone can provide the list, I could do the PR

notgiorgi picture notgiorgi on 26 Sep 2017

@notgiorgi, every addon has a list of apps it supports.

https://github.com/storybooks/storybook/tree/master/addons/actions
https://github.com/storybooks/storybook/tree/master/addons/comments
and so on.

Gongreg picture Gongreg on 26 Sep 2017
👍1

I have the same issue - yarn run storybook provides this output then hangs. Reading comments above, I'm not including addon-info and am on the latest version of Storybook. Help?

@storybook/react-native@^3.2.11
[email protected]:

Edit: Attempting to open the web browser as instructed gives

Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook

Edit # 2: Fixed by upgrading react-dom to match my react version in package.json:
"react-dom": "16.0.0-alpha.12",


Error message details

$ storybook start -p 7007
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).
Scanning 1069 folders for symlinks in /Users/Luke/Projects/mobile2mr/node_modules (8ms)

React Native Storybook started on => http://localhost:7007/

Scanning 1069 folders for symlinks in /Users/Luke/Projects/mobile2mr/node_modules (8ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/Luke/Projects/mobile2mr/storybook
/Users/Luke/Projects/mobile2mr
/Users/Luke/Projects/mobile2mr

React packager ready.

Loading dependency graph, done.
webpack built d655cd9ffeef7fe8fd38 in 3963ms
Hash: d655cd9ffeef7fe8fd38
Version: webpack 3.6.0
Time: 3963ms
Asset Size Chunks Chunk Names
static/manager.bundle.js 7.59 MB 0 [emitted] [big] manager
[22] ./node_modules/@storybook/ui/node_modules/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
[23] ./node_modules/@storybook/ui/node_modules/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
[53] ./node_modules/global/window.js 232 bytes {0} [built]
[223] ./node_modules/@storybook/ui/dist/index.js 2.41 kB {0} [built]
[334] multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {0} [built]
[335] ./storybook/addons.js 88 bytes {0} [built]
[336] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
[421] ./node_modules/@storybook/addon-links/register.js 30 bytes {0} [built]
[424] ./node_modules/@storybook/react-native/dist/manager/index.js 495 bytes {0} [built]
[461] ./node_modules/@storybook/ui/dist/modules/api/index.js 821 bytes {0} [built]
[464] ./node_modules/@storybook/ui/dist/modules/ui/index.js 1.01 kB {0} [built]
[829] ./node_modules/@storybook/react-native/dist/manager/provider.js 3.94 kB {0} [built]
[830] ./node_modules/@storybook/react-native/node_modules/babel-runtime/core-js/object/get-prototype-of.js 104 bytes {0} [built]
[831] ./node_modules/@storybook/react-native/node_modules/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
[846] ./node_modules/@storybook/react-native/dist/manager/components/PreviewHelp.js 2.92 kB {0} [built]
+ 832 hidden modules

ERROR in ./node_modules/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactCompositeComponent.js 16:12-38
@ ./node_modules/react-dom/lib/instantiateReactComponent.js
@ ./node_modules/react-dom/lib/ReactMount.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactMount.js 17:12-38
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/LinkedValueUtils.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/LinkedValueUtils.js 18:12-38
@ ./node_modules/react-dom/lib/ReactDOMTextarea.js
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactDOMOption.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactDOMOption.js 15:12-38
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactNodeTypes.js
Module not found: Error: Can't resolve 'react/lib/React' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactNodeTypes.js 16:12-38
@ ./node_modules/react-dom/lib/getHostComponentFromComposite.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactDebugTool.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactDebugTool.js 16:29-72
@ ./node_modules/react-dom/lib/ReactInstrumentation.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/checkReactTypeSpec.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/checkReactTypeSpec.js 29:27-70 71:37-80
@ ./node_modules/react-dom/lib/ReactCompositeComponent.js
@ ./node_modules/react-dom/lib/instantiateReactComponent.js
@ ./node_modules/react-dom/lib/ReactMount.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/flattenChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/flattenChildren.js 26:27-70 42:33-76
@ ./node_modules/react-dom/lib/ReactMultiChild.js
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactChildReconciler.js
Module not found: Error: Can't resolve 'react/lib/ReactComponentTreeHook' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactChildReconciler.js 29:27-70 37:31-74
@ ./node_modules/react-dom/lib/ReactMultiChild.js
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactMultiChild.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactMultiChild.js 19:24-62
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/traverseAllChildren.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/traverseAllChildren.js 15:24-62
@ ./node_modules/react-dom/lib/flattenChildren.js
@ ./node_modules/react-dom/lib/ReactMultiChild.js
@ ./node_modules/react-dom/lib/ReactDOMComponent.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactUpdateQueue.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactUpdateQueue.js 15:24-62
@ ./node_modules/react-dom/lib/ReactReconcileTransaction.js
@ ./node_modules/react-dom/lib/ReactDefaultInjection.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactMount.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactMount.js 19:24-62
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/ReactCompositeComponent.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/ReactCompositeComponent.js 18:24-62
@ ./node_modules/react-dom/lib/instantiateReactComponent.js
@ ./node_modules/react-dom/lib/ReactMount.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/findDOMNode.js
Module not found: Error: Can't resolve 'react/lib/ReactCurrentOwner' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/findDOMNode.js 15:24-62
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

ERROR in ./node_modules/react-dom/lib/instantiateReactComponent.js
Module not found: Error: Can't resolve 'react/lib/getNextDebugID' in '/Users/Luke/Projects/mobile2mr/node_modules/react-dom/lib'
@ ./node_modules/react-dom/lib/instantiateReactComponent.js 20:21-56
@ ./node_modules/react-dom/lib/ReactMount.js
@ ./node_modules/react-dom/lib/ReactDOM.js
@ ./node_modules/react-dom/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/react-native/dist/manager/index.js
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js

lukewlms picture lukewlms on 27 Sep 2017

@lukecwilliams The issue is resolved for you? Or are you manually changing a package.json file in our package? If you have founds a fix in our code, could you open a PR? 👍

ndelangen picture ndelangen on 29 Sep 2017

@ndelangen I could look at a fix - currently I have to modify AppDelegate.m every time I want to switch between Storybook and my app. I'd prefer to only need to run the separate packager and have Storybook read the location of my file automatically (./dist/storybook/index.ios.js).

To confirm, is that not currently possible?

lukewlms picture lukewlms on 2 Oct 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jonovono picture Jonovono  ·  3Comments
ZigGreen picture ZigGreen  ·  3Comments
oriSomething picture oriSomething  ·  3Comments
alexanbj picture alexanbj  ·  3Comments
tomitrescak picture tomitrescak  ·  3Comments