Functional components

Learn to define functional components.

Functional component

In React Native, a component is a JavaScript function that returns JSX. This is called a functional component. The function name always starts with a capital letter.

Example: function Greeting() { return <Text>Hello</Text>; }. Here Greeting is a component; it can be used just like View or Text.

To use a component, you write it as a JSX tag: <Greeting />. This calls the function and places its returned JSX on the screen.

Using a component

You use a defined component as a JSX tag inside another component. The tag name must match the function name exactly.

For example, to use the Greeting component inside App: function App() { return <Greeting />; }.

This makes the component reusable. You write it once and use it in many places.

Exercise Write a Greeting component

Write a Greeting component that returns <Text>Hello</Text>. Then the App component should call <Greeting />.

Show example solution

function Greeting() {
  return (
    <Text>Hello</Text>
  );
}

function App() {
  return (
    <Greeting />
  );
}

Test yourself

Which is a valid functional component?
- function greeting() { return <Text>Hello</Text>; }
- <Greeting />
- function Greeting() return <Text>Hello</Text>;
- function Greeting() { return <Text>Hello</Text>; }
Show answer

function Greeting() { return <Text>Hello</Text>; } — Component names start with capital and return JSX inside braces.

Component call

function Greeting() { return <Text>Hello</Text>; }

function App() {
  return (____);
}

Show answer

function Greeting() { return <Text>Hello</Text>; }

function App() {
  return (<Greeting />);
}

Match the component parts

function

Definition
return

Return
<Greeting />

Call
Greeting

Component name

Next lesson: Props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies