Note: this draft presents only a rudimentary synopsis of this tutorial. Please watch the video for details.

Features of a custom "stateless" component

• A custom component is a re-usable React Native JavaScript module.
• Each custom component usually has its own JavaScript file, with the same name as the component but ending in .js.
• A stateless component is the simplest kind--not a full class, but just a normal function. It should work as long as you don't need to keep track of changing data.
• The component returns JSX that will be embedded in any parent component (such as App.js) when you add this component in the form of a JSX tag.
• ⚠️ You must export the component for use by other components.

Making a simple Card component

Let's make a reusable block of text, commonly known in mobile design as a "card."

• First create a new JavaScript file called Card.js in the same folder as App.js.
• Then add four parts:
• import statements for all the subcomponents you'll need.
• A function that returns the JSX you want visible for every card.
• An export statement to make your custom Card available to other components, notably App.js.

Any styles specific to the Card.

// Import stuff.
import React from "react" ;
import { Text, StyleSheet } from "react-native" ;

// Write a function to return your component's contents.
const Card = () => {
	return (
		<Text style={styles.welcome}>Welcome to my app!</Text>
	);
} ;

// Export the component.
export default Card ;

// Style the component.
StyleSheet.create({
	welcome: {
		fontSize: 20
	}
}) ;

		

Adding Cards to your app

• In App.js, everywhere you want the card to appear, add a reference to this component by writing its name as a JSX tag.

export default function App() {
	return (
	    <View>
	        <Card />
		</View>
	)
}
	

Reloading custom components

• ⚠️ In a Snack, your edits to App.js should appear instantly on your phone. But when you modify a child component, even if the Expo app says "refreshing," you may need to shake and refresh your Expo to see the results on your phone.