Hello World in React-Native

1) Hello World Example in Functional Component


import React from 'react';

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


function HelloWorldApp (){

  return (

    <View

      style={{

        flex: 1,

        justifyContent: "center",

        alignItems: "center"

      }}>

      <Text>Hello, world!</Text>

    </View>

  )

}

export default HelloWorldApp;



2) Hello World Example in Class Component


import React, { Component } from 'react';

import { Text } from 'react-native';


class HelloWorld extends Component {

  render() {

    return (

      <Text>HelloWorld!</Text>

    );

  }

}


export default HelloWorld;


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