fix: Fixes storybookjs#253. Improve the message shown on the Controls…

… tab when the story has no controls configured. (storybookjs#254)

addons/ondevice-controls/src/ControlsPanel.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/native';
 import { API } from '@storybook/api';
 import React from 'react';
-import { Linking, Text } from 'react-native';
 import { useArgs } from './hooks';
+import NoControlsWarning from './NoControlsWarning';
 import PropForm from './PropForm';
 
 const Touchable = styled.TouchableOpacity(({ theme }) => ({
@@ -62,20 +62,12 @@ const ControlsPanel = ({ api }: { api: API }) => {
   const isArgsStory = parameters.__isArgsStory;
   const showWarning = !(hasControls && isArgsStory);
 
+  if (showWarning) {
+    return <NoControlsWarning />;
+  }
+
   return (
     <>
-      {showWarning && (
-        <Text>
-          This story is not configured to handle controls
-          <Text
-            onPress={() =>
-              Linking.openURL('https://storybook.js.org/docs/react/essentials/controls')
-            }
-          >
-            Learn how to add controls
-          </Text>
-        </Text>
-      )}
       <PropForm args={argsObject} onFieldChange={updateArgs} />
       <Touchable onPress={() => resetArgs()}>
         <ResetButton>RESET</ResetButton>

addons/ondevice-controls/src/NoControlsWarning.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/native';
+import React from 'react';
+import { Linking, View } from 'react-native';
+
+const Paragraph = styled.Text(() => ({
+  marginBottom: 10,
+}));
+const LinkText = styled.Text(() => ({
+  color: 'blue',
+}));
+
+const NoControlsWarning = () => {
+  return (
+    <View>
+      <Paragraph>This story is not configured to handle controls.</Paragraph>
+      <Paragraph>
+        <LinkText
+          onPress={() => Linking.openURL('https://storybook.js.org/docs/react/essentials/controls')}
+        >
+          Learn how to add controls
+        </LinkText>{' '}
+        and see{' '}
+        <LinkText
+          onPress={() =>
+            Linking.openURL(
+              'https://github.com/storybookjs/react-native/tree/next-6.0/examples/native/components/ControlExamples'
+            )
+          }
+        >
+          examples in the Storybook React Native repository.
+        </LinkText>
+      </Paragraph>
+    </View>
+  );
+};
+
+export default NoControlsWarning;