nysamnang / react-native-raw-bottom-sheet Goto Github PK

I'm using a different form component as a content of react-native-raw-bottom-sheet. I'm trying to close the bottom-sheet from that form component submit button. Any possible way to do that ?

hi,
Doesn't work for label "FlatList" :(

i m facing problem in ios device, when i click on any item of rbsheet, i need to open another rbsheet. This works fine in android device, but not in ios device. pls help.

Hi.
Thanks for this amazing Bottom sheet!
I'm customized my status bar on my routes.
But, when I open the bottom sheet, my status bar color changes.
Can you provide a prop for the package that we put the status bar config for the openned bottom sheet?

Regards.

Thank for your contribution. Would you advise me? Is it possible to disable the backdrop in the "customStyles"?

consider following code:

<KeyboardAvoidingView behavior="padding">
      <RBSheet ref={ref => {
        this.RBSheet = ref;
      }}
      height={450}
      duration={250}
      customStyles={{
          container:{
            zIndex: 9999,
            alignItems: "center",
            // justifyContent: "center" 
          }
        }
      }>
              <TextInput 
                style={[styles.border, {width: "90%", height: 32, borderColor: "white", borderBottomColor: "rgb(224, 224, 224)", borderWidth:1, fontSize: 16, color:"rgb(166,166,166)"}]}
                placeholder="Maximum"
                placeholderTextColor="rgb(166,166,166)"
                keyboardType="number-pad"
                returnKeyType='done'
                />
      </RBSheet>
      </KeyboardAvoidingView>

When user taps on text input box, keyboard slides covers up the sheet, it move up too to focus on text input field

Hi, when I'm closing the component it stucks at the position I stopped dragging for a few miliseconds and jumps before closing.

My code :
<RBSheet ref={ref => { CampaignDetailsModalStore.campaignDetailsHalfModalRef = ref; }} duration={450} closeOnDragDown animationType="slide" customStyles={{ container: { borderTopRightRadius: 40, borderTopLeftRadius: 40, paddingTop: 2, height: 'auto', shadowOffset: {width: 0, height: 2}, shadowColor: '#000', shadowOpacity: 0.2, }, draggableIcon: {width: 100, height: 4, backgroundColor: Colors.SECONDARY}, }}> <CampaignDetails navigation={navigation} /> </RBSheet>

First of all: thank you! you did great job!

Can you please add typings for this module? A lot of people use typescript nowadays.

Appreciate your efforts. Thanks

Let's say it's instagram images, and I want each image carries a single bottom-sheet for image-optional...

i ve tried with action-sheet for iOS device, and now im looking for Android-native-feeling but this module isnt working for duplicating.

Hi, thanks for this great job. Is there a way to make the height dynamic?

When i try to open the popup menu on click of bottom sheet button component, it show the menu behind the bottom sheet. so how can i achive it.?

Hello , thanks for the library it works pretty fine.

I have an issue here , I would like to use the Bottom Sheet with different content , in order to make like a navigation, using functional components

What I want to do ?
I'm on the first Bottom Sheet and I click on a button inside it , it opens a new Bottom Sheet (or the same but with different content ?) replacing the first one . And when I go back , the first Bottom Sheet re-open with his datas ( like in a navigation stack )

The problem is that we have to know for each Bottom Sheet, the reference in order to make reference.open(), reference.close(), it's particularly complicated to handle multiple ref I think .

Is it possible to keep the same Bottom Sheet but to change ONLY the content inside ?

Thanks

I’m using react-native-navigation

Thank you for this library!

Currently I am using rn-bottom-sheet but it has some issue and not bottom animation.

I tried this library. it is really perfect. Only one thing is missing. when i open bottom sheet, user loose focus from main view.

how can i achieve ?

When have a BottomSheet that have more than 260 of height, the last item stay under the virtual home button of the related devices.

Is there a way to give some space from bottom?

I did try use SafeAreaView from react-navigation but doesn't work.
Maybe if there a prop WrapperComponent that accepts a component to use, fix the problem.

When I put an input in my raw bottom sheet the keyboard will render on top of the raw bottom sheet on iOS. On android it is all working fine.

https://i.mavis.moe/f/MKd8EaIzJG/2019-06-04-18-15-39.mp4

Recorded it

Hi @nysamnang :
Could you publish the examples shown in the example images?

I saw 2.1.0 added keyboardAvoidingViewEnabled. However, the latest version on npm is 2.0.6. That would be awsome if we can have it 2.1.0 on npm.

Thanks for your hard work. we use your component a lot in our works.

Getting this warning when the sheet animates:

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

Hi there,

I encounter the error described in the title. This error appears only when I trigger refRBSheet.current.open() after having navigated thanks to navigation.goBack() of react navigation.

Here is the code I wrote:

File : app.context.js

import React, { useReducer } from 'react';

export const AppContext = React.createContext([{}, () => { }]);

const initialState = {
  refRBSheet: null,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'DISPLAY_REPORT_MODAL':
      return { ...state, refRBSheet: action.value };

    default:
      return state;
  }
};

const AppContextProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {props.children}
    </AppContext.Provider>
  );
};

export default AppContextProvider;

File : Trigger.js

import React, { useContext } from 'react';
import { TouchableOpacity } from 'react-native';
import { AppContext } from '../contexts/App.context';

export default function Trigger() {
  const { state } = useContext(AppContext);

  return (
      <TouchableOpacity onPress={() => state.refRBSheet.current.open()}>
        <Text>Open</Text>
      </TouchableOpacity>
  );
}
});

File : Modal.js

import React, { useState, useContext, useRef, useEffect } from 'react';
import { Text, TouchableOpacity, StyleSheet, View } from 'react-native';
import { AppContext } from '../contexts/App.context';
import RBSheet from 'react-native-raw-bottom-sheet';

export default function Modal() {
  const { state, dispatch } = useContext(AppContext);
  const refRBSheet = useRef();

  React.useEffect(() => {
    dispatch({
      type: 'DISPLAY_REPORT_MODAL',
      value: refRBSheet,
    });
  }, [dispatch]);

  return (
      <RBSheet
        ref={refRBSheet}
        closeOnDragDown={false}
        closeOnPressMask={true}
        height={50}
      >
            <TouchableOpacity>
              <Text>report</Text>
            </TouchableOpacity>
          )
        }
      </RBSheet>
  );
}

Maybe I did something inappropriate?
Thank you for your help

how to get the bottom sheet pulled up?

Hi,
First, thank you for this awesome package !

I use react-native-elements Overlay component in my project and RBSheet opens as expected when this Overlay is visible on android but it looks that it's placed behind (invisible) on ios.

I tried to set the zIndex with an absolute position but it still doesn't work :/
If I close the overlay before the message is fired, then its displaying.

I'd like to end up with the android behavior for both platforms.

Any idea ?

Hiho,

first and foremost, awesome project!

Is there a way to define my own draggable Icon on the Sheet?
Something so it looks like this:

This would be the last piece, so I can start to build. If it's not already in there somehow, I might try to implement it and send in a pull request.

Greets from Austria,
Geralt

This seems to nearly have web support when run through react-native-web. In fact, I gotten it to work, just not always, perhaps due to placement or version. Custom themes have to be supplied.

The main issue is that the sheet is always open and calling close does nothing. I may be able to get the the bottom of why this works in some of our apps and no others, and then report back.

I think there are some tools to easily release for web and native now too.

This problem is pretty much the same the one described in #29.

The components inside the RBSheet component just doesn't fire the onPress event, I'm quite sure it's not a problem with my content component, as I've had used it before inside another bottom sheet library.

I could not dive more into helping debugging this problem inside the library source code due tight time, but hope this info helps somehow.

Physical Device:

Android 9
Motorola Moto G7 Power

// package.json

"react": "16.8.6",
"react-native": "0.60.3",
"react-native-raw-bottom-sheet": "^2.0.5"

{ /* App.tsx; Basically the representation of the source code */ }
<RBSheet
    height={450}
    duration={0}
    animationType="slide"
    closeOnDragDown={false}
    ref={ref => RBSheetRef = ref}
    customStyles={{
        wrapper: {
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        backgroundColor: "#00000012"
    },
    container: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff0"
    }
  }}
>
   { /* My component to use as content of the <RBSheet />  */ }
    <BottomSheetContent
        list={files.list}
        hasError={files.hasError}
        isLoading={files.isLoading}
        errorMessage={files.errorMessage}
        onCloseButtonClick={closeBottomSheet}
        onPress={file => navigateToPDFInvoicePage(file)}
        date={(selectedSummaryItem && selectedSummaryItem.refDate) || new Date()}
    />
</RBSheet>

When I tried to use this module, I got this error message.
To use, I had to create a file in "/node_modules/react-native-raw-bottom-sheet/src/types/any.d.ts" and declare
declare module 'react-native-raw-bottom-sheet'

If someone has the same problem.

Hi, we I try to close my modal, it jumps to upper positions. How can i solve it ?

Video:

https://streamable.com/6m6gp

My code :

<RBSheet ref={ref => { CampaignDetailsStore.campaignDetailsHalfModalRef = ref; }} duration={1000} closeOnDragDown animationType="slide" customStyles={{ wrapper: {backgroundColor: 'rgba(0,0,0,0.02)'}, container: { borderTopRightRadius: 40, borderTopLeftRadius: 40, paddingTop: 2, height: 'auto', }, draggableIcon: {width: 100, height: 4, backgroundColor: Colors.SECONDARY}, }}> <CampaignDetails navigation={navigation} /> </RBSheet>

I am trying to round the edges of the drawer. Is there a way to do that?

Whenever the bottom sheet closes , the onClose event is triggered . I am trying to resolve a value that I passed while closing to the onClose event .

How to ?

Or in a way

<RBSheet
onClose={(args) => {
console.log(args);
}}

// Inner component closed the bottom sheet with ref
/>

I am trying to get the args

Hi, i have tried put a scrollview inside you bottom sheet but it didn't work fine. Could you implement this feature like the below video :D thankyou
https://photos.app.goo.gl/6FgjUm3H6SeWwTBm7

Hi. Nice component! I am seeing an issue with the slide animation where the background also slides in along with the bottom sheet. From the example screenshots, it looks like the background should fade in - in both scenarios (slide and fade) however it seems like the transparent background slides in along with the bottom sheet when it is set to slide.

  <RBSheet
          closeOnDragDown
          ref={ref => {
            this.RBSheet = ref
          }}
          height={360}
          duration={300}
          animationType="slide"
          customStyles={{
            container: {
              ...styles.header,
            },
          }}
        >
          {this.renderBottomSheet()}
   </RBSheet>

i am trying to close the drawer after i click on an image that is located within the drawer. the this.RBSheet.close() isn't working. this is called inside of a function that is dynamically adding images and using the implementation that you suggested in your comments in issue 10. any ideas on how to make this work?

Hi, good day,

I am experiencing this error during build in android (I haven't checked iOS yet).

Couldn't find preset "module:metro-react-native-babel-preset

Has anyone experienced this before? I tried installing metro-react-native-babel-preset as well but it didn't solve it.

I am using RN0.51 btw.

Thanks.

I am using RBSheet to show some of the menu items. If the user clicks the menu it will open a modal.
it's working fine in android but in IOS it's not showing the modal.
I tried removing the RBSheet and tested it. It's working fine in android and IOS.
The below screenshot is ref behavior in android

The below screenshot is ref behavior in ios

You can see that inside state modalVisible is returning false for open and close in IOS but in android, it returns true for open and false for close

Is there a way of always displaying part of the bottom sheet?

Thanks,
Zack

I need to stop the bottom sheet from disappearing when the user presses Back on their mobile phone. Currently it is not configurable. It is hardcoded to disappear.

<Modal
  transparent
  animationType={animationType}
  visible={modalVisible}
  supportedOrientations={SUPPORTED_ORIENTATIONS}
  // This can be configurable
  onRequestClose={() => {
      this.setModalVisible(false);
  }}
>

Hey guys,

So I got a nice raw-bottom-sheet showing up with a UI that allows the user to make an in-app-purchase. I don't want the user navigating outside of the raw-bottom-sheet while the process is happening, so I want to disable closeOnDragDown (the pan responder) while this is happening. Of course, I still want closeOnDragDown set to true while the user in not mid-purchase.

Any way you could make the changes to make this tied to the component's props, and not just initial props?

Is there a way to be able to tap components that are behind the open bottom sheet? E.g pointerEvents: 'none' for the container component?

When i turn on the closeOnDragDown props, ScrollView stops working inside bottom sheet navigator.
This is my code.
To reproduce demo, can use https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/example/static.json, data wich is shown came in json format.
`
import React from 'react'

import MapView, {Marker} from 'react-native-maps'
import {View, Alert, StyleSheet, Text, ScrollView} from 'react-native'

import RBSheet from 'react-native-raw-bottom-sheet'

class Mapa extends React.Component {
constructor(props) {
super(props)

this.state = {
  region: {
    latitude: -19.9203661, // 19.9203661 22.2087173
    longitude: -43.9210439, // 43.9210439 54.8390909
    latitudeDelta: 0.04, //  0.0922
    longitudeDelta: 0.04, // 0.0421
  },
  pontosMarker: [],
  pontos: [],
  pontoSelecionado: [],
  nomePonto: '',
}

}

markerDetails = async pontoNome => {
this.state.pontoSelecionado = []
Reactotron.log('pontoNome', pontoNome)

// Reactotron.log('pontoSelecionado INI', this.state.pontoSelecionado)

const pointAux = await this.state.pontos.filter(
  res => res.nomePonto === pontoNome
)

Reactotron.log('pointAux', pointAux)

pointAux.map(res => {
  this.setState({
    pontoSelecionado: [...this.state.pontoSelecionado, res],
  })
})

this.setState({nomePonto: pontoNome})

this.RBSheet.open()

}

render() {
return (
<View style={{flex: 1}}>
<MapView
style={{flex: 1}}
mapType='satellite'
initialRegion={this.state.region}
cacheEnabled={false}
region={this.state.region}>
{this.state.pontosMarker.map(item => {
return (
<Marker
key={item.id}
title={item.title}
description={item.description}
coordinate={item.coordinates}
onPress={() => {
this.markerDetails(item.nomePonto)
}}
/>
)
})}

    <RBSheet
      ref={ref => {
        this.RBSheet = ref
      }}
      closeOnDragDown
      customStyles={{
        mask: {backgroundColor: 'transparent'},
        container: {
          elevation: 100,
          height: 350,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          backgroundColor: '#f7f5eee8',
        },
        draggableIcon: {
          backgroundColor: '#00000040',
        },
      }}>
      <ScrollView>
        <View style={styles.messageContainerTitle}>
          <Text style={styles.messageTitle}>{this.state.nomePonto}</Text>
        </View>

        <View>
          {this.state.pontoSelecionado.map(res => {
            const coords = JSON.parse(res.coordinates)
            const date = this.formatDate(res.date)
            if (res.fullInfo.tipoNC !== undefined) {
              return (
                <View key={res.date} style={styles.messageContainer}>
                  <View style={styles.message}>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Fazenda:</Text>{' '}
                      {res.fazenda}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Talhão:</Text>{' '}
                      {res.field}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Data:</Text> {date}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Latitude:</Text>{' '}
                      {coords.lat}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Longitude:</Text>{' '}
                      {coords.lon}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Praga:</Text>{' '}
                      {res.pragueName}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>
                        Plantas analisadas:
                      </Text>{' '}
                      {res.plantasAtacadas}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>
                        Plantas atacadas:
                      </Text>{' '}
                      {res.plantasAnalisadas}
                    </Text>
                  </View>
                  <View style={styles.lineWithPlants} />
                </View>
              )
            } else {
              return (
                <View key={res.date} style={styles.messageContainer}>
                  <View style={styles.message}>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Fazenda:</Text>{' '}
                      {res.fazenda}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Talhão:</Text>{' '}
                      {res.field}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Data:</Text> {date}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Latitude:</Text>{' '}
                      {coords.lat}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Longitude:</Text>{' '}
                      {coords.lon}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Praga:</Text>{' '}
                      {res.pragueName}
                    </Text>
                    <Text>
                      <Text style={{fontWeight: 'bold'}}>Quantidade:</Text>{' '}
                      {res.quantity}
                    </Text>
                  </View>
                  <View style={styles.line} />
                </View>
              )
            }
          })}
        </View>
      </ScrollView>
    </RBSheet>
  </View>
)

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},

line: {
marginTop: 5,
borderBottomWidth: 1,
borderColor: '#000',
},

lineWithPlants: {
marginTop: 30,
borderBottomWidth: 1,
borderColor: '#000',
},

messageContainerTitle: {
paddingLeft: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
// backgroundColor: '#f7f5eee8',
backgroundColor: 'rgba(247, 245, 238, 0.1)',
},

messageTitle: {
fontSize: 22,
fontWeight: 'bold',
color: '#222',
},

messageContainer: {
flex: 1,
backgroundColor: '#fff',
},

message: {
height: 145,
paddingLeft: 20,
},
})

export default Mapa
`

the this.RBSheet.open() and close() methods are not working. The open method works when i wrap it in a map function and use this[RBSheet + key].open() but otherwise i get the error "cannot read property 'open' of undefined. Any ideas on how to resolve?

At times the modal would appear higher than usual causing this weird effect (see the screenshots)

Hi, is it possible to have RBSheet with closeOnDragDow and a ScrollView as child ?

I've tried and when I drag down, the scroll view does not responde, but only the RBSheet is reacting to the event.

Code:

    <RBSheet
      ref={ref => {
        BottomSheetRef = ref
        props.onReceiveRef(ref)
      }}
      animationType="fade"
      closeOnDragDown={true}
    >
            <ScrollView
              bounces={false}
              showsVerticalScrollIndicator={false}
              style={styles.Scroll}
              contentContainerStyle={styles.ScrollContentContainer}
              nestedScrollEnabled={true}
            >
              {this.props.myUsage.serviceBalanceList.map((item: UsageItem, key: number) =>
                // item.addonType && item.bucketName
                true ? (
                  <View key={key} style={styles.ItemView}>
                    <Text style={styles.PrimaryText}>{item.bucketName || 'asdasd'}</Text>
                    {item.toDate ? (
                      <Text style={styles.SecondaryText}>{`Expires on ${item.toDate}`}</Text>
                    ) : null}
                  </View>
                ) : null
              )}
            </ScrollView>
</RBSheet>

Any help would be great!
Thanks!!

Press events aren't fired on Androis Devices even though they work fine on IOS. See stub below

<RBSheet
ref={ref => {
this.RBSheet = ref;
}}
height={180}
duration={250}
animationType={"none"}
closeOnDragDown={true}
customStyles={{
container: {
//justifyContent: "left",
alignItems: "center",
borderRadius: 16
}
}}
>

                    <View style={{ paddingTop: 30 }}>
                       <TouchableOpacity onPress={() =>this.search()}>
                            <ListTitle>
                                <ListIcon>
                                    <Ionicons
                                        name="ios-search"
                                        size={30}
                                        color="#939BA1"
                                    />
                                </ListIcon>
                                <ListSubTitle>Search</ListSubTitle>
                            </ListTitle>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() =>this.logout()}>
                            <ListTitle>
                                <ListIcon>
                                    <Ionicons
                                        name="ios-log-out"
                                        size={30}
                                        color="#939BA1"
                                    />
                                </ListIcon>
                                <ListSubTitle>Logout</ListSubTitle>
                            </ListTitle>
                        </TouchableOpacity>
                    </View>

                </RBSheet>

Hi,

I'm trying to implement the RBSheet into a funcional component, but I failed.

My code:

export default function AddItems() {
return (



<Button
title="OPEN BOTTOM SHEET"
onPress={() => {
RBSheet.open();
}}
/>

<RBSheet
ref={ref => {
RBSheet = ref;
}}
height={300}
duration={250}
customStyles={{
container: {
justifyContent: 'center',
alignItems: 'center',
},
}}
>
Test


);
}

Hi,
Currently I tried to add raw-bottom-sheet in my project and see that sometime the rbsheet didn't have value. Could you please let me know why?

 <RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}
          height={159}
          duration={250}
          customStyles={{
            container: {
              backgroundColor: '#ebebeb',
              alignItems: "center",
              borderRadius: 13
            }
          }}
        >
          <TouchableOpacity
                onPress={() => this.RBSheet.close()}
              >
              <OthersLoginWay rgbSheet={this.RBSheet} />
          </TouchableOpacity>
        </RBSheet>

In OthersLoginWay component:

componentDidMount = async () => {
      console.log(1, this.props.rgbSheet); // sometime it undefined
        await this.setState({rgbSheet: this.props.rgbSheet});
    }

    _otherlogin() {
        this.state.rgbSheet.close();
        
    }

Hello! thank you for the package!
I'd like to know how to close the sheet after the button, link or icon is pressedOn
for exemple:

<RBSheet
          ref={ref => {
            this.RBSheet = ref;
          }}
          height={50}
          duration={250}
          customStyles={{
            container: {
              justifyContent: "center",
              alignItems: "center"
            }
          }}
          onClose={() => {
            console.log(your_args);
          }}
        >
          <Icon
            name="camera"
            size={30}
            color="#777"
            onPress={() => navigate("Gallery")}
          />
        </RBSheet>

components which is enclosed by View react native component is not rendered properly

It would be nice to have the ability to define the animation for the mask and the sheet separately.

In particular, I'd like the mask to have a fade animation, but I don't want the sheet to fade.

First of all Thanks for nice library... I really liked it's simplicity . All are working as expected but the height is not working as expected .. It's kind of fixed ,I have tried to lower it to 10 and upper it to 400 just to see it's working or not. But no changes at all . Below is my code

const refRBSheet = React.useRef();
<RBSheet
ref={refRBSheet}
height={160}
closeOnDragDown={true}
closeOnPressMask={true}
customStyles={{
wrapper: {
backgroundColor: "transparent"
},
draggableIcon: {
backgroundColor: "#000"
},
container: {
flex: 1,
flexDirection: 'column',
borderTopRightRadius: 50,
},
}}

  >
    <SocialShareBigButton  url={item.link} message={item.title} refRBSheet={refRBSheet}/>
  </RBSheet>

Am I missing something? or it just an issue to consider I dont know