Used context in bottom sheet in not updated on Android
See original GitHub issueBug
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:
- Created 3 years ago
- Comments:8 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
thanks @mlecoq , i will look into it asap 😃