How to use the @storybook/react-native.storiesOf function in @storybook/react-native

import React, {useState, createElement, useCallback, useRef} from 'react';
import {Button as NativeButton, View, Modal, Text, TextInput, StyleSheet, Platform} from 'react-native';
import {storiesOf} from '@storybook/react-native';

import Button from '../src';

storiesOf('Button', module)
  .add('default view', () => {
    const [title, setTitle] = useState('Learn More');
    const onPress = useCallback(() => {
      console.warn('onPress');
    }, []);
    return (
      <>
        <button title="{title}">
      
    );
  })
  // .add('loading prop', () =&gt; {
  //   const [loading, setLoading] = useState(false);
  //   const onPress = useCallback(() =&gt; {
  //     setLoading(true);
  //     setTimeout(() =&gt; {</button>

import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';
import {storiesOf} from '@storybook/react-native';

import {MonthPicker} from '../src';

storiesOf('MonthPicker', module).add('default view', () => {
  const [date, setDate] = useState(new Date());
  return (
    <>
      {/*  */}
      
      
    
  );
});

import { storiesOf } from "@storybook/react-native"
import { StoryScreen, Story, UseCase } from "../../../storybook/views"
import { FormRow } from "./form-row"
import { Text } from "../text"
import { color } from "../../theme/color"
import { ViewStyle } from "react-native"

const TEXT_STYLE_OVERRIDE = {
  color: color.storybookTextColor,
}
const arrayStyle: ViewStyle[] = [
  {borderWidth: 5},
  {borderColor: "#32cd32"},
]

storiesOf("FormRow", module)
  .addDecorator(fn => {fn()})
  .add("Assembled", () => (

))
  .add('with some emoji', () => (
    <button title="😀 😎 👍 💯">
  ));
storiesOf('Pill', module)
  .addDecorator(getStory =&gt; {getStory()})
  .add('Basic', () =&gt; );
storiesOf('Card', module)
  .addDecorator(getStory =&gt; {getStory()})
  .add('Basic', () =&gt; (
    
      } /&gt;
      
    
  ));
storiesOf('ImageBackground', module)
  .addDecorator(getStory =&gt; (
    
      {getStory()}
    
  ))
  .add('Basic', () =&gt; (
    
      } /&gt;
      
    
  ));
</button>

import * as React from "react"
import { storiesOf } from "@storybook/react-native"
import { StoryScreen, Story, UseCase } from "../../../storybook/views"
import { Icon } from "./icon"

storiesOf("Icon", module)
  .addDecorator(fn => {fn()})
  .add("Names", () => (
    
      
        
      
      
        
      
    
  ))

import React from 'react'
import { storiesOf } from '@storybook/react-native'

import Grid from './custom-grid'
import Decorator1 from './decorator-1'
import Decorator2 from './decorator-2'
import ShowcaseCard from '../showcase-card'

storiesOf('Decorators', module)
    .addDecorator((getStory) => {getStory()})
    .add('Custom grid', () => )
    .add('1', () => )
    .add('2', () => )

import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react-native';
import * as React from 'react';

import { getTextMock } from '../../../../src/mocks';
import { WalletKeysScreenView } from '../../../../src/screens/wallet/WalletKeys.view';

storiesOf('Screens/walletStack', module).add('WalletKeysScreen', () => {
	return (
		
	);

import React from 'react'
import { View } from 'react-native'
import { storiesOf } from '@storybook/react-native'

import Alert from './Alert'

storiesOf('Alert', module).add('Alerts', () => (
  
))

import React from 'react';
import { Text } from 'react-native';

import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Button from './Button';
import CenterView from './CenterView';
import Welcome from './Welcome';
import Logo from './Logo';
import ErrorThrowingComponent from './ErrorThrowingComponent';
import DelayedComponent from './DelayedComponent';

storiesOf('Welcome', module).add('to Storybook', () => (
  
));

storiesOf('Button', module)
  .addDecorator(getStory => {getStory()})
  .add('with text', () => (
    <button>
      
    </button>
  ))
  .add('with some emoji', () =&gt; (
    <button>
      
    </button>
  ))
  .lokiSkip('lokiSkip story', () =&gt; (

import { action } from '@storybook/addon-actions';
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react-native';
import * as React from 'react';

import { getTextMock } from '../../../../src/mocks';
import { PhotoScreenView } from '../../../../src/screens/home/PhotoScreen.view';

storiesOf('Screens/mainStack', module)
	.addDecorator(withKnobs)
	.add('PhotoScreen', () => {
		const avatar = 'https://www.w3schools.com/w3css/img_lights.jpg';
		const media = [
			'https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350',
			'https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&w=1000&q=80',
			'https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=',
		];
		const taggedFriends = [
			{
				id: '1',
				fullName: 'Lorem Ipsum',
				location: 'Nowhere',
				avatar: 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg',
			},
			{