
![image](https://res.cloudinary.com/donplt0kp/image/upload/v1674834390/closures_khhcpt.webp)

## Hey there! 👋

Closures in JavaScript can be a tricky subject to understand at first. It's also common to be asked about closures in interviews, which is why this post aims to explain how closures work in JavaScript.

## What is a closure?

According to [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), A closure is the combination of a function bundled
together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer
function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Let's take a look at an example of a basic closure:

```js
let global = 10;

function print() {
  const local = 5;
  console.log(local + global);
}

print(); // prints 15
```

In this example, the <InlineCode>print()</InlineCode> function has access to the <InlineCode>global</InlineCode> and <InlineCode>local</InlineCode> variables in its surrounding scope. This is what we call lexical scoping.

Now, let's see what happens if we change the value of <InlineCode>global</InlineCode> after the function declaration:

```js
let global = 10;

function print() {
  const local = 5;
  console.log(local + global);
}

global = 5; // new value
print(); // prints 10
```

Here, the <InlineCode>print()</InlineCode> function still has access to the <InlineCode>global</InlineCode>, even though it was changed after the function was created. This is the power of closures in JavaScript.

In simple terms, closure refers to the ability of an inner function to access variables in the scope of an outer function, even after the outer function has finished executing. This is achieved by the inner function "remembering" the variables from the scope where it was created. Closures are created at the time a function is defined, not when it is called.

This seems pretty simple so far, now let's look at a more concrete example:

```js
function example() {
  const num = 5;

  // here we are creating a closure
  function printNum() {
    console.log(num);
  }
  return printNum;
}

const closureFunction = example();
closureFunction(); // prints 5
```

In this example, <InlineCode>example()</InlineCode> function defines a variable <InlineCode>num</InlineCode> and an inner function <InlineCode>printNum</InlineCode> that has access to that variable <InlineCode>num</InlineCode> from the example() function scope even when the example() function
has finished executing. We return <InlineCode>printNum()</InlineCode> function and store it in a variable <InlineCode>closureFunction</InlineCode>, so we can call it later and it will still have access to the <InlineCode>num</InlineCode>
variable and print its value.

In other programming languages, the variable <InlineCode>num</InlineCode> would no longer be accessible and may be eligible for garbage collection after the <InlineCode>example()</InlineCode> function
has finished executing. However, in JavaScript, the inner function <InlineCode>printNum</InlineCode> creates a closure, which "remembers" the variable num from the outer function's
scope and allows it to be accessed even after the outer function has finished executing. This means that the variable <InlineCode>num</InlineCode> will not be eligible for garbage
collection until the closure (i.e. the inner function <InlineCode>printNum</InlineCode>) is no longer being used.

## What can we do with Closures?

## Private Methods

Many useful things can be done with closures, one of the most popular is creating **private methods**.

Let's take a look at the following example:

```js
function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
    },
    getCount: function () {
      return count;
    },
  };
}

const counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
```

In this example, we have a <InlineCode>createCounter</InlineCode> function that returns an object containing two methods, <InlineCode>increment</InlineCode> and <InlineCode>getCount</InlineCode>.
The <InlineCode>increment</InlineCode> method increments the value of a private variable <InlineCode>count</InlineCode>, which is only accessible within the scope of the <InlineCode>createCounter</InlineCode> function.

The <InlineCode>getCount</InlineCode> method returns the current value of <InlineCode>count</InlineCode>. By returning an object containing these methods rather than the value of <InlineCode>count</InlineCode>,
we have created a private variable that can only be accessed or modified through the provided methods, this is a common use case of closures.

We can also create multiple instances of <InlineCode>createCounter</InlineCode> function.

```js
function createCounter() {
  let count = 0;
  return {
    increment: function () {
      count++;
    },
    getCount: function () {
      return count;
    },
  };
}

const counter1 = createCounter();
console.log(counter1.getCount()); // 0
counter1.increment();
console.log(counter1.getCount()); // 1

const counter2 = createCounter();
console.log(counter2.getCount()); // 0
counter2.increment();
console.log(counter2.getCount()); // 1
```

This allows for better encapsulation and data hiding, making the code more maintainable and scalable.

## Function Factories

Another use of closures is to create function factories. A function factory is a function that returns a new function with a specific behavior.
The returned function has access to variables in the scope of the function factory, which allows the factory to customize the behavior of the returned function.

For example, let's say we want to create a function that can multiply a number by a specific factor. We can use a closure to create a function factory that
takes a factor as an argument and returns a new function that multiplies its input by that factor:

```js
function createMultiplier(factor) {
  return function (num) {
    return num * factor;
  };
}

const doubler = createMultiplier(2);
console.log(doubler(5)); // 10

const tripler = createMultiplier(3);
console.log(tripler(5)); // 15
```

In this example, we have created two instances of <InlineCode>doubler</InlineCode> and <InlineCode>tripler</InlineCode> using the <InlineCode>createMultiplier</InlineCode>.
Each instance has its own copy of the <InlineCode>factor</InlineCode> variable and its own behavior to multiply its input by that factor.

## Bonus 🎁

This last section of this post is a way to test your understanding of closures.
It is also very common to see this example in technical interviews, so let's take a closer look.

```js
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 500);
}
```

If we run this code, we will get 1, 2, and 3 printed in the console.
Each iteration creates a closure with a new version of the variable let, but what happens if we change let to var?

Let's see an example:

```js
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 500);
}
```

If we run this code, we will get "3, 3, 3" printed in the console. The reason is that <InlineCode>var</InlineCode> is function scoped (i.e. global scoped),
so the variable is shared among all the closures, and by the time the callbacks are invoked, the variable has a value of 3.

This is an important difference between <InlineCode>let</InlineCode> and <InlineCode>var</InlineCode> we are reusing the same variable so the value is updated by the time the callback is invoked but
with <InlineCode>let</InlineCode> we are creating a copy on each iteration with the updated value.

## Conclusion

Closures are a very interesting topic in JavaScript, and is fundamental to have a good understanding of how they work.

I hope that by now when you get asked a tricky question in an interview you respond elegantly and knowledgeably.

If you like this post please consider following me:

[Github](https://github.com/betomoedano)

[Medium](https://medium.com/@betomoedano01)

[Twitter](https://twitter.com/betomoedano)

[ 👈🏼 Go back to blog](/posts)


Understand how Closures work on JavaScript

Understanding JavaScript Closures


![](/ogp/gitogp.webp)

## Hey there! 👋

The error <InlineCode>Authentication Failed</InlineCode> can be coused by a couple of reasons:

- You are not logged in to GitHub.
- You are trying to access a private repository.

## Solution ✅

First you can confirm if Git is installed by running:

```bash
git --version
```

Once you have Git installed you can configure your credentials:

```bash
git config --global user.name your-username
git config --global user.email your-email-address
```

To check if your credentials are correct you can run:

```bash
git config --global --list
```

Before you try to clone the repository again you need to create a personal access token.

Go to [GitHub -> Settings -> Developer Settings](https://github.com/settings/apps) then click on "Personal access tokens" and create a new token.

Copy the token, you will need it to clone the repository.

Now you can try to access the repository again.

```bash
$ git clone https://github.com/username/repo.git
Username: your_username
Password: your_token
```

You should be able to access the repository now. 🚀

## Conclusion 🎉

Personal access tokens can only be used for HTTPS Git operations. If your repository uses an SSH remote URL, you will need to switch the remote from SSH to HTTPS.

I hope this posts helps you to solve the error.

For more info visit [this guide](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)

Please consider following me:

[Github](https://github.com/betomoedano)

[linkedin](https://www.linkedin.com/in/betomoedano)

[Medium](https://medium.com/@betomoedano01)

[Discord](https://discord.com/invite/dbYfWFw862)

[Twitter](https://twitter.com/betomoedano)

[Instagram](https://www.instagram.com/betomoedano)

[ 👈🏼 Go back to blog](/posts)


Learn how to solve "GitHub Error Authentication Failed"

How to solve "GitHub Error Authentication Failed"


![](/ogp/env.webp)

## Hey there! 👋

When creating a React Native app is very probable that at some point, you will need to use a secret key to connect your app with some external service or just to keep your variables secure.
In this short post, you will learn how to use environment variables in your project.

To do this, we will use a plugin that lets you inject your environment variables into your react-native environment using dotenv for multiple environments.

## Install react-native-dotenv

Fist, we need to install the plugin.

```bash
yarn add react-native-dotenv
```

If you are using npm

```bash
npm install react-native-dotenv
```

After that, go to your <InlineCode>babel.config.js</InlineCode> and add the default setup for the plugin.

```js
module.exports = {
  plugins: ['react-native-dotenv'],
};
```

If the defaults do not cut it for your project, this outlines the available options for your Babel configuration and their respective default values, but you do not need to add them if you are using the default settings.

```js
{
  "plugins": [
    ["module:react-native-dotenv", {
      "envName": "APP_ENV",
      "moduleName": "@env",
      "path": ".env",
      "blocklist": null,
      "allowlist": null,
      "blacklist": null, // DEPRECATED
      "whitelist": null, // DEPRECATED
      "safe": false,
      "allowUndefined": true,
      "verbose": false
    }]
  ]
}
```

That's all you need to do to use the plugin.

## Creating a .env file

After you have installed the plugin, you can create a .env file in your project.
This file will be used to inject your environment variables into your react-native environment.
You can use the following format:

```
APP_ENV=production
APP_API_URL=https://api.example.com
```

## Using your variables

Finally, you can use your environment variables in whatever file you need to.

```js
import { APP_ENV, APP_API_URL } from '@env';

fetch(APP_API_URL)
  .then((response) => response.json())
  .then((data) => console.log(data));
```

## Conclusion 🎉

Environment variables are a great way to keep your variables secure and avoid having to share them with other people.

Please consider following me:

[Github](https://github.com/betomoedano)

[linkedin](https://www.linkedin.com/in/betomoedano)

[Medium](https://medium.com/@betomoedano01)

[Discord](https://discord.com/invite/dbYfWFw862)

[Twitter](https://twitter.com/betomoedano)

[Instagram](https://www.instagram.com/betomoedano)

[ 👈🏼 Go back to blog](/posts)


Learn how to use environment variables with React Native using dotenv in less than 5 minutes.

How to use environment variables with React Native


![](/images/f.webp)

## Hey there! 👋

If you have a Computer Science background, probably, you have heard about the Fibonacci Number, also known as the Fibonacci Sequence.

At its core, the Fibonacci sequence is a series of numbers that starts with 0 and 1, and each number is the sum of the two previous numbers.
The formula looks like this:

**Fn = Fn-1 + Fn-2**

Even though the Fibonacci algorithm is very famous, many people struggle when trying to find an optimal solution, but that's not you!
By the end of this blog post, you will know three methods (recursive, memoization, dynamic) to implement the Fibonacci algorithm.

## Recursive Solution

A recursive algorithm calls itself with smaller input variables and returns the result for the current input by carrying out basic operations on the returned value for the smaller input.
By using recursive algorithms, certain problems can be solved quite easily.

Here is the recursive implementation:

```
function fibonacci(n) {
	if(n === 2) return 1;
	if(n === 1) return 0;
	return fibonacci(n-1) + fibonacci(n-2)
}
```

Looks pretty simple, right? Only five lines of code.

Although, the recursive solution is elegant and clean, it's crucial to understand that this is a non optimal solution. In fact, this is the worst solution.
Recursive algorithms can be very inefficient. Each recursive call adds a new layer to the stack, which means that if your algorithm recurses to a depth of n, it uses at least O(n) memory.

Now let's dive in at what's happening under the hood when we call our Fibonacci function.
Let's say that we want to obtain the 5th Fibonacci. Our recursion tree would look something like this.

![](/images/f1.webp)

What is the run time of this function?
Observe that the leaves on the tree are all fib(1) and fib(0). Those signify the base cases.
The root node has two children. Each of those has two children. Each of those grandchildren has two children, and so on. If we do this n times, we will have O(2^n) nodes, which gives us a run time of O(2^n).

Like I said before, this solution has a terrible runtime. If we implement this in a computer, we would see that the number of seconds to generate Nth Fibonacci increase exponentially.

![](/images/f2.webp)

Let's try to optimize this.

## Memoization Solution

Memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the catch result when the same inputs occur again.
If we take a look at the recursion tree from the image above, it's easy to realize that there are lots of identical nodes. For example fib(3) appears twice and fib(2) appears three times. Why should we recompute these from scratch each time?
We should just cache those results and use it later.

Here is the memoization implementation:

```
function fibonacci(n, memoize = { 1: 0, 2: 1 }) {
  if (n in memoize) return memoize[n];
  else memoize[n] = fibonacci(n - 1, memoize) + fibonacci(n - 2, memoize);
  return memoize[n];
}
```

Not bad, right? We still have five lines of code and a much better run time.

While the first recurse function may take over a minute to generate the 50th Fibonacci number on a typical computer, this memoization solution can generate the 10,000th Fibonacci number in just fractions of millisecond.

Now let's take a look at the recursive tree. The orange circles represent cached calls that returned immediately.

![](/images/f3.webp)

What is the run time of this function? By caching the results of numbers that occur multiple times, we asure that we will never compute the same Fibonacci number more that once. That gives us a run time of O(n).

But wait, there's more!

## Dynamic Programming Solution

We can still improve the time and space complexity of this function. Let's think for a second. Because we are caching the results of n Fibonacci we are taking a memory space of O(n), where n is the number of items in our memoize object.
If you really think about how this works we are just using the last two cached values to get the next n Fibonacci. Therefore, we can get rid of the memoize object and just store the last two Fibonacci numbers.

Here is the dynamic implementation:

```
function fibonacci(n) {
  if (n === 1) return 0;
  let a = 0;
  let b = 1;
  for (let i = 2; i < n - 1; i++) {
    let c = a + b;
    a = b;
    b = c;
  }
  return a + b;
}
```

This function is basically storing the last two fibonacci values into a and b. At each iteration, we get the next value (c = a + b) and then move (b, c = a + b) into (a, b).

This explanation may seem pretty obvious, but understanding the process will make other complicated problem painless.

I hope you enjoy reading this post as much as I enjoyed writing it.

<br />

Please consider following me:

[**Code With Beto**](http://codewithbeto.vercel.app/)

[**YouTube**](https://www.youtube.com/c/BetoMoedano)

[**Twitch**](https://www.twitch.tv/betomoedano)

[**Github**](https://github.com/betomoedano)

[**linkedin**](https://www.linkedin.com/in/betomoedano)

[**Medium**](https://medium.com/@betomoedano01)

[**Discord**](https://discord.com/invite/dbYfWFw862)

[**Twitter**](https://twitter.com/betomoedano)

[**Instagram**](https://www.instagram.com/betomoedano)

[**Figma**](https://www.figma.com/@betomoedano)

[** 👈🏼 Go back to blog**](/posts)


In this post, I will show you how to solve the famous Fibonacci sequence using JavaScript.

Fibonacci Algorithm Different Solutions in JavaScript


![React Native](https://lh3.googleusercontent.com/sfHO5MKevLesNw1grlh21j0hgtH5IaMmASI5aVv_-gYyF7dvA96FlS7mdagWM6NDPxfEY2JwkArooEZZPOzXmu01-g=w640-h400-e365-rj-sc0x00ffffff)

# What is Prettier?

[**Prettier**](https://prettier.io/) is a tool that formats your code according to a set of rules. It is a tool that helps you to keep your code in a consistent style.

# Why use Prettier?

- Saves you a lot of time and energy
- Makes your code more readable and maintainable
- No need to discuss style in code reviews
- Supports many languages
- Integrated with most editors

# How to use Prettier with React Native

I recommend you install [**Prettier**](https://prettier.io/) as soon as you start a new React Native project.

Install Prettier

```bash
yarn add -D prettier eslint-plugin-prettier
```

If you are using npm

```bash
npm install --save-dev prettier eslint-plugin-prettier
```

# Configure Prettier

Once you have installed Prettier, you need to configure it by creating a "`.prettierrc.js`" file in your project root.
If you already have a "`.prettierrc.js`" file, you can just modify it to meet your needs.

Here we have a basic example of how a simple configuration file could look like:

```js
module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
};
```

I encourage you to read the [Prettier documentation](https://prettier.io/docs/en/index.html) to learn more about the options you can configure.

Here we have another example with a few more options:

```js
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  endOfLine: 'auto',
};
```

After you have configured Prettier, your code should be formatted every time you save it.

# Conclusion

Stop wasting time formatting your code manually and start using Prettier!

[Go back to Blogs](/posts)

[Buy me a coffee! ☕️](https://www.buymeacoffee.com/betomoedano)


Learn how to use setup Prettier with React Native in a few minutes and save you a lot of time.

How to use Prettier with React Native


![](https://i.ytimg.com/vi/s542Fe7QBuM/maxresdefault.jpg)

# Hello everyone 👋🏼

I am very excited to share some of the things that I have learned in my journey as a software engineer.
For those who want to see the code of this tutorial => [Here!](https://github.com/betomoedano/React-Navigation-Tutorial)
For those who want to watch the video version => [Here!](https://www.youtube.com/watch?v=s542Fe7QBuM)

# Creating the project

We are going to be using Expo for this project so the command to create our app would be something like this

> Create a project named search-filter

```
$ expo init search-filter
```

> Navigate to the project directory

```
$ cd search-filter
```

# Installing dependencies

we are going to need basic navigation for our app, once you are in your project folder run the following commands.

```
$ yarn add @react-navigation/native
$ expo install react-native-screens react-native-safe-area-context
$ yarn add @react-navigation/native-stack
$ yarn add @react-navigation/bottom-tabs
```

Once the dependencies are installed we can go ahead and start de development server

> Start the development server

```
$ expo start
```

# Navigation

Now we are going to set the navigation for our app
We have a bottom tab with two screens, MyStack and Settings and we also have a component called MyStack which contains the Home and the Stack screen
Here we have the code for the navigation.

```
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

//screens
import HomeScreen from "./screens/HomeScreen";
import SettingsScreen from "./screens/SettingsScreen";
import StackScreen from "./screens/StackScreen";

import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

const HomeStackNavigator = createNativeStackNavigator();

function MyStack() {
  return (
    <HomeStackNavigator.Navigator initialRouteName="HomeScreen">
      <HomeStackNavigator.Screen name="HomeScreen" component={HomeScreen} />
      <HomeStackNavigator.Screen
        name="Stack"
        component={StackScreen}
        options={{
          headerBackTitleVisible: false,
        }}
      />
    </HomeStackNavigator.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarActiveTintColor: "purple",
      }}
    >
      <Tab.Screen
        name="Home"
        component={MyStack}
        options={{
          tabBarLabel: "Feed",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={30} />
          ),
          tabBarBadge: 10,
          headerShown: false,
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: "Settings",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="brightness-5"
              color={color}
              size={30}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

```

Note that we also need to create our screens files:

> `HomeScreen.js`

> `SettingsScreen.js`

> `StackScreen.js`

For `SettingsScreen` and `StackScreen` we will just show a text as the following code.

```
import React from "react";
import { View, Text } from "react-native";

const SettingsScreen = () => {
  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          textAlign: "center",
          marginTop: "20%",
        }}
      >
        Settings Screen
      </Text>
    </View>
  );
};

export default SettingsScreen;
```

```
import React from "react";
import { View, Text } from "react-native";

const StackScreen = () => {
  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          textAlign: "center",
          marginTop: "20%",
        }}
      >
        Stack Screen
      </Text>
    </View>
  );
};

export default StackScreen;
```

Finally we can start working on our HomeScreen.js file, for now we can just show a text as well while we are working on getting the fake data from our API.

```
import React from "react";
import { View, Text } from "react-native";

const HomeScreen = () => {
  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          textAlign: "center",
          marginTop: "20%",
        }}
      >
        HomeScreen Screen
      </Text>
    </View>
  );
};

export default HomeScreen;

```

# Getting fake data from Random user API

After we have our project running we can now get our fake data from our API.

We will need to import useEffect and useState from react, we create a variable called `data` that is going to contain the fake users, then we simply use the built-in function `“fetch”` to get the data then we transform the response to a json file and finally, we set our data.

You can console.log the response to check what kind of data we got and play around with it.

```
import React, { useEffect, useState } from "react";
import { View, Text } from "react-native";

const HomeScreen = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData("https://randomuser.me/api/?results=20");
  }, []);

  const fetchData = async (url) => {
    try {
      const response = await fetch(url);
      const json = await response.json();
      setData(json.results);
      setFilteredData(json.results);
      console.log(json.results);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          textAlign: "center",
          marginTop: "20%",
        }}
      >
        Home Screen
      </Text>
    </View>
  );
};

export default HomeScreen;
```

# Displaying the data

Now that we have our data, we need to show it on screen.
We will map throw the data array and render a simple component that shows each user in our array.

```
  return (
    <ScrollView>
      <Text style={styles.textFriends}>{data.length} Friends</Text>
      {data.map((item, index) => {
        return (
          <View key={index} style={styles.itemContainer}>
            <Image source={{ uri: item.picture.large }} style={styles.image} />
            <View>
              <Text style={styles.textName}>
                {item.name.first} {item.name.last}
              </Text>
              <Text style={styles.textEmail}>{item.login.username}</Text>
            </View>
          </View>
        );
      })}
    </ScrollView>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  textFriends: {
    fontSize: 20,
    textAlign: "left",
    marginLeft: 10,
    fontWeight: "bold",
    marginTop: 10,
  },
  itemContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 10,
    marginTop: 10,
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  textName: {
    fontSize: 17,
    marginLeft: 10,
    fontWeight: "600",
  },
  textEmail: {
    fontSize: 14,
    marginLeft: 10,
    color: "grey",
  },
});
```

# Adding the search bar and filtering data. Finally! 🎉

- First, we need to import `useNavigation`
- Using another useEffect we will set the header options for HomeScreen
- We also need another variable to hold the filtered data
- Finally, we create a function called `searchFilterFunction()` that will check if we have text in the search bar,
  if we have text then we will pass that text to uppercase and since we are filtering the data by name we also pass the name to uppercase.
  Then we simply return the filtered data using the method `indexOf()` which returns the first index at which a given element (text)
  can be found in the array, or -1 if it is not present.

After we add that our code should look like this.

```
import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
} from "react-native";
import { useNavigation } from "@react-navigation/native";

const HomeScreen = () => {
  const navigation = useNavigation();
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    fetchData("https://randomuser.me/api/?results=30");
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerLargeTitle: true,
      headerTitle: "Home",
      headerRight: () => (
        <TouchableOpacity
          onPress={() => navigation.navigate("Stack")}
          style={{
            backgroundColor: "purple",
            width: 30,
            height: 30,
            borderRadius: 10,
            justifyContent: "center",
          }}
        >
          <Text
            style={{
              fontSize: 20,
              textAlign: "center",
              color: "white",
            }}
          >
            +
          </Text>
        </TouchableOpacity>
      ),
      headerSearchBarOptions: {
        placeholder: "Friends",
        onChangeText: (event) => {
          searchFilterFunction(event.nativeEvent.text);
        },
      },
    });
  }, [navigation]);

  const fetchData = async (url) => {
    try {
      const response = await fetch(url);
      const json = await response.json();
      setData(json.results);
      setFilteredData(json.results);
      console.log(json.results);
    } catch (error) {
      console.error(error);
    }
  };

  const searchFilterFunction = (text) => {
    if (text) {
      const newData = data.filter((item) => {
        const itemData = item.name.first
          ? item.name.first.toUpperCase()
          : "".toUpperCase();
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilteredData(newData);
    } else {
      setFilteredData(data);
    }
  };

  return (
    <ScrollView>
      <Text style={styles.textFriends}>{filteredData.length} Friends</Text>
      {filteredData.map((item, index) => {
        return (
          <View key={index} style={styles.itemContainer}>
            <Image source={{ uri: item.picture.large }} style={styles.image} />
            <View>
              <Text style={styles.textName}>
                {item.name.first} {item.name.last}
              </Text>
              <Text style={styles.textEmail}>{item.login.username}</Text>
            </View>
          </View>
        );
      })}
    </ScrollView>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  textFriends: {
    fontSize: 20,
    textAlign: "left",
    marginLeft: 10,
    fontWeight: "bold",
    marginTop: 10,
  },
  itemContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 10,
    marginTop: 10,
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  textName: {
    fontSize: 17,
    marginLeft: 10,
    fontWeight: "600",
  },
  textEmail: {
    fontSize: 14,
    marginLeft: 10,
    color: "grey",
  },
});

```

# Conclusion

That is all it takes to create that useful functionality. Happy Coding!

[Buy me a coffee! ☕️](https://www.buymeacoffee.com/betomoedano)


Search Filter React Native | Search Bar Tutorial


![Sandpack](https://user-images.githubusercontent.com/4838076/143581035-ebee5ba2-9cb1-4fe8-a05b-2f44bd69bb4b.gif)

[**Sandpack**](https://sandpack.codesandbox.io/) is a component toolkit for creating live-running code editing experiences using the power of [CodeSandbox](https://codesandbox.io/).

Nowadays as developers, we expect high-quality content and interactive tutorials when we are learning something new.
There are many ways to create interactive content and playgorunds is one of them. Personally I think that for coding and programing content is necessary to
create something that is interactive and easy to understand.

# What can we do with Sandpack?

You can take this blog as an example of what Sandpack can do.
Try it out for yourself. 👇🏼

<SandpackBlogs
  code={`export default function MyButton() {
      
    function onClick() {
        alert('And I am clicked!');
    }
    return (
        <div style={{display: 'flex', justifyContent: 'center'}}>
            <button 
                onClick={() => onClick()}
                style={{
                    height: 50,
                    width: 200,
                    color: 'white',
                    backgroundColor: '#3B82F6',
                    borderRadius: 10,
                    }}>
                Click me
            </button>
        </div>
    )}`}
/>

# Install Sandpack

Sandpack is ready to be used in your React project. The package is published on npm and you can install it with:

```
npm i @codesandbox/sandpack-react
```

or

```
yarn add @codesandbox/sandpack-react
```

Now you can import Sandpack and use it in your project. Additionally, there is a small stylesheet you need to import globally into your project.

```
import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

<Sandpack template="react" />;
```

# Sandpack Templates

Sandpack comes with a few templates. You can use any of them.

```
<Sandpack
    // Try out the included templates below!
    template="react"
    // template="react-ts"
    // template="angular"
    // template="vue"
    // template="vue3"
    // template="vanilla-ts"
    // template="vanilla" // default
/>
```

# Sandpack Themes

Sandpack comes with a few themes out of the box. You can use any of them.

```
<Sandpack
    // Try out the included themes below!
    theme="dark"
    // theme="light"
    // theme="github-light"
    // theme="night-owl"
    // theme="aqua-blue"
    // theme="monokai-pro"
/>
```

Check out the [theme documentation](https://sandpack.codesandbox.io/docs/getting-started/custom-ui) for more information.

# Who is using Sandpack?

Sandpack is a perfect tool for many cases and many well-known companies are using it!
Here are some cool showcases: 😎

- [React docs](https://beta.reactjs.org/learn)
- [Sound Demo](https://code-sound.vercel.app/)
- [Interactive blog post](https://varun.ca/modular-webgl/#data--state)

# Conclusion

Sandpack is a great tool for creating interactive content and playgorunds. It is a great way to learn new things and it is a great way to learn how to use a new tool.
Thanks for reading!

Go back to [blog](/blog)


Lear about Sandpack and how to use it to create interactive playgrounds.

Interactive playgrounds with Sandpack


When I was 15 years old I got my first Apple product, an [iPod touch 2nd generation](https://www.wi-fiplanet.com/review-ipod-touch-2nd-generation/). I was fascinated by how thin and light it was, the beautiful design, responsiveness, and simplicity. I started thinking, what else can I do with this iPod? Well, between us, I learned how to jailbreak and install appsthat weren't available on the AppStore and change the default iOS appearance. Walking around in my neighborhood in Mexico, I remember hacking my neighbors wifi using my 2nd generation iPod. 😅

Since then, I have been amazed by what we can do with technology but mostly software development. This is why I decided to study computer science.

I graduated from college in 2017 with a Bachelor's in Computer Science. After graduating I moved to the U.S. and am now living in Atlanta, GA with my wife. During this time, I have developed and published mobile apps and web applications, started a [Youtube channel](https://www.youtube.com/channel/UCzkDuc3rSDyEZYo3NoHzalw), and blog.

## Development Experience

> **Mobile**

I currently have published 5 apps on different platforms, such as the AppStore, Google Play, and even Amazon Appstore.I've also developed several other smaller apps that I use in my Youtube tutorials to give real examples.

<br />

<AppCard
  title="Only Chats"
  description="Multi-user chat application. This application is the final project of my React Native Course on codewithbeto.dev/learn. The main purpose is to show developers what they will be learning on the course."
  image="onlychats"
  link="https://apps.apple.com/us/app/only-chats/id1643357217"
/>

<AppCard
  title="Lovers"
  description="An app specifically designed for couples. In a crazy and busy world, sometimes we can forget to make our relationship a priority."
  image="lovers"
  link="https://apps.apple.com/us/app/lovers-x/id1595623797"
/>
<AppCard
  title="Rockets X"
  description="Blast off to the vast unknown in the finest Rocketship available to man. Pilot through stars and comets and test your endurance as you pursue ever higher scores."
  image="rockets"
  link="https://apps.apple.com/us/app/rockets-x/id1553564078"
/>
<AppCard
  title="Minima"
  description="A simple and minimalistic app that helps you keep track of your daily tasks."
  image="minima"
  link="https://apps.apple.com/us/app/minima-task-manager/id1612121187"
/>
<AppCard
  title="UnderChat"
  description="A multi-user chat application that allows users to add friends by quickly searching their username, can add profile pictures, update statuses, and provides authentication."
  image="underchat"
  link="https://apps.apple.com/us/app/underchat/id1585917047"
/>
<AppCard
  title="Souls"
  description="Drag and drop to reach the top, collect Souls and skins, bounce throw all the crazy levels."
  image="souls"
  link="https://apps.apple.com/us/app/souls-x/id1585018498"
/>

> **Web**

I currently have two active websites and a few landing pages created for my apps.

<br />

<AppCard
  title="Eco Studios"
  description="Digital studio that specializes in creating websites and mobile applications."
  image="eco"
  link="https://ecostudios.dev"
  isWebsite={true}
/>
<AppCard
  title="Code With Beto"
  description="CWB is this website. It's a place where I share my knowledge and experience with other developers."
  image="cwb"
  link="http://codewithbeto.dev"
  isWebsite={true}
/>

## Open Source

I believe in open source. Some of the best tools that I use in my day to day are open source. Because of this,I decided I wanted to contribute. So far I've been able to contribute to:

- [Sandpack](https://github.com/codesandbox/sandpack)
- [Redux](https://github.com/reduxjs/redux)
- [Expo](https://github.com/expo/expo)

## Development Tools

> **Front-end experience**

My favorite framework to use when developing applications and websites is React and React Native. When utilizing these I like using Redux to manage the state of the app and Javascript for the programming language. Although I also like using Typescript in larger projects.

> **Back-end experience**

I have the most experience with AWS. Using tools like Amplify, S3, DynamoDB,Cognito, GraphQL. Personally, I like AWS because even if it's only me working on an app I can easily make it full-stack

## Entrepreneurial Experience

I have an unstoppable entrepreneurial spirit and a strong conviction to create something that benefits society.

> **Youtube**

I decided to start my own [Youtube channel](https://www.youtube.com/channel/UCzkDuc3rSDyEZYo3NoHzalw) because as a young college student I notice a lack of high-quality mobile and web development videos in Spanish.I decided to share the bit of knowledge I've gained throughout my career to bridge this gap.It is my goal to create the best Spanish tutorials and courses so that others don't have to strugglelearning the content as I did.

My videos focus on teaching best web practices, mobile development, and UI/UX. Creating these tutorials also allowed me to relearn some topics to better teach them. I hope to soon create my own courses dedicated to development.

> **Eco Studios**

because as a young college student Motivated by the passion I have for software development and curiosity for new technologies, my brother and I founded [Eco Studios](https://ecodev.netlify.app/), a digital studio that provides services such as design, development, and deployment of websites and mobile apps.

> **Blog**

I recently decided to start my blog. My goal is to share some of my experiences throughout my journey as a Software Engineer. It also allows me to improve my writing skills.

I know I still have lots to learn. As many devs say, 'The job of a Software Engineer is to always be learning.' If you are a Software Engineer who craves to learn, is interested in creating apps, I invite you to join my community and let's develop together.

Thanks for reading. 😁

**"Stay Hungry. Stay Foolish"** | Steve Jobs 2005


When I was 15 years old I got my first Apple product, an iPod touch 2nd generation. I was fascinated by how thin and light it was, the beautiful design, responsiveness, and simplicity.

Hey 👋, I'm Alberto


![google analytics](https://neilpatel.com/wp-content/uploads/2017/01/googleanalytics.png)

# Introduction

[**Google Analytics**](https://analytics.google.com/) is a web analytics service offered by Google that tracks and reports website traffic.
It is a good idea to use it to track your website visitors and to help you improve your website.
In this post, I'll show you how to use Google analytics with Next.js.

With the release of Next.js v11, they come out with a new [**` <Script/>`**](https://nextjs.org/docs/basic-features/script)
component which allows you automatically prioritize
the loading of third-party scripts to your website such as Google Analytics.

# Create a new google analytics property

The first thing you need to do is create a google analytics [**account**](https://analytics.google.com/) if you don't have one already,
then go to the admin section and create a new property, give it a name, set it up with your info,
and finally click on create
![](https://www.analyticsmania.com/wp-content/uploads/2020/11/image-2020-11-09T160629.491.jpg)

# Set up a data stream to start collecting data

After you create the property, you need to set up a data stream to start collecting data.
You can do this by going to the **Data Streams** section of the admin panel
and then clicking on the **Add Data Stream** button.
You will see a screen that looks like this: ![](https://www.analyticsmania.com/wp-content/uploads/2020/11/image-2020-11-14T222623.108.jpg)
Since we are using Next.js, we need to set up a data stream that will collect data from **Web**.

You will be asked for your **website URL** and **stream name** and then click on **Create stream**.

After you create the stream, you will see a screen that looks like this: ![](https://www.optimizesmart.com/wp-content/uploads/2020/10/Web-Stream-details.png)

If you scroll down a bit, you will see the **Add new on-page-tag** option.
We need to add this tag to our Nextjs project. ![](https://pagecrafter.com/wp-content/uploads/2021/06/GA4-tracking-code-step5.jpg)

# Add the Google Analytics tracking code to your Next.js project

Now that we have our data stream set up, we need to add the Google Analytics tracking code to our Next.js
project so that we can start collecting data.

Using the **`<Script/>`** component, we can add the Google Analytics tracking code to our Next.js project.
The perfect file to add the tracking code is **`pages/_app.js`**.
This is how our **`<Script/>`** component could look like:

```js
<Script
   strategy="lazyOnload"
   src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>

<Script strategy="lazyOnload">
   {`
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
        page_path: window.location.pathname,
       });
           `}
</Script>
```

# Conclusion

Having set up the data stream and added the Google Analytics tracking code to our Next.js project,
we can now start collecting data. You can test this by running your Next.js
project and then go to your Google Analytics account. You should see the data stream appear.

I hope this post helped you to get started with Google Analytics with Next.js.

If you want to learn more about me, check these links:

[**Twitter**](https://twitter.com/betomoedano)

[**Instagram**](https://www.instagram.com/betomoedano)

[**Github**](https://github.com/betomoedano)

[**linkedin**](https://www.linkedin.com/in/betomoedano)

[**Discord**](https://discord.gg/dbYfWFw862)

Go back to [**Blog**](/posts).


In this blog post, I'll show you how to use google analytics with Next.js

How to use google analytics with Next.js


**What You'll Learn**

- How to manage state in React Native using [**Redux Toolkit**](https://redux-toolkit.js.org/) and React Redux

**To follow this blog, you'll need:**

- Some experience using [React Native](https://reactnative.dev/docs/getting-started) as well as [Hooks](https://reactjs.org/docs/hooks-intro.html), [Navigation](https://reactnavigation.org/), [Core Components, and APIs](https://reactnative.dev/docs/components-and-apis).
- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)

## Introduction

Welcome to the Redux Toolkit React Native Quick Start tutorial! **This tutorial will briefly show how to use Redux Toolkit and React Redux to manage state in React Native**.
if you want to jump straight to the code, you can run the following command in your terminal:

```
expo init my-app --template react-native-redux-template
```

you can alson check this template on [GitHub](https://github.com/betomoedano/react-native-template-redux-toolkit)

## Installation

Add the Redux Toolkit and React-Redux packages to your project:

If you are using npm

```sh
npm install @reduxjs/toolkit react-redux
```

If you are using yarn

```sh
yarn add @reduxjs/toolkit react-redux
```

## Create Slice

Let's imagine that we are building a Reminders app and we want to make the reminders available to the `AddReminderScreen.js` and the `HomeScreen.js`.

We need to use createSlice to define our Reminders logic. Inside of your `/src` folder create another folder called `features`, inside features create another folder called `reminders` and finally create a `remindersSlice.js` file.

We recommend putting as much as the logic for a given feature as possible into a single file, we typically refer to this as a "Slice File" because it represents the logic in the data for one Slice of your redux state.

Redux does not care about your file structure however we recommend separate folders per feature. See [Redux FAQ: Code Structure](https://redux.js.org/faq/code-structure) for extended details on file structure.

```
import { createSlice } from "@reduxjs/toolkit";

//initial state for this slice
const initialState = {
  reminders: [],
};

//here we define the slice that contains the reducer logic
export const remindersSlice = createSlice({
  name: "reminders",
  initialState,
  reducers: {
    setReminders: (state, action) => {
      state.reminders = action.payload;
    },
    addReminder: (state, action) => {
      state.reminders.push(action.payload);
    },
    deleteReminder: (state, action) => {
      state.reminders = state.reminders.filter(
        (reminder) => reminder.id !== action.payload
      );
    },
  },
});

//finally, we export the actions and the reducer
export const { setReminders, addReminder, deleteReminder } = remindersSlice.actions;
export default remindersSlice.reducer;
```

## Create a Redux Store

Once we have our slice file, we need to create a redux store.

```js title="src/app/store.js"
import { configureStore } from '@reduxjs/toolkit';
import remindersReducer from './remindersSlice';

export const store = configureStore({
  reducer: {
    reminders: remindersReducer,
  },
});
```

## Adding the React Redux Provider

The [`<Provider>`](https://react-redux.js.org/api/provider) component makes the Redux `store` available to any nested components that need to access the Redux store.

In the example below, we added the `<Provider>` to the `<App>` since it is at the very top of our component hierarchy.

```js title="App.js"
import Home from './src/screens/Home';
import { Provider } from 'react-redux';
import { store } from './src/app/store';

export default function App() {
  return (
    <Provider store={store}>
      <Home />
    </Provider>
  );
}
```

## Additional considerations when initializing the app

In some cases, you could need access to the Redux store in the `<App>` component but since we are adding the Provider inside the `<App>` we can not access the store within the `<App>`.
In the example below we show how to solve this by creating an `<AppWrapper>` which contains the `<Provider>` and the `<App>`.

```js title="App.js"
import { View, Text } from "react-native";
import { Provider } from "react-redux";
import { store } from "./src/app/store";
import { useSelector } from "@reduxjs/toolkit";

export default function AppWrapper() {
   <Provider store={store}>
      <App>
   </Provider>
}

function App() {
  const count = useSelector((state) => state.counter.count);
  return (
      <View>
        <Text>Counter value: {count}</Text>
      </View>
  );
}
```

## Further Resources

- See [the Redux Toolkit TypeScript Next.js Example](https://github.com/vercel/next.js/tree/canary/examples/with-redux) for how to integrate Next.js with Redux Toolkit.
- See [the Create React App/Vite Example](https://github.com/learnwithjason/lets-learn-redux-toolkit) for how to integrate React/Vite with Redux Toolkit.

Thanks for reading!
Go back [blog](/posts).


Welcome to the Redux Toolkit React Native Quick Start tutorial! This tutorial will briefly show how to use Redux Toolkit and React Redux to manage state in React Native. if you want to jump straight to the code...

How to use Redux with React Native

It might be easy to duplicate code in React when you first start using it when creating items like a Button. But it is best to use a single dynamic component Button for the entire app. In this post, I will walk you through how to do this.

First, we are going to take a look at the basis of how components work in React. According to the React documentation, components are the foundation upon which you build user interfaces (UI).
A React component is a javascript function that can contain HTML (Hypertext Markup Language) inside. Below we have a very basic example of a component in React.

<SandpackBlogs
  editorHeight="120px"
  code={`export default function MyButton() {
    return (
            <button>Click me</button>
    )}`}
/>

## Passing Props to a Component

Just like functions in javascript, components can also have parameters in React called "Props."
Below we have a very basic example of a Button that receives a Prop called "title". (you can edit the example)

<SandpackBlogs
  editorHeight="150px"
  code={`function MyButton({ title }) {
  return <button>{title}</button>;
}
export default function App() {
  return <MyButton title="Hello World" />;
}
`}
/>

## Props are a powerful weapon!

I know we can underestimate Props at the beginning, but props can be very powerful if we know how to use them correctly. Props allow us to create dynamic components! What do I mean by this? In the previous example, we can see that we can create a simple Button component and use it everywhere in our app. But things can get a little tricky when for example we want to use a different color for our Button.

<SandpackBlogs
  editorHeight=""
  code={`function MyButton({ title }) {
  return <button 
            style={{background: 'blue', color: 'white'}}
         >{title}</button>;
}
export default function App() {
  return (
    <div>
      <MyButton title="Hello World" />
      <MyButton title="Goodbye World" />
    </div>
  );
}
`}
/>

##

Using props we can pass not only text, but also other things like styles, images, and even other components.
For example, a common mistake could be to apply a color style to our Button every time we want to change the color. The same applies to when we want to change the size.
As you can see every time we need to change something in our Button we end up making a lot of repetitive code and that's not good 😵‍💫

## The magic of a Dynamic Component

If we take a step back we can instead create a single dynamic Button for our entire app to avoid repetitive code.
You might be thinking but how do I create a fully dynamic Button for my app. Below is an example of a dynamic Button that can take a color and size as a property.

<SandpackBlogs
  editorHeight=""
  code={`function MyButton({ title, color, size }) {
  return <button 
            style={{background: color, color: 'white', fontSize: size, padding: size}}
         >{title}</button>;
}
export default function App() {
  return (
    <div>
        <MyButton title="Hello World" color="purple" size="20px" />
        <MyButton title="Goodbye World" color="blue" size="30px" />
    </div>
  );
}
`}
/>

##

You can see know that our Button component looks a little more complex than at the beginning but now every time we want to use it we can just specify what color, what size, and what title we want in that Button, which makes our code super clean and easy to understand.

## Conclusion

Making dynamic components might take a little more time than making a static component. But definitely, this effort will pay off in the long term.



Go back [blog](/posts).

It might be easy to duplicate code in React when you first start using it when creating items like a Button. But it is best to use a single dynamic component Button for the entire app. In this post, I will walk you through how to do this.

Dynamic Components with React


Hello my friend! Welcome to my first personal post ever!

<TestComponent name="This is a work in progress 🚧 " />

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item

## I will do this later! 😅

## Conclusion


Hello my friend! Welcome to my first personal post ever!