Modal.story.js

import React from 'react';
import { Button } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { State, Store } from "@sambego/storybook-state";
import { Modal, Cell, Row, Input, List } from '../../src/components/inputs/pokemonPicker';

const store = new Store({
  visible: false
});

const pokemonList = [
    {
        name: 'haunter',
        number: 93,
        images: {
            animated: 'https://assets.com/img/pokemon/animated/haunter.gif',
            large: 'https://assets.com/img/pokemon/icons/96x96/93.png',
            small: 'https://assets.com/img/pokemon/icons/16x16/93.png'
        },
        types: {
            primary: {
                color: {
                    inside: 'b48fc1',
                    outside: '46345e'
                },
                font: 'ffffff',
                name: 'ghost'
            },
            secondary: {
                color: {
                    inside: 'a6b8c3',
                    outside: 'a27498'
                },
                font: 'ffffff',
                name: 'poison'
            }
        }
    }
];


const rowOfPokemon = () => (
    <Row index={0}>
        <Cell index={0} />
        <Cell index={1} pokemon={pokemonList[0]} />
    </Row>
);

storiesOf('Inputs', module)
    .add('Pokemon Picker', () => (
        <State store={store}>
            <Button title={'Press to launch modal'} onPress={() => store.set({visible: true})} key={0} />
            <Modal closeFunction={() => store.set({visible: false})} visible={store.get('visible')} key={1}>
                <Input onSearchTextChange={(text) => console.log(text)}/>
                <List renderRow={rowOfPokemon} pokemon={[93]}/>
            </Modal>
        </State>
    ));