Merge pull request #750 from dannyhw/feat/rn-v7

feat: update for react native v7

content/intro-to-storybook/react-native/en/composite-component.md

@@ -135,7 +135,7 @@ export const Empty = {
 
 `TaskStory.args.task` supplies the shape of a `Task` that we created and exported from the `Task.stories.js` file. Similarly, the `argTypes` we added for `onPinTask` and `onArchiveTask` tell Storybook to provide actions (mocked callbacks) that the `TaskList` component needs.
 
-Since we've added a new story file, we need to run `yarn storybook-generate` again to regenerate the `storybook.require.js` file.
+If you don't see the new story immediately, try reloading the app. If that doesn't work, you can re-run `yarn storybook-generate` to regenerate the `storybook.requires` file.
 
 Now check Storybook for the new `TaskList` stories.
 

content/intro-to-storybook/react-native/en/get-started.md

@@ -111,13 +111,13 @@ if (Constants.expoConfig.extra.storybookEnabled === 'true') {
 export default AppEntryPoint;
 ```
 
-In package.json we see a few Storybook scripts. We use these to pass that environment variable to our app and run some setup.
+In the `package.json` file, we see a few new Storybook scripts. We use these to pass that environment variable to our application, which swaps the entry point to the Storybook UI using `cross-env` to make sure this works on all platforms (Windows/macOS/Linux).
 
 ```json:title=package.json
 "scripts": {
-  "storybook": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start",
-  "storybook:ios": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo ios",
-  "storybook:android": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo android"
+  "storybook": "cross-env STORYBOOK_ENABLED='true' expo start",
+  "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo ios",
+  "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo android"
 }
 ```
 

content/intro-to-storybook/react-native/en/simple-component.md

@@ -35,7 +35,13 @@ module.exports = {
 
 If you check the `stories` property you'll see that Storybook is looking for stories in the `components` folder.
 
-In React Native Storybook we use the config in `main.js` to generate a file called `storybook.requires.js`, this is because React Native doesn't support dynamic imports yet. This file gets generated when you run `yarn storybook` to start Storybook or `yarn storybook-generate` if you just want to regenerate the `storybook.requires.js` file. This file is used to load all the stories in the project and it also imports your addons, whenever you find that a story is not being loaded you can try regenerating this file.
+In Storybook for React Native, due to current limitations with the Metro bundler, we rely on the configuration in `main.js` to generate a file called `storybook.requires`, which is used to load all our stories and addons in our project. This file is automatically generated when you run `yarn storybook` to start your Storybook.
+
+<div class="aside">
+
+💡 You can also manually generate the `storybook.requires` file by running `yarn storybook-generate`. However, you shouldn't need to re-create this file unless you see that a story is not being loaded or notice that a change in your `main.js` config is not reflected in your Storybook. To learn more about how the `storybook.requires` file is generated, you can check out the `generate` function in your `metro.config.js` file.
+
+</div>
 
 Now let’s create the task component and its accompanying story file: `components/Task.jsx` and `components/Task.stories.jsx`.
 
@@ -110,7 +116,7 @@ To define our stories we export an object with an `args` property. Arguments or
 
 When creating a story, we use a base `task` arg to build out the shape of the task the component expects. Typically modeled from what the actual data looks like. Again, `export`-ing this shape will enable us to reuse it in later stories, as we'll see.
 
-Now that we've set up the basics lets re-run `yarn storybook` and see our changes. If you already have Storybook running you can also run `yarn storybook-generate` to regenerate the `storybook.requires.js` file.
+Now that we've set up the basics lets re-run `yarn storybook` and see our changes. If you already have Storybook running you can also run `yarn storybook-generate` to regenerate the `storybook.requires` file.
 
 You should see a UI that looks like this:
 ![a gif showing the task component in storybook](/intro-to-storybook/react-native-task-component.gif)

gatsby-config.js

@@ -33,7 +33,7 @@ module.exports = {
           ar: 6.3,
         },
         'react-native': {
-          en: 6.5,
+          en: 7.6,
           es: 5.3,
         },
         vue: {