
### Getting Started

Lets start with a simple example. A container **View** component with three **Text** components.

```
// App.js contents

import React from 'react';
import { View, Text } from 'react-native';
import styles from './App.style';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.wrapperOne}>
        <Text style={styles.textStyle}>1</Text>
      </View>
      <View style={styles.wrapperTwo}>
        <Text style={styles.textStyle}>2</Text>
      </View>
      <View style={styles.wrapperThree}>
        <Text style={styles.textStyle}>3</Text>
      </View>
    </View>
  );
}
```

The below shows the styles for the App.js

```
// App.style.js contents

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#c3ead8'    
  },
  wrapperOne: {
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#93efc4'
  },
  wrapperTwo: {
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#73d0a5'
  },
  wrapperThree: {
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#54b689'
  },
  textStyle: {
    textAlign:'center'
  }
});

export default styles;
```

Which renders as so:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen1_ym95n5.png)

### Styling the Container

Now we add **flex:1** to the container:

```
container: {
    flex: 1,
    backgroundColor: '#c3ead8'    
}
```

This makes container fill its parent, i.e. whole screen.

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen2_mddadn.png)

Now we add:

```
container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#c3ead8'    
}
```

Each view’s **flexDirection** is set to colum by default but setting it to **row** will change the orientation of the items in the container.

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen3_rehrk6.png)

Now we can control the orientation of the content using **flexDirection**. Now lets add **justifyContent** and **alignItems**:

```
container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems:'flex-start',
    backgroundColor: '#c3ead8'    
}
```

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen4_h4dmi7.png)

Similarly for:

```
container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems:'flex-end',
    backgroundColor: '#c3ead8'    
}
```

Views will render like:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen5_jio92r.png)

- **flexDirection** determines the primary axis as **row** or **column**.
- **justifyContent** determines distribution of children along **primary axis**.
- **alignItems** determines the **alignment** of children along the secondary axis.

To set items to center :

```
container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems:'center',
    backgroundColor: '#c3ead8'    
}
```

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857581/blog/flexbox/screen6_bi2vpi.png)

**justifyContent** supports **flex-start**, **center**, **flex-end**, **space-around**, and **space-between**.

For **space-around**:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857582/blog/flexbox/screen7_fvqsb6.png)

and **space-between**:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857582/blog/flexbox/screen8_v4b687.png)

**alignItems** supports: **flex-start**, **center**, **flex-end**, and **stretch**.

### Overriding the Container Style

If we need an item to override it’s defined as defined by the container we could use style the items individually.

**alignSelf** overrides **alignItems** and supports these options **auto**, **flex-start**, **flex-end**, **center**, **stretch** and **baseline**.

If we tell an item to align itself to **flex-start**,

```
alignSelf: 'flex-start'
```

It would end up like this:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857582/blog/flexbox/screen9_p1uw90.png)

**flexGrow** controls how much the item will grow relative to the rest of the flexible items inside the same container.

```
flexGrow: 1
```

Would render as:

![screenshot](https://res.cloudinary.com/rpandu/image/upload/v1595857582/blog/flexbox/screen10_xacxuu.png)

**flexBasis** controls the item size with percent. For eg:

```
//wrapperOne style
flexBasis:100

//wrapperTwo style
flexBasis:50 

//wrapperThree style
flexBasis:50 
```

#### Thanks for Reading!

These are the basic use of flex for React View components. I will update as I learn more.





In the following tutorial you will learn how flex works in react-native

Understanding Flexbox in React Native


### Introduction 

Git is the most popular version control system (VCS) in the world and it's hard to imagine what a developer's life would be like without it. Nowadays, the vast majority of developers - including individuals and large companies - choose Git for their projects.

The very first question that comes to a beginner is - How to use Git? If you want to benefit from the real power of Git you should start by learning the Git best practices and essential commands.

In this article, I will explain essential Git commands that are especially important for beginners. To make your life easy, you can use this post as a Git Cheat Sheet for reference in the future.

Now let’s dive in.

### Git Init

This is probably the first command you will use when creating a new project. It is used to initialize a new, empty, Git repository. The syntax to use this command is really simple:

`git init`

### Git Clone

Oftentimes, you already have an existing Git repository (sometimes hosted on a site like GitHub or Bitbucket) and you want to copy it to your local machine. In this case, the **git clone** command is what you'll need. In simple terms, this command is used to create a copy or clone of an existing repository:

`git clone [repository-url]`

### Git Status

Git is always watching for changes in the working directory of your project. This includes changes like creating a new file, adding a file for tracking, deleting a file, changing file permissions, modifying a file name or content, etc. You can list the changes that Git sees at a particular time by using the **git status** command:

`git status`

### Git Add

Once you make some changes to a file in your working directory and confirm they are correct with the **git status** command, it's time to add those changes to Git's staging area.

You can use the **git add** command to add a single file to the staging area at a time:

`git add <file-name>`

Or, if you have more than one changed file, you can add them all with the -A option:

`git add .`

### Git Commit

Once your changes are staged, you can use the **git commit** command to save those changes into the Git repository. A Git commit is a set of file changes that are stored in Git as one unit.

As a part of the this process, you should provide a clear and concise commit message, so other developers can easily understand its purpose:

`git commit -m "some useful comment about your change"`

A popular rule of thumb is to write commit messages in the imperative mood.

### Git Branch

You can think of a Git branch as a chain commits or a line of development. The **git branch** command is like a swiss-army knife. It will show all Git branches in the current Git repository. The branch marked with an asterisk is your current branch:

`git branch`

To create a new branch, simply use the above command and specify your new branch name:

`git branch <new-branch-name>`

### Git Checkout

The **git checkout** command allows you to jump (switch) between different branches:

`git checkout <name-of-branch>`

In addition, the **git checkout** command can be used to create a new branch and check it out at the same time:

`git checkout -b <name-of-branch>`

### Git Merge

So, now you have completed your work by making several commits on your new branch. What next?

Usually, these changes should be merged back into the main code branch, (usually called **master/main** by default). We do this using the **git merge** command:

`git merge <branch-to-merge-from>`

Note that the **git merge** command merges commits from the specified branch into the currently active branch. So before running the command, you need to check-out the branch that you want to merge into.

### Git Push

So far, all of the commands we've run have only affected the local environment. Now it's time to share your newly committed changes with other developers by pushing them to the remote repository (often hosted on sites like GitHub and Bitbucket):

`git push <remote> <name-of-branch>`

As an example, this will often look something like:

`git push origin master`

In this case, we are pushing the **master/main** branch to the remote repository labelled **origin** (which is the default name for a remote in Git).

Once you push your changes, other team members can see them, review them, and pull them into their own local copies of the Git repository.

### Git Pull

The git **pull command** is just the opposite of **git push**. You can use it to download changes made by other developers into your local repository:

`git pull <remote> <name-of-branch>`

The above command will download new commits in the specified branch of the remote repository and try to merge them into your local copy of that branch.

### Git Log

If you want to view the history of all commits on a Git branch, **git log** is the solution. The **git log** command displays an ordered list of all the commits, along with their authors, dates, and commit messages, from newest to oldest:

`git log`

To list commits from oldest to newest, use the --reverse option:

`git log --reverse`

### Git Stash

Sometimes, you make some changes to files in your working directory, but then realize you need to work on something else. However, you don't want to lose the work you did so far. In the situation, the git stash command can be used to save all uncommitted changes in the working directory so we can retrieve them later:

`git stash`

After using **git stash**, your working copy will be cleaned (all your changes will disappear). But don't worry they aren't lost, **git stash** simply places those changes in temporary storage which you can retrieve using the **git stash pop** command:

`git stash pop`

Here the **pop** subcommand will reapply the last saved state in the stash so you can continue working where you left off.

Git is the most popular version control system (VCS) in the world and it's hard to imagine what a developer's life would be like without it.

Essential Git Commands For Dummies


This is a beginners guide to react hooks. It will take time to go through this guide, so grab a cup of coffee or whatever you like.

### What are Hooks?

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. **It does not work inside classes.**

Don't worry though, **classes aren't being removed or discouraged.** React's Developers being given more ways to code!

### What's wrong with classes?

There are couple of problem with Classes

- It’s hard to reuse stateful logic between components.
- Classes confuse both people and machines

React doesn’t offer a way to “attach” reusable behavior to a component. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused.
Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

The gist is classes can sometimes be confusing and can be written any number of ways. Dive into somebody else's project and you could be in for a world of different syntax and style choices.
By allowing classes to be converted into smaller functional components, we can even further break out parts of our application into smaller and more focused components.

### React's State Hooks

Hook state is the new way of declaring a state in React app. Hook uses **useState()** functional component for setting and retrieving state.

Let's say we have a component like this:

```
import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
```

This component will count the click on button.

With React Hooks, we are able to condense that class into this functional component:

```
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

Notice how much easier the functional component would be for beginners just learning React.

### What is this useState() syntax

```
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);
```

#### What does calling useState do?
It declares a “state variable”. Our variable is called count but we could call it anything else, like state.

#### What do we pass to useState as an argument?
The only argument to the useState() Hook is the initial state. In Classes the state should be Object, but in Hooks it does not need to be Object. We can keep a number or a string if that’s all we need. In our example,0 is the initial state.

#### What Do Square Brackets Mean?
You might have noticed the square brackets when we declare a state variable:

```
  const [count, setCount] = useState(0);
```

This JavaScript syntax is called “array destructuring”. It means that we’re making two new variables count and setCount, where count is set to the first value returned by useState, and setCount is the second.

### What does useState() give us?

**useState** gives us two variables and we can name our two variables whatever we want. Just know that:

- The first variable is the value. Similar to this.state
- The second variable is a function to update that value. Similar to **this.setState**

The final part to useState is the argument that we pass to it. **The useState argument is the initial state value.** In the case of our counter, we started at 0.

### Using Multiple State Hooks

We can even use **useState()** multiple times in the same function.

```
function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
```

### React's Effect Hook

The Effect Hook lets you perform side effects in function components. It does not use components lifecycle methods which are available in class components. In other words, Effects Hooks are equivalent to **componentDidMount()**, **componentDidUpdate()** and **componentWillUnmount()** lifecycle methods.

Side-effects are things you want your application to make like:

- Fetching data
- Manually changing the DOM (document title)
- Setting up a subscription

> Effects will run after every render, including the first render.

Let's compare a class to a functional component:

```
import React, { Component } from 'react';

class Example extends Component {
  componentDidMount() {
    console.log('this is componentDidMount!');
    document.title = 'changeTitle';
  }

  render() {
    return <div>stuff goes here</div>;
  }
}
```

When using the the Effect Hook, we use **useEffect()**

```
function Example() {
  useEffect(() => {
    console.log('this is useEffect ');
    document.title = 'changeTitle';
  });

  return <div>stuff goes here</div>;
}
```

### Running an Effect Hook only when something changes

Since **useEffect()** runs every time a component renders, how do we get it to only run once, on mount? The Effect Hook can take a second argument, an array. It will look through the array and only run the effect if one of those values has changed.

#### componentDidMount: Runs once

```
// only run on mount. pass an empty array
useEffect(() => {
  // only runs once
}, []);
```

#### componentDidUpdate: Runs on changes

```
// only run if count changes
useEffect(
  () => {
    // run here if count changes
  },
  [count]
);
```

Now, you have some understanding of hooks and how they work. If you want to learn hooks in-depth, you should check the official docs by React's Developers.


In the following tutorial you will learn: 1. How to use React hooks | 2. How the same logic would be implemented in React class components

React Hooks Made Easy for Dummies


It doesn't matter whether you are a beginner or experienced programmer, blogging can give you a lot of benifits to you and your career, also it's a way of giving back to the developer community around the world. Many people think that blogging is only for people who want to make some passive income appart from their day job, there are also other benifits to blogging which might not be obvious for people who aren't activily writing about their work.

These are the top 5 reasons I personally think why every developer should have a blog and write what they know or learnt from their experience.

## 1. Learn and Improve Programming Skills

It may not sound intutive expecting to learn about programming by writing a blog, but i belive this the most important reason why programmers have the habbit of writing blog. As it always said, the better way to learn things is by teach someone and this is so appropriate for programmers.

There are a few reasons why blogging is exceptionally good for this:

When you publish a blog post for the world to see, it adds pressure to make sure you know what you’re talking about. No one wants to write something that shows they just don’t get it, so the added pressure teaches you to dig deeper and think about what you’re explaining.

Explaining a concept is much more difficult than “knowing” it. You may be able to connect to APIs from Android code without breaking a sweat, but writing about it and teaching others requires a deeper understanding of what’s actually going on. You need to be able to explain what’s going on under-the-hood.

## 2. Collecting Snippets of Useful Code

Depending on what the information is, I vary how I capture it. If it's something that would be useful as step-by-step instructions with additional explanations and details, I usually capture these as a blog entry. If it's something I don't want to publicly share, I sometimes create private posts that are not shared, or keep them separate in a notebook.

If it's a snippet of useful code, or a few simple and short lines of code, I collect them using Github's Gist. For longer worked examples, I create a project on GitHub and commit a code example there. The majority of my projects on GitHub are code examples where I was looking at something new and put together a worked example as part of learning whatever that new thing was.

## 3. Sharing Lessons Learned With Others

The majority of the time when I search for info on how to use a new library or framework, the most useful content I find is usually an article written by a developer who worked through the steps on how to use something.

This type of content wouldn't be online at all if that other developer hadn't taken the time to create it and share it. The great thing about the internet for software development is that content is easy to find if you Google, but people need to take the time to write and share that content in the first place. If you have something to share, even if you think it's obscure or might not be useful, there's always someone else who is working on something similar. They might be struggling to work something out — help out your fellow developers and share your knowledge.

Every developer has something they've worked on that would be useful to another developer trying to learn and get up to speed on that same thing. Even if you're a new developer with a few months' experience, you still have lessons you've learned from your own experiences that would be useful to another developer with less (or even more) experience following their own skills development path.

## 4. Build relations with new developers

Blogging helps you to develop new ties with other developers. How? Let me tell you. When you publish an original post; for instance, you publish a how-to guide to coding in JQuery, It goes live to the world and millions of people including some tech giants read it and in this way, you can connect with other bloggers who have great developer teaching stuff just like you.

A blog opens the magical doors to talk to and share your thoughts and make connections.

## 5. Creates a Timeline of Your growth

Blogging consistently, allows you to chronicle the evolution of your skills while you’re learning to code. You will see the progress in you from post to post, and this growth motivates you to keep going. Your blog can also help in your career development. You can ask the potential employers to see your blog, so it would leave a good impact on them when they look at your connections or posts. It may help you get a job. Isn’t it great?

## Conclusion

As a programmer, you must know your importance in this tech-centric world. You are an important asset of the generation. Apart from earning 80k to 90 k per month, you should spend some of your time on blogging. It will add extra benefits to your career and you can be a reason to inspire other fellow programmers or students. Know your worth and the importance of blogging for you.

**Keep coding and also keep writing!**





It doesn't matter whether you are a beginner or experienced programmer, blogging can give you a lot of benifits to you and your career, also it's a way of giving back to the developer community around the world. Many people think that blogging is only for people who want to make some passive income appart from their day job, there are also other benefits to blogging which might not be obvious for people who aren't activity writing about their work

Ravin Pandu

I convert ☕ into

Latest Blogs

A Blog About Programming And Life