Skip to main content

React Native Flexbox Tutorial With Example

React Native Flexbox Example

Hi Dev,

Today, I will learn you how to create flexbox in react native. You can easily create flexbox in react native. First i will import namespace View, after I will make flexbox using View tag in react native.

Here, I will give you full example for simply display flexbox using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.


expo init flexbox
Step 2 - App.js

In this step, You will open App.js file and put the code.


import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.greenbox} />
         <View style = {styles.corolbox} />
         <View style = {styles.purplebox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      paddingTop: 130
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   corolbox: {
      width: 100,
      height: 100,
      backgroundColor: '#ff7f50'
   },
   greenbox: {
      width: 100,
      height: 100,
      backgroundColor: 'green'
   },
   purplebox: {
      width: 100,
      height: 100,
      backgroundColor: 'purple'
   }
})
Step 3 - Run project

In the last step run your project using bellow command. 


expo start
It will help you...
Labels:

Comments

Post a Comment

Popular posts from this blog

Laravel 6 validation required if another field is empty

Hii guys, In this artical, i will give you example of laravel 6 in validation required if another field is empty. We know laravel provide several in-built laravel 6 validation required_without . If you need to add validation rules like required if other field is empty in laravel then you can do it using required_without. I am going to explain you, If you can not enter test (field) value at that time test1 (field) is required. So at that time you can add validation required_without. So, you can use this way: "test1" =>"required_without:test" Example: public function store(Request $request) { $request->validate([ "test" =>"required", "test1" =>"required_without:test" ]); dd("Done!"); } If return validation error otherwise show Done!. It will help you...
Post a Comment
Read more

Laravel 8 Toastr Notifications using yoeunes/toastr package Tutorial

Laravel 8 Toastr Notifications using yoeunes/toastr package Example Hi Guys Today, I will learn with you how to install and use toastr notifications using yoeunes/toastr package in laravel application.we will use yoeunes/toastr package.we will write step be step tutorial for laravel toastr notifications. Toastr notifications yoeunes/toastr package provides warning,success,error and info notifications.You have to just follow few step for implement toastr notifications in your laravel application. In this example i give you example from scratch. So just follow bellow step. Step 1: Install yoeunes/toastr package We need to install yoeunes/toastr composer package for datatable, so you can install using following command: composer require yoeunes/toastr After that you need to set providers and alias. config/app.php 'providers' => [ ... Yoeunes\Toastr\ToastrServiceProvider::class ... ]; As optional if you want to modify the default configuration, you can publish...
Post a Comment
Read more