question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Used context in bottom sheet in not updated on Android

See original GitHub issue

Bug

Environment info

Library Version
@gorhom/bottom-sheet 1.4.1
react-native 0.63.3
react-native-reanimated 1.13.1
react-native-gesture-handler 1.8.0

Steps To Reproduce

I have created a context for filter options (filtering is selected in bottom sheet)

import React from 'react';

export type FilterContextValue = {
  filter?: 'DATE' | 'NAME';
  setFilter: (filter: FilterContextValue['filter']) => void;
};

export default React.createContext<FilterContextValue>({
  setFilter: () => {},
});

const FilterProvider = ({children}: {children: React.ReactNode}) => {
  const [filter, setFilter] = useState<FilterContextValue['filter']>();

  const value = useMemo(() => ({filter, setFilter}), [filter, setFilter]);

  return <FilterContext.Provider value={value}>{children}</FilterContext.Provider>;
};

export default FilterProvider;

 import {TouchableWithoutFeedback} from '@gorhom/bottom-sheet';

 ...

  const {setFilter} = useContext(FilterCtx);


  <BottomSheetView>
          <TouchableWithoutFeedback
            onPress={() => {
              setFilter('NAME');
            }}>
            <Text>By name</Text>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback onPress={() => setFilter('NAME')}>
            <Text>By date</Text>
          </TouchableWithoutFeedback>
        </BottomSheetView>

Describe what you expected to happen:

I expect that pressing By name and By date, the setFilter method created in FilterProvider would be called. In fact, it is the default method (in React.createContext which is called)

I have tried to use setFilter elsewhere and it works fine (that’s why I think it is related to bottom-sheets)

Reproducible sample code

I will create one later

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
mlecoqcommented, Oct 22, 2020

With Touchables it works fine in the example. But It was not working in my project (where I was already using Touchables from the library). In fact, it was a basic mistake (I details it if someone encounters the same issue):

I added the <BottomSheetModalProvider> higher in the component tree than the <Provider> of my context, so logically the <BottomSheetView> (even if it was under the <Provider> of my context) was not notified of context changes.

@gorhom , Thank you very much for helping me going through this

1reaction
gorhomcommented, Oct 21, 2020

thanks @mlecoq , i will look into it asap 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Variable is not being updated in a widget shown on a bottom ...
The problem occurs when I show TestWidget on a bottom sheet with showModalBottomSheet() , as following: showModalBottomSheet(context: context, ...
Read more >
Sheets: bottom - Material Design
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
Read more >
showBottomSheet method - ScaffoldState class - material library
A persistent bottom sheet shows information that supplements the primary content of the app. A persistent bottom sheet remains visible even when the...
Read more >
BottomSheetDialog - Android Developers
Base class for Dialog s styled as a bottom sheet. ... BottomSheetDialog(Context context, boolean cancelable, DialogInterface.
Read more >
Flutter modal bottom sheet tutorial with examples
The showModalBottomSheet function · BuildContext takes the context argument, which is used to look up the Navigator and the theme for the bottom ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found