How to auto hide and show component in react native

Question

In my home screen I want to auto hide my header in 2 seconds, then I will have a button to show the header when pressed. I have tried with HomeStack.Screen but could not achieve it, I have to create my custom header called HeaderHomeComponent.js and imported it on my homescreen, still I could not achieve it. Please I need help on this issue.

Here is my code:

const [showHeader, setShowHeader] = useState(true);


    const onRecord = async () => {
        if (isRecording) {
            camera.current.stopRecording();
        } else {
            setTimeout(() => setIsRecording && camera.current.stopRecording(), 23*1000);
            const data = await camera.current.recordAsync();
        }
    };

    const visibility = () => {
        setTimeout(() => setShowHeader(false), 2000);
    }
    


    return (
        <View style={styles.container}>
            <RNCamera 
                ref={camera}
                type={cameraType}
                flashMode={flashMode}
                onRecordingStart={() => setIsRecording(true)}
                onRecordingEnd={() => setIsRecording(false)}
                style={styles.preview}
            />
            
            
            <HeaderHomeComponent />

Where is `visibility` getting called? You need to set it onDidMount or in useEffect on first render. Also I do not see where you hide the component depending on `showHeader`. — Mindaugas Nakrosis, Jan 09 '21 at 14:47

Deepak Kumar · Answer 1 · 2022-09-15T17:52:09.827

You can create a function with useeffect. Make sure you passs show and handleClose functions from Parent. (Example given below).

const MessageBox = (props) => {
    useEffect(() => {
        if (props.show) {
            setTimeout(() => {
                props.handleClose(false);
            }, 3000);
        }
    }, [props.show]);

    return (
        <div className={`messageBox ${props.show ? "show" : null}`}>
             {props.message}
        </div>
        );
    };

UseEffect will be called everytime props.show state will change. And we only want our timer to kick in when the show becomes true, so that we can hide it then.

Also, now to use this, it's simple, in any component.

const [showMessageBox, setShowMessageBox] = useState(false);

return(
     <MessageBox 
           show={showMessageBox} 
           handleClose={setShowMessageBox} />
);

Also, make sure to handle css, part as well for show and hide. Simple Example below.

.messageBox {
    display: none;
}
.messageBox.show {
    display: block;
}

Hope this helps, :-)

score 1 · Answer 2 · answered Jan 09 '21 at 15:00

You need to do something like this as Mindaugas Nakrosis mentioned in comment

  const [showHeader, setShowHeader] = useState(true);
    
    useEffect(() => {
        setTimeout(() => setShowHeader(false), 2000);
        }, []);

In return where your header is present

{
    showHeader && <HeaderHomeComponent/>;
}

score 0 · Answer 3 · answered Jan 09 '21 at 15:09

I think the approach gonna fit "auto hide and show in 2 seconds", is using Animetad opacity, and giving fix height or/and z-index (as fit you) to the element

  // HeaderHomeComponent.js 

  const animOpacity = useRef(new Animated.Value(1)).current // start with showing elem


  //change main view to

   <Animated.View
    style={{ ...yourStyle... , 
             opacity: animOpacity,
       }}
    >

and then for creating the animation somewhere


     () => {
         Animated.timing(animOpacity, {
         toValue: +(!animOpacity), // the numeric value of not current
         duration: 2000, // 2 secs
         }).start();
    }}

The hieraric location of the declaration of the ref should control usage as calling the effect. maybe you can create useEffect inside the header that can determine if it should be visible or not depends navigation or some other props.

hope its helpful!

How to auto hide and show component in react native

3 Answers3