CODEWITHSUNDEEP
storybookreact-native-elements
Vince
Vince

Reputation: 1

react-native-elements BottomSheet not working in storybook

I've been creating some react-native-elements Storybook examples for my team, but I cant seem to get the BottomSheet to work. Will this component work on the web (expo app or in storybook)? Here's my code:

import { Meta, Story } from '@storybook/react';
import React, { useState } from 'react';
import { BottomSheet, BottomSheetProps, Button, ListItem, Text } from 'react-native-elements';

export default {
    title: 'BottomSheet',
    component: BottomSheet,
} as Meta;

const Template: Story<BottomSheetProps> = (props) => {
    const [isVisible, setIsVisible] = useState(false);
    const list = [
        { title: 'List Item 1' },
        { title: 'List Item 2' },
        {
            title: 'Cancel',
            containerStyle: { backgroundColor: 'red' },
            titleStyle: { color: 'white' },
            onPress: () => setIsVisible(false),
        },
    ];

    return (
        <>
            <Text h1>BottomSheet</Text>
            <Button title='Open Buttom Sheet' onPress={() => setIsVisible(true)} />
            <BottomSheet
                isVisible={isVisible}
                containerStyle={{ backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)' }}
                modalProps={{
                    presentationStyle: 'fullScreen',
                    visible: false,
                }}
            >
                {list.map((l, i) => (
                    <ListItem key={i} containerStyle={l.containerStyle} onPress={l.onPress}>
                        <ListItem.Content>
                            <ListItem.Title style={l.titleStyle}>{l.title}</ListItem.Title>
                        </ListItem.Content>
                    </ListItem>
                ))}
            </BottomSheet>
            ;
        </>
    );
};

export const BottomSheetSamples = Template.bind({});
BottomSheetSamples.args = {};

I do see the contents of the bottom sheet, but I can't get it to hide and it doesn't overlay the other components - it simply appears beneath.

The examples here: https://react-native-elements.js.org/#/bottom-sheet & here: https://reactnativeelements.com/docs/bottomsheet haven't been able to provide me much help.

Upvotes: 0

Views: 1947

Answers (1)

SevenAre1
SevenAre1

Reputation: 21

I faced a similar problem recently and what I discover was that the properties of BottomSheet isVisible and containerStyle are useless, so remove them.

To control the visibility of the BottomSheet use the property in modalProps={{visible: isVisible}}.

I also removed from there the prop presentationStyle: 'fullScreen' and added statusBarTranslucent: true,.

(React Native version: 0.63)

Upvotes: 1

Related Questions