How to hide top bar after 3 seconds in React Native

Question

I have been trying to achieve hiding (or slide up) my react native startup app top bar after 3 seconds, then have a button to press to show the top bar, but could not. I've searched online how to do it, but have not seen good solution for it. Please I need help here, the below is snippet code of what I tried doing but it did not work.

<HeaderHomeComponent /> is the top header I created and imported it in my Home screen

const Home = () => {

    const camera = useRef();
    const [isRecording, setIsRecording] = useState(false);
    const [flashMode, setFlashMode] = useState(RNCamera.Constants.FlashMode.off);
    const [cameraType, setCameraType] = useState(RNCamera.Constants.Type.front);
    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();
        }
    };

    setTimeout(()=> setShowHeader(false),3000);

    const DisplayHeader = () => {
        if(showHeader == true) {
            return <HeaderHomeComponent />
        } else {
            return null;
        }
    }

    // useEffect(() => {
    //     DisplayHeader();
    // }, [])
    

    return (
        <View style={styles.container}>
            <RNCamera 
                ref={camera}
                type={cameraType}
                flashMode={flashMode}
                onRecordingStart={() => setIsRecording(true)}
                onRecordingEnd={() => setIsRecording(false)}
                style={styles.preview}
            />
            
            <TouchableOpacity 
                style={styles.showHeaderButton} 
                onPress={() => {
                    setShowHeader(!showHeader);
                }}>
                <Button title='Show'  />
            </TouchableOpacity>

            
            <HeaderHomeComponent />

score 2 · Accepted Answer · answered Feb 04 '21 at 13:06

2

You were really close.

This is how it should be done:

useEffect(() => {
    setTimeout(toggleHeader,3000);
}, []);

const toggleHeader = () => setShowHeader(prev => !prev);

Then inside the "return":

 {showHeader && <HeaderHomeComponent />}

As simple as that.

answered Feb 04 '21 at 13:06

D10S

1,468
2
7
13

thanks for your answer, I tried it, it worked but need to have a button to Show/toggle the Header back. – Benjamin Ikwuagwu Feb 04 '21 at 13:50

score 1 · Answer 2 · answered Feb 04 '21 at 13:05

This should help you get started in the right direction, you can use animation based on your preference to this code.

import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';



export default function App() 
{


  const [showStatusbar, setShowStatusbar] = useState(true)

  useEffect(() => 
  {
    setTimeout(() => 
    {
      setShowStatusbar(false)
    }, 3000)

  }, [])

  return (
    <View style={styles.container}>
        
        {
          showStatusbar 
          ? <View style = {styles.statusBar}>
              <Text>Status Bar</Text>
            </View>
          : null
        }
        

        <Button title = "Show Status bar" onPress = {() => setShowStatusbar(true)}/>
     
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  statusBar:
  {
    height: 50,
    backgroundColor:'lightblue',
    justifyContent:'center',
    alignItems:'center'

  }
  
});

score 0 · Answer 3 · answered Feb 04 '21 at 13:00

0

Instead of setTimeout use Animation. or Check this lib : https://www.npmjs.com/package/react-native-animated-hide-view or check below answers which might help you Hide and Show View With Animation in React Native v0.46.

answered Feb 04 '21 at 13:00

Avinash

879
2
14
26

How to hide top bar after 3 seconds in React Native

3 Answers3