<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Rene Korss</title>
  <subtitle></subtitle>
  <link href="https://rene.korss.ee/feed.xml" rel="self"/>
  <link href="https://rene.korss.ee/"/>
  <updated>2020-10-29T02:00:00+02:00</updated>
  <id>https://rene.korss.ee</id>
  <author>
    <name>Rene Korss</name>
    <email>rene.korss@gmail.com</email>
  </author>
  
    
    <entry>
      <title>Anonymous functions a.k.a closures</title>
      <link href="https://rene.korss.ee/posts/anonymous-functions-aka-closures/"/>
      <updated>2021-03-04T02:00:00+02:00</updated>
      <id>https://rene.korss.ee/posts/anonymous-functions-aka-closures/</id>
      <content type="html">
        <![CDATA[
      <h3>What are anonymous functions?</h3>
<p><a href="https://www.php.net/manual/en/functions.anonymous.php">php.net description for anonymous functions:</a></p>
<blockquote>
<p>Anonymous functions, also known as closures, allow the creation of functions which have no specified name. They are most useful as the value of callable parameters, but they have many other uses.</p>
</blockquote>
<p>Let's consider case (like case <a href="https://stackoverflow.com/questions/33036962/undefined-variable-email-when-sending-mail-even-though-the-variable-exists">on Stack Overflow</a>) where you are looping over array of emails and send message to every email.</p>
<p>Code which won't work:</p>
<pre class="language-php"><code class="language-php"><span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$emails</span> <span class="token keyword">as</span> <span class="token variable">$email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    Mail<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>        <span class="token variable">$message</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">to</span><span class="token punctuation">(</span><span class="token variable">$email</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">subject</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'My subject'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>For clarity: <code>$emails</code> is <code>array</code> of email addresses. <code>Mail::send</code> takes callable as argument and provides that callable with <code>$message</code> which can be used to set &quot;to&quot; address, subject, body etc. Their logic is unimportant for this example.</p>
<p>Now this callable is what is anonymous function a.k.a closure. Running this code would give you a notice:</p>
<blockquote>
<p>Notice: Undefined variable: email</p>
</blockquote>
<p>This is because anonymous functions have their own scope and therefore are unaware of outside variables. You have to explicitly provide anonymous functions with variables from outside scope using <code>use</code> language construct.</p>
<p>Working code:</p>
<pre class="language-php"><code class="language-php"><span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$emails</span> <span class="token keyword">as</span> <span class="token variable">$email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    Mail<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>        <span class="token variable">$message</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">to</span><span class="token punctuation">(</span><span class="token variable">$email</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">subject</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'My subject'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h3>Reusing anonymous functions</h3>
<p>There may be case where you would want to reuse anonymous function. You can assign it to variable and call them by variable name.</p>
<p>For example, let's have an anonymous function which multiplies two numbers. Yes, it would be easier to just multiply them, but this is just for simple example :)</p>
<pre class="language-php"><code class="language-php"><span class="token variable">$multiply</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$first</span><span class="token punctuation">,</span> <span class="token variable">$second</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">return</span> <span class="token variable">$first</span> <span class="token operator">*</span> <span class="token variable">$second</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token keyword">echo</span> <span class="token variable">$multiply</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span><br><span class="token keyword">echo</span> <span class="token variable">$multiply</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8</span></code></pre>
<hr>
<p>This post is based on <a href="https://stackoverflow.com/a/33037035/1960712" rel="noopener" target="_blank">my answer on Stack Overflow</a>. If this helped you, consider upvoting it.</p>

    ]]>
      </content>
    </entry>
  
    
    <entry>
      <title>How to get second level values from multidimensional array?</title>
      <link href="https://rene.korss.ee/posts/how-to-get-second-level-values-from-multidimensional-array-without-loop/"/>
      <updated>2020-11-27T02:00:00+02:00</updated>
      <id>https://rene.korss.ee/posts/how-to-get-second-level-values-from-multidimensional-array-without-loop/</id>
      <content type="html">
        <![CDATA[
      <p>Usually developers would go for <code>foreach</code> to loop over every value and add them to previously created empty array.</p>
<p>This will result in desired output, but I will show how this can be done with one line and no looping.</p>
<p>Let's consider following input data:</p>
<pre class="language-php"><code class="language-php"><span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><br>    <span class="token punctuation">[</span><br>        <span class="token number">1</span><span class="token punctuation">,</span><br>        <span class="token number">2</span><span class="token punctuation">,</span><br>        <span class="token number">3</span><br>    <span class="token punctuation">]</span><span class="token punctuation">,</span><br>    <span class="token punctuation">[</span><br>        <span class="token number">4</span><span class="token punctuation">,</span><br>        <span class="token number">5</span><br>    <span class="token punctuation">]</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>Desired result (resulting <code>var_dump</code>):</p>
<pre class="language-php"><code class="language-php"><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre>
<p>Solution: use <code>call_user_func_array</code> with <code>array_merge</code>.</p>
<pre class="language-php"><code class="language-php"><span class="token variable">$result</span> <span class="token operator">=</span> <span class="token function">call_user_func_array</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'array_merge'</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>And we have all values in one array.</p>
<h3>What if arrays have matching keys?</h3>
<p>Idea with matching keys is to only get second level arrays values (without keys).</p>
<p>Let's consider following input data:</p>
<pre class="language-php"><code class="language-php"><span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><br>    <span class="token punctuation">[</span><br>        <span class="token single-quoted-string string">'key'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">,</span><br>        <span class="token number">2</span><span class="token punctuation">,</span><br>        <span class="token number">3</span><br>    <span class="token punctuation">]</span><span class="token punctuation">,</span><br>    <span class="token punctuation">[</span><br>        <span class="token single-quoted-string string">'key'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">4</span><span class="token punctuation">,</span><br>        <span class="token number">5</span><br>    <span class="token punctuation">]</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>Now previous solution would give as (resulting <code>var_dump</code>):</p>
<pre class="language-php"><code class="language-php"><span class="token comment">// Bad</span><br><span class="token comment">// Missing value of 1 and we have key "key"</span><br><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token punctuation">[</span><span class="token double-quoted-string string">"key"</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre>
<p>To fix it, <code>array_map</code> and <code>array_values</code> will help us out.</p>
<pre class="language-php"><code class="language-php"><span class="token comment">// >= PHP7.4</span><br><span class="token variable">$result</span> <span class="token operator">=</span> <span class="token function">call_user_func_array</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'array_merge'</span><span class="token punctuation">,</span> <span class="token function">array_map</span><span class="token punctuation">(</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token variable">$arr</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">array_values</span><span class="token punctuation">(</span><span class="token variable">$arr</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// &lt; PHP7.4</span><br><span class="token variable">$result</span> <span class="token operator">=</span> <span class="token function">call_user_func_array</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'array_merge'</span><span class="token punctuation">,</span> <span class="token function">array_map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token variable">$arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token function">array_values</span><span class="token punctuation">(</span><span class="token variable">$arr</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>And we still have one liner and result again is as expected:</p>
<pre class="language-php"><code class="language-php"><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><br>    <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token operator">></span><br>    <span class="token function">int</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre>
<hr>
<p>This post is based on <a href="https://stackoverflow.com/a/30748335/1960712" rel="noopener" target="_blank">my answer on Stack Overflow</a>. If this helped you, consider upvoting it.</p>

    ]]>
      </content>
    </entry>
  
    
    <entry>
      <title>How to filter Google Maps markers by category?</title>
      <link href="https://rene.korss.ee/posts/how-to-filter-google-maps-markers/"/>
      <updated>2020-11-13T02:00:00+02:00</updated>
      <id>https://rene.korss.ee/posts/how-to-filter-google-maps-markers/</id>
      <content type="html">
        <![CDATA[
      <p>Let's just dig in and start by adding Google Maps to page. We need <code>&lt;script&gt;</code> tag to add Google Maps Javascript, another <code>&lt;script&gt;</code> for our Javascript logic and <code>&lt;div&gt;</code> to hold our map.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span><br>    <span class="token comment">&lt;!-- Google Maps JS --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">async</span> <span class="token attr-name">defer</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&amp;callback=initialize<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br>    <span class="token comment">&lt;!-- Our JS file --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><br>    <span class="token comment">&lt;!-- Map target element --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>map-canvas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span></code></pre>
<p>Now, this won't render anything yet since map is not initialized. For this, we will add Javascript file which will hold all our logic.</p>
<p>Since we are loading Google Maps asynchronously, we need <code>&amp;callback=initialize</code> so that Google Maps know which function to call if it is done loading.</p>
<p>Now we need to add <code>initialize</code> method to create map.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// index.js</span><br><span class="token keyword">let</span> map<span class="token punctuation">;</span><br><br><span class="token comment">/**<br> * Function to initialize map<br> */</span><br><span class="token keyword">function</span> <span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">let</span> center <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">52.4357808</span><span class="token punctuation">,</span> <span class="token number">4.991315699999973</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token keyword">let</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br>        zoom<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span><br>        center<span class="token operator">:</span> center<br>    <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>    map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><br>        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'map-canvas'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br>        mapOptions<br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>And we have map showing. Feel free to edit map options as needed.</p>
<p>To filter markers, we obviously need markers. Let's add markers right after initializing map.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// index.js</span><br><span class="token keyword">let</span> map<span class="token punctuation">;</span><br><span class="token keyword">let</span> infowindow<span class="token punctuation">;</span><br><br><span class="token comment">// This array will hold our markers added to map</span><br><span class="token keyword">let</span> mapMarkers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br><span class="token comment">// Our markers, could be data from backend</span><br><span class="token comment">// For example purpose, let's use predefined array of markers</span><br><span class="token comment">// title, latitude, longitude, category</span><br><span class="token comment">// Add as many as you want</span><br><span class="token keyword">let</span> markers <span class="token operator">=</span> <span class="token punctuation">[</span><br>    <span class="token punctuation">[</span><span class="token string">'Shop 1'</span><span class="token punctuation">,</span> <span class="token number">52.4357808</span><span class="token punctuation">,</span> <span class="token number">4.991315699999973</span><span class="token punctuation">,</span> <span class="token string">'shop'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br>    <span class="token punctuation">[</span><span class="token string">'Card dealer 1'</span><span class="token punctuation">,</span> <span class="token number">52.4357808</span><span class="token punctuation">,</span> <span class="token number">4.981315699999973</span><span class="token punctuation">,</span> <span class="token string">'car'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br>    <span class="token punctuation">[</span><span class="token string">'Shop 2'</span><span class="token punctuation">,</span> <span class="token number">52.4555687</span><span class="token punctuation">,</span> <span class="token number">5.039231599999994</span><span class="token punctuation">,</span> <span class="token string">'shop'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br>    <span class="token punctuation">[</span><span class="token string">'Gas station 1'</span><span class="token punctuation">,</span> <span class="token number">52.4555687</span><span class="token punctuation">,</span> <span class="token number">5.029231599999994</span><span class="token punctuation">,</span> <span class="token string">'gas'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br><span class="token comment">/**<br> * Function to initialize map<br> *<br> * - Initalizes map<br> * - Adds markers to map<br> */</span><br><span class="token keyword">function</span> <span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">let</span> center <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span><span class="token number">52.4357808</span><span class="token punctuation">,</span> <span class="token number">4.991315699999973</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token keyword">let</span> mapOptions <span class="token operator">=</span> <span class="token punctuation">{</span><br>        zoom<span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span><br>        center<span class="token operator">:</span> center<br>    <span class="token punctuation">}</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Init map</span><br>    map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><br>        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'map-canvas'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br>        mapOptions<br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Infowindow to show marker title</span><br>    <span class="token comment">// Not actually needed for filtering, but nice to have</span><br>    infowindow <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>InfoWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br>        content<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span><br>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Add our markers to map</span><br>    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> markers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>        <span class="token function">addMarkerToMap</span><span class="token punctuation">(</span>markers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br><span class="token punctuation">}</span><br><br><span class="token comment">/**<br> * Function to add marker to map<br> */</span><br><span class="token keyword">function</span> <span class="token function">addMarkerToMap</span><span class="token punctuation">(</span><span class="token parameter">markerData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">let</span> category <span class="token operator">=</span> markerData<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br>    <span class="token keyword">let</span> title <span class="token operator">=</span> markerData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br>    <span class="token keyword">let</span> pos <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span>markerData<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> markerData<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token keyword">let</span> content <span class="token operator">=</span> markerData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br>    <span class="token keyword">let</span> marker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Marker</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br>        title<span class="token operator">:</span> title<span class="token punctuation">,</span><br>        position<span class="token operator">:</span> pos<span class="token punctuation">,</span><br>        category<span class="token operator">:</span> category<span class="token punctuation">,</span><br>        map<span class="token operator">:</span> map<span class="token punctuation">,</span><br>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    mapMarkers<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>marker<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Marker click listener</span><br>    <span class="token comment">// Fill infowindow with marker title and zoom in to marker</span><br>    google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><br>        marker<span class="token punctuation">,</span><br>        <span class="token string">'click'</span><span class="token punctuation">,</span><br>        <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">marker<span class="token punctuation">,</span> content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>            <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>                infowindow<span class="token punctuation">.</span><span class="token function">setContent</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span><br>                infowindow<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>map<span class="token punctuation">,</span> marker<span class="token punctuation">)</span><span class="token punctuation">;</span><br>                map<span class="token punctuation">.</span><span class="token function">panTo</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>                map<span class="token punctuation">.</span><span class="token function">setZoom</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>            <span class="token punctuation">}</span><span class="token punctuation">;</span><br>        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>marker<span class="token punctuation">,</span> content<span class="token punctuation">)</span><br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>We added <code>addMarkerToMap</code> function to add marker to map, which takes marker data array as parameter. It gets used in <code>initialize</code> function, iterating over every marker and calling <code>addMarkerToMap</code> to add markers one by one.</p>
<p>Currently we are defining markers directly in our code, but in real case they would probably be loaded dynamically from backend. Logic stays the same.</p>
<p>For extra touch, marker click handler is added which will open infowindow showing marker title.</p>
<p>Lastly, we need some way for a user to interact with the map to be able to filter markers by category. For that we are adding select with categories.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span><br>    ...<br>    <span class="token comment">&lt;!-- Map target element --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>map-canvas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><br>    <span class="token comment">&lt;!-- Select category --></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>filterMarkersByCategory(this.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Please select a category<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span><br>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>shop<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Shops<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span><br>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Gas stations<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span><br>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>car<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Car dealers<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span></code></pre>
<p>This <code>&lt;select&gt;</code> element has <code>onchange=&quot;filterMarkersByCategory(this.value)</code> which means if we change it's value, it will call <code>filterMarkersByCategory</code> and passes selected value as parameter. This way we know which category user selected.</p>
<p>All we need to do now is to add <code>filterMarkersByCategory</code> to change markers visibilities based on user selection.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// index.js</span><br><span class="token comment">// ...</span><br><span class="token comment">/**<br> * Function to filter markers by category<br> */</span><br><span class="token keyword">function</span> <span class="token function">filterMarkersByCategory</span><span class="token punctuation">(</span><span class="token parameter">category</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> mapMarkers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>        <span class="token keyword">let</span> marker <span class="token operator">=</span> mapMarkers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span><br><br>        <span class="token comment">// If is same category or category not picked</span><br>        <span class="token keyword">let</span> visible <span class="token operator">=</span> marker<span class="token punctuation">.</span>category <span class="token operator">==</span> category <span class="token operator">||</span> category<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span><br>        marker<span class="token punctuation">.</span><span class="token function">setVisible</span><span class="token punctuation">(</span>visible<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p><code>google.maps.Marker</code> object has method <code>setVisible</code> which takes boolean value. If it is <code>true</code>, marker will be shown.</p>
<p>Feel free to play around with or fork my <a href="https://jsfiddle.net/ReneKorss/f13kopqx/" target="_blank" rel="noopener">JSFiddle</a>.</p>

    ]]>
      </content>
    </entry>
  
    
    <entry>
      <title>Passing JSON data from PHP to HTML to Javascript</title>
      <link href="https://rene.korss.ee/posts/passing-json-data-from-php-to-html-to-javascript/"/>
      <updated>2020-11-11T02:00:00+02:00</updated>
      <id>https://rene.korss.ee/posts/passing-json-data-from-php-to-html-to-javascript/</id>
      <content type="html">
        <![CDATA[
      <p>Passing JSON data and really any data from PHP to HTML is good to be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*" rel="noopener" target="_blank">data-* attributes</a>.
Passing as JSON is not as easy as string or integer because it will have quotes in it's output. It needs to be escaped so that output HTML will be valid.</p>
<h3>PHP to HTML</h3>
<pre class="language-php"><code class="language-php"><span class="token comment">// Example data</span><br><span class="token variable">$exampleData</span> <span class="token operator">=</span> <span class="token punctuation">[</span><br>    <span class="token single-quoted-string string">'key'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'value'</span><span class="token punctuation">,</span><br>    <span class="token single-quoted-string string">'items'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span><br>        <span class="token single-quoted-string string">'multi'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'dimensional'</span><br>    <span class="token punctuation">]</span><br><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br><span class="token keyword">echo</span> <span class="token single-quoted-string string">'&lt;div id="target-id" data-example="'</span><span class="token punctuation">.</span><span class="token function">htmlspecialchars</span><span class="token punctuation">(</span><span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$exampleData</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token constant">ENT_QUOTES</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'UTF-8'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'">'</span><span class="token punctuation">;</span></code></pre>
<p><code>data-example</code> is just made up attribute. You can replace <code>example</code> with whatever you like and add multiple <code>data-*</code> attributes if needed.</p>
<p>ID of <code>target-id</code> is added to element so we can easily target it in javascript.</p>
<h3>HTML to Javascript</h3>
<p><strong>Plain Javascript</strong></p>
<pre class="language-javascript"><code class="language-javascript"><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#target-id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>example<span class="token punctuation">)</span> <span class="token comment">// object</span></code></pre>
<p><strong>jQuery</strong></p>
<pre class="language-javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#target-id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'example'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// object</span></code></pre>
<p>Now we have our custom data in Javascript and can easily use it as it is object.</p>

    ]]>
      </content>
    </entry>
  
    
    <entry>
      <title>How to create side menu (drawer) with React Native?</title>
      <link href="https://rene.korss.ee/posts/how-to-create-side-menu-with-react-native/"/>
      <updated>2020-10-29T02:00:00+02:00</updated>
      <id>https://rene.korss.ee/posts/how-to-create-side-menu-with-react-native/</id>
      <content type="html">
        <![CDATA[
      <p>We are going to use <a href="https://reactnavigation.org/" target="_blank" rel="noopener">React Navigation</a>'s drawer navigator (V5), so first, let's install it and needed dependencies:</p>
<div class="tabs">
  <div class="labels">
    <div class="active">npm</div>
    <div>yarn</div>
  </div>
  <div class="content">
    <div class="tab-content active">
      <div class="language-bash">
        <code class="language-bash">
          <span class="token function">npm </span><span class="token function">install </span><span>@react-navigation/native @react-navigation/drawer react-native-screens eact-native-safe-area-context react-native-reanimated react-native-gesture-handler</span>
        </code>
      </div>
    </div>
    <div class="tab-content">
      <div class="language-bash">
        <code class="language-bash">
          <span class="token function">yarn </span><span class="token function">add </span><span>@react-navigation/native @react-navigation/drawer react-native-screens eact-native-safe-area-context react-native-reanimated react-native-gesture-handler</span>
        </code>
      </div>
    </div>
  </div>
</div>
<p>I have created new React Native project to demonstrate this and keep it as simple as possible with following command:</p>
<pre class="language-bash"><code class="language-bash">npx react-native init rndrawerexample</code></pre>
<p>This created basic boilerplate and we can run our app instantly with</p>
<div class="tabs">
  <div class="labels">
    <div class="active">iOS</div>
    <div>Android</div>
  </div>
  <div class="content">
    <div class="tab-content active">
      <div class="language-bash">
        <code class="language-bash">
          <span class="token function">npx </span><span class="token function">react-native </span><span>run-ios</span>
        </code>
      </div>
    </div>
    <div class="tab-content">
      <div class="language-bash">
        <code class="language-bash">
          <span class="token function">npx </span><span class="token function">react-native </span><span>run-android</span>
        </code>
      </div>
    </div>
  </div>
</div>
<p>Now, let's add some screens which we can navigate between. I'm going to create Home and Settings screens. Add these screens into <code>src/views</code> directory. If you like to add views to other place, feel free to modify code accordingly.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// ./src/views/Home.js</span><br><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>navigation<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br>    <span class="token keyword">return</span> <span class="token punctuation">(</span><br>        <span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> justifyContent<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><br>            <span class="token operator">&lt;</span>Text<span class="token operator">></span>Home screen<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span><br>        <span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span><br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> Home<span class="token punctuation">;</span></code></pre>
<pre class="language-js"><code class="language-js"><span class="token comment">// ./src/views/Settings.js</span><br><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Settings</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>navigation<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br>    <span class="token keyword">return</span> <span class="token punctuation">(</span><br>        <span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> justifyContent<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><br>            <span class="token operator">&lt;</span>Text<span class="token operator">></span>Settings screen<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span><br>        <span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span><br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> Settings<span class="token punctuation">;</span></code></pre>
<p>Screens in place, let's move to <code>App.js</code> to add side menu (Drawer) and make it navigate between screens.</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// ./App.js</span><br><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br><br><span class="token keyword">import</span> <span class="token punctuation">{</span>createDrawerNavigator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/drawer'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span>NavigationContainer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span><br><br><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./src/views/Home'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> Settings <span class="token keyword">from</span> <span class="token string">'./src/views/Settings'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> Drawer <span class="token operator">=</span> <span class="token function">createDrawerNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br>    <span class="token keyword">return</span> <span class="token punctuation">(</span><br>        <span class="token operator">&lt;</span>NavigationContainer<span class="token operator">></span><br>            <span class="token operator">&lt;</span>Drawer<span class="token punctuation">.</span>Navigator initialRouteName<span class="token operator">=</span><span class="token string">"Home"</span><span class="token operator">></span><br>                <span class="token operator">&lt;</span>Drawer<span class="token punctuation">.</span>Screen name<span class="token operator">=</span><span class="token string">"Home"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><br>                <span class="token operator">&lt;</span>Drawer<span class="token punctuation">.</span>Screen name<span class="token operator">=</span><span class="token string">"Settings"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>Settings<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><br>            <span class="token operator">&lt;</span><span class="token operator">/</span>Drawer<span class="token punctuation">.</span>Navigator<span class="token operator">></span><br>        <span class="token operator">&lt;</span><span class="token operator">/</span>NavigationContainer<span class="token operator">></span><br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span></code></pre>
<p>And our result looks like this</p>
<img src="/posts/how-to-create-side-menu-with-react-native/rndrawer-1.gif" style="max-width: 300px;">
<h3>Opening and closing menu</h3>
<p>If you want to add custom button to open drawer, you can do that with calling helpers provided for you. There's also toggle helper.</p>
<pre class="language-js"><code class="language-js">navigation<span class="token punctuation">.</span><span class="token function">openDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>navigation<span class="token punctuation">.</span><span class="token function">closeDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br><span class="token comment">// Open if close, close if open</span><br>navigation<span class="token punctuation">.</span><span class="token function">toggleDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Let's add custom button to open our side menu without dragging from left. Usually this button is styled like burger button, but for example, we will create simple button with title &quot;Open menu&quot;.</p>
<p>Add <code>Button</code> import to our views.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Button<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span></code></pre>
<p>And add <code>Button</code> inside view. Just above <code>&lt;Text&gt;</code>.</p>
<pre class="language-js"><code class="language-js"><span class="token operator">&lt;</span>Button title<span class="token operator">=</span><span class="token string">"Open menu"</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> navigation<span class="token punctuation">.</span><span class="token function">openDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></code></pre>
<p>Usually if you would use one peace of code multiple times, then you are better off making reusable component. For this example, we will add <code>Button</code> for both views.</p>
<p>Home screen final code looks like this:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">// ./src/views/Home.js</span><br><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Button<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>navigation<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br>    <span class="token keyword">return</span> <span class="token punctuation">(</span><br>        <span class="token operator">&lt;</span>View <span class="token parameter">style</span><span class="token operator">=></span><br>            <span class="token operator">&lt;</span>Button title<span class="token operator">=</span><span class="token string">"Open menu"</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> navigation<span class="token punctuation">.</span><span class="token function">openDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><br>            <span class="token operator">&lt;</span>Text<span class="token operator">></span>Home screen<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">></span><br>        <span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">></span><br>    <span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span><br><br><span class="token keyword">export</span> <span class="token keyword">default</span> Home<span class="token punctuation">;</span></code></pre>
<p>And final UI</p>
<img src="/posts/how-to-create-side-menu-with-react-native/rndrawer-2.gif" style="max-width: 300px;">
<h3>Detect if menu is opened or closed</h3>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> useIsDrawerOpen <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/drawer'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> isDrawerOpen <span class="token operator">=</span> <span class="token function">useIsDrawerOpen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// boolean</span></code></pre>

    ]]>
      </content>
    </entry>
  
</feed>