React native stateless and stateful Components are one of the main styles we could write components within our apps. The concept of stateless and stateless components comes from React Js fundamentals, and it’s very common that you have already uses it before.

What is a React Native Stateless Component

React Native Stateless Component is a React component which does not hold a state. Simply put there is no local state in it. A stateless component does not need lifecycle methods or any complexity setup.
It’s a component that only displays UI or Data it receives as a prop. It’s also sometimes referred to as a dump component.

An example of a stateless component in React native would be a heading Title Text component. it shouldn’t hold or change a state at all. I just receives the title and displays it.

Example

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

const HeadingTitle = ({ title }) => {
  return (
    <Text style={styles.title}>{title}</Text>
  )
}

const styles = StyleSheet.create({
  title: {
    fontWeight: 'bold',
    fontSize: 25
  }
})
export default HeadingTitle

What is a React Native Stateful Component

React Native Stateful Components are the default form of React Native components. As opposing to the stateless components, stateful components hold data and manipulate it, in addition to the lifecycle methods.

An example of the Stateful Components would be a form TextInput, where the text value changes every time the user writes new words.

Example

import React, { useState} from 'react'
import { StyleSheet, TextInput} from 'react-native';

const LoginInput = () => {
  const [ text, setText ] = usestate(null)
  return (
    <TextInput 

      onChangeText={(text) => setText(text)} />
  )
}

const styles = StyleSheet.create({
  textInput: {
    borderWidth: 1,
    borderColor: "lightgray",
    borderRadius: 10,
    height: 45,
    width: "100%",
  }
})
export default LoginInput

The concept of react native stateless and stateless components comes from React fundamentals and the main ways of Building react native components