View, Text, Style in React Native

 1) View, Text, Style in React Native

View:- View is the basic component in React native to show all other components on the screen, It will be wrapped around the other components like Text, Button, Textinput, etc.

Text:-Text is used to show the text like paragraph or labels etc,

Style:- Style is used to style all the specific components like height, width, color, etc.


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

export default function HelloWorld(){
  return(
    //This is View 
    <View
    // This is style 
      style={{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'red'
    }}>
  {/* This is Text  */}
      <Text style={{
        fontSize:22,
        fontWeight:'bold',
        color:'white'
      }}>HelloWorld</Text>
    </View>
  )
}


OUTPUT





Comments

Post a Comment

Popular posts from this blog

Button in React-Native

Image
1) Button Example in React Native import   React   from   'react' ; import  {  StyleSheet ,  Button ,  View ,  SafeAreaView ,  Text ,  Alert  }  from   'react-native' ; function   ButtonExample () {      return (    < SafeAreaView   style = { styles . container } >      < View >        < Text   style = { styles . title } >         The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.        </ Text >        < Button          title = "Press me"       ...
Read more

State in React Native

Image
 1) How to use State in React Native in Class Component State:- State is very common in react native, the state is mutable property which we can change the value at any time. import   React , { Component }  from   'react' ;   import  {  Text ,  View ,  Button  }  from   'react-native ;      export   default   class   StateExample   extends   Component  {        state  = {            myState : 0   //this is default state value     }        //here we are updating the state through below function      updateState  = ()  =>   this . setState ({ myState :   this . state . myState  +  1 })     ...
Read more