Basic Component In React Native

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'
class Example extends Component {
render () {
return (
<View>
<Text>I'm a basic Component</Text>
</View>
)
}
}
AppRegistry.registerComponent('Example', () => Example)

Stateful Component In React Native

These components will have changing States.

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'
class Example extends Component {
constructor (props) {
super(props)
this.state = {
name: "Sriraman"
}
}
render () {
return (
<View>
<Text>Hi, {this.state.name}</Text>
</View>
)
}
}
AppRegistry.registerComponent('Example', () => Example)

Stateless Component In React Native

As the name implies, Stateless Components don’t have any local state. they’re also referred to as Dumb Components. with none local state, these components don’t need lifecycle methods or much of the boilerplate that comes with a stateful component.

Class syntax isn’t required, you’ll simply do const name = ({props}) => ( … ). Generally stateless components are more concise as a result.Beneath is an example of two stateless components App and Title, with an indication of passing props between components.

Stateless Component Example

import React from 'react'
import { View, Text, AppRegistry } from 'react-native'
const Title = ({Message}) => (
<Text>{Message}</Text>
)
const App = () => (
<View>
<Title title='Example Stateless Component'/>
</View>
)
AppRegistry.registerComponent('App', () => App)

This is the recommended pattern for components, when possible. As in the future optimisations can be made for these components, reducing memory allocations and unnecessary checks.

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: Components In React Native

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password