Closed stiofand closed 4 years ago
onst Home = props => { const store = props.mainStore; const _panel = React.useRef(null); const togglePanel = () => { const store = props.mainStore; const visibility = !store.showSlideUpPanel; store.showSlideUpPanel = visibility; visibility ? _panel.show() : _panel.hide(); }; return ( <View style={styles.container}> <Text>{store.showSlideUpPanel ? 'Visible': 'Hidden'}</Text> <Button title="Show Panel" onPress={() => togglePanel()}/> <SlidingUpPanel ref={_panel}> <View style={styles.container}> <Text>Here is the content inside the panel</Text> <Button title="Close Panel" onPress={() =>togglePanel()}/> </View> </SlidingUpPanel> </View> ); };
Using store or direct method error is thrown panel.show() is undefined and panel.hide() is undefined.
using ref directly without mobX store:
let _panel = React.useRef(null); return ( <View style={styles.container}> <Text>{store.showSlideUpPanel ? 'Visible': 'Hidden'}</Text> <Button title="Show Panel" onPress={() => _panel.show()}/> <SlidingUpPanel ref={_panel}> <View style={styles.container}> <Text>Here is the content inside the panel</Text> <Button title="Close Panel" onPress={() =>_panel.hide()}/> </View> </SlidingUpPanel> </View> ); --> _panel.show is not a function. (In '_panel.show()', '_panel.show' is undefined)
- visibility ? _panel.show() : _panel.hide(); + visibility ? _panel.current.show() : _panel.current.hide();
useRef holds the value in its .current property.
.current
Using store or direct method error is thrown panel.show() is undefined and panel.hide() is undefined.
using ref directly without mobX store: