Sumrit Grover

Posted on Dec 9, 2021

Using Flex like a Pro

#reactnative #react #javascript #webdev

Flex defines how much that view would fill the screen.

Space would be divided according to the flex property of each element.

In the following example, the container view has flex: 1.

The red view has flex: 1, the yellow view has flex: 2, and the green view has flex: 3.

1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.

FlexDirection

It is the property which defines the direction in which the child components are laid out.

FlexDirection -"Row"

Align children from left to right.

FlexDirection - Column(default)

Align children from top to bottom.

Web development has tons of different layout techniques and >tricks available. While in React Native your best tool for >building layouts be will be Flexbox.

DISCLAIMER
Flexbox in React Native is a bit different from CSS Flexbox. Differences are subtle but they are still there.

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Top comments (0)

Daily JavaScript Challenge #JS-72: Count the Frequency of Every Unique Element in an Array

DPC - Jan 14

Installing your react.js local package registry to your project

Midhun Krishnan R - Dec 14 '24

Daily JavaScript Challenge #JS-73: Validate Palindrome Permutation

DPC - Jan 15

Building a Cost-Effective, Serverless Virus Scanner on AWS: A Step-by-Step Guide

Enri Peters - Jan 17

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

DEV Community