The first building-block topic area starts with the most fundamental thing: HOW to correctly import React Native's built-in components as well as your own, hand-written components.

1. Description

React Native itself ships its built-in components (View, Text, Button, ...) through the react-native package. Your own components get imported via a relative file path. Both cases use the same JavaScript import syntax, but differ in named vs. default exports.

2. Short example

// Built-in components: named imports, curly braces
import { View, Text, Button } from 'react-native';

// Your own component: default import, no curly braces
import Greeting from './components/Greeting';

3. Complete project

npx create-expo-app component-import-demo
cd component-import-demo

import { Text } from 'react-native';

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

export default Greeting;

import { View, StyleSheet } from 'react-native';
import Greeting from './components/Greeting';

export default function App() {
  return (
    <View style={styles.container}>
      <Greeting name="Anna" />
      <Greeting name="Ben" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

4. Explanation

• import {{ View, Text, Button }} from 'react-native' – named import: the package exports several named building blocks at once, you pick exactly the ones you need.
• export default Greeting; – marks Greeting as this file's ONE main export; when importing it you're even allowed to give it a different local name, e.g. import Hello from './components/Greeting'.
• ./components/Greeting – the leading dot means "relative to the current folder"; the .js/.jsx file extension is omitted on import.

5. Outputs