title: I want to make a bottom bar
body: <p>I want to make lower under the bar.But I don't know how to make. Press the lower bar to help me seyeo can get a page, I want I want to make.And I want to put the image that I want in the bottom bar Tell me what to do first I need your help I searched hard on Google, but there is no code similar to mine, so I keep getting it wrong or weird</p>
  <pre><code>import React, { useRef, useState, useCallback, useEffect } from 'react';
  import {
    View,
   BackHandler,
   Platform,
   StyleSheet,
   ActivityIndicator,
  } from 'react-native';
  import { WebView } from 'react-native-webview';
  import { Image } from &quot;react-native&quot;;
  const DELAY_BEFORE_WEBVIEW = 10; // &lt;--- seconds before webview load
  
  export default function App() {
    // ref
    const webView = useRef();
  
   const [canGoBack, setCanGoBack] = useState(false);
  
    const handleBack = useCallback(() =&gt; {
      if (canGoBack &amp;&amp; webView.current) {
        webView.current.goBack();
        return true;
      }
      return false;
    }, [canGoBack]);
  
    // effects
    useEffect(() =&gt; {
      BackHandler.addEventListener('hardwareBackPress', handleBack);
      return () =&gt; {
        BackHandler.removeEventListener('hardwareBackPress', handleBack);
      };
   }, [handleBack]);
  
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setIsLoading(false);
      }, 1000 * DELAY_BEFORE_WEBVIEW);
    }, []);
  
    // states
    const [isLoading, setIsLoading] = useState(true);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;WebView
          ref={webView}
          source={{ uri: 'https://www.talesrunnerbestguild.co.kr/' }}
          style={styles.webView}
          onLoadProgress={(event) =&gt; setCanGoBack(event.nativeEvent.canGoBack)}
        /&gt;
        {isLoading &amp;&amp; &lt;CenterLoader /&gt;}
      &lt;/View&gt;
    );
  }
  
  const CenterLoader = () =&gt; (
    &lt;View style={styles.loaderContainer}&gt; 
         &lt;Image source={require('/workspace/talesrunner23/assets/js34.png/')} 
          style={{height:115,width:90}}/&gt;
     &lt;/View&gt;
  );
  
  const styles = StyleSheet.create({
    container: { flex: 1 },
    loaderContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
     height: '100%',
     backgroundColor:'white' // &lt;-- comment this to show webview while loading
  },
    webView:
      Platform.OS === 'ios'
        ? { marginTop: 30, marginBottom: 40 }
       : { marginTop: 30 },
  });
  </code></pre>