Action sheet not opening on component re-render.

[saurav-bhagat]

Action sheet version: "0.4.9" React native version: 0.63.4

My parent component:

<View style={styles.loginContainer}>
	<View style={styles.login_logo}>
		<Image style={{ width: 200, height:200 }} source={require('../test.jpg')} />
	</View>
	<InputActionSheet />
</View>

InputActionSheet Component:

useEffect(() => {
	navigation.addListener('focus', () => {
	    setTimeout(() => {
	        actionSheetRef.current?.setModalVisible();
		actionSheetRef.current?.show();
		console.log(actionSheetRef.current);
		console.log('Inside useEffect of InputActionSHeet');
	  }, 1000);
	});
}, []);

return (
    <ActionSheet 
	ref={actionSheetRef}
	closeOnPressBack={false}
	closeOnTouchBackdrop={false}
	closable={false}
	headerAlwaysVisible={true}
	indicatorColor='#bbbbbb'
	overlayColor='white'
	containerStyle={styles.actionSheetStyle}
	elevation={10}
     >
        <LoginComponent />	
  </ActionSheet>
);

On the first render of the Parent component, everything works fine. But when I navigate to a different Screen from the LoginComponent and then press the System back button, the console.log is working, but my actionsheet is not displayed. What am I missing here?

Also, the elevation prop is not working. Am I doing something wrong?

[ammarahm-ed]

What does actionSheetRef.current return. also you only need to call one of these :

actionSheetRef.current?.setModalVisible();
or
actionSheetRef.current?.show();

Not both

[saurav-bhagat]

Thanks for the quick response. I was using both just to make it work. I'll remove one.

actionSheetRef.current returns a long object containing all the props/methods available. eg:

Though there is this property: "refs": Object {}, which is empty.

let me know if I should send the complete object?

[ammarahm-ed]

This looks fine and it should work as expected.

[saurav-bhagat]

I tried a lot but couldn't figure out what is the issue here, this is not working at all, I'll share the code please have a look, console.log( ) works fine, but the action sheet doesn't come up when I press the system back button (Although in the initial render, the sheet comes).

LoginScreen (Parent) - IntialRoute

const LoginScreen = () => {
	return (
		<View style={styles.loginContainer}>
			<View style={styles.login_logo}>
				<Image source={require('../../images/logo.jpg')} />
			</View>
			<InputActionSheet /> {/* Here I'm using ActionSheet component */}
		</View>
	);
};

const styles = StyleSheet.create({
	loginContainer: {
		flex : 1,
	},
	login_logo: {
		top: '20%', 
		alignItems: 'center'
	}
});

export default LoginScreen;

InputActionSheet Component:

import React, { createRef, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import ActionSheet from 'react-native-actions-sheet';
import { useNavigation, useIsFocused } from '@react-navigation/native';

import LoginComponent from './LoginComponent';

const actionSheetRef = createRef();

const InputActionSheet = () => {
	let actionSheet;

	const navigation = useNavigation();
	const isFocused = useIsFocused()

	useEffect(() => {
		navigation.addListener('focus', () => {
			
			setTimeout(() => {
				actionSheetRef.current?.show();
				console.log(actionSheetRef.current);
				console.log('Inside useEffect of InputActionSheet');
			}, 1000);
			
		});
	}, [isFocused]);

	return (
      	<ActionSheet 
			ref={actionSheetRef}
			closeOnPressBack={false}
			closeOnTouchBackdrop={false}
			closable={false}
			headerAlwaysVisible={true}
			indicatorColor='#bbbbbb'
			overlayColor='white'
			containerStyle={styles.actionSheetStyle}
			elevation={10}
			>
        	<LoginComponent />	
      	</ActionSheet>
	);
};

const styles = StyleSheet.create({
	inputSheetContainer: {
		justifyContent: 'center'
	},
	actionSheetStyle:{
		height: '30%',
	},
	
});

export default InputActionSheet;

Navigation component:

const RootRoutes = () => 
	<NavigationContainer>
		<Navigator initialRouteName='Login'>
			<Screen name='Login' component={LoginScreen} />
			<Screen name='Home' component={CounterScreen} />
		</Navigator>
	</NavigationContainer>
;

export default RootRoutes;

[THE-EDDY]

Experiencing the same issue now, any solution to this?

[lc-superagent]

Faced the same issue. To reuse component in different screens const actionSheetRef = createRef(); should be inside component definition - in this case inside InputActionSheet.

[ammarahm-ed]

This is fixed in v0.8.0