Cómo crear tu primer componente en React Native paso a paso

---

npx create-expo-app@latest PrimerComponente --template blank
cd PrimerComponente
npx expo start

PrimerComponente/
├── App.js
├── babel.config.js
├── package.json
├── node_modules/
└── assets/
  ├── favicon.png
  ├── icon.png
  ├── splash.png
  └── adaptive-icon.png

PrimerComponente/
└── components/
  └── MiPrimerComponente.jsx

import React from 'react'; // importamos React
// importa los componentes necesarios
import { View, Text, StyleSheet } from 'react-native';

// Este es un componente funcional llamado MiPrimerComponente
const MiPrimerComponente = () => {
// Aquí puedes definir la lógica y el estado del componente

// El componente retorna un View que contiene un Text
return (
  // View actúa como un contenedor tipo div en React Native
  <View style={styles.contenedor}>
    <Text style={styles.texto}>¡Hola mundo! desde mi primer componente.</Text>
  </View>
);
};

// Aquí defines los estilos CSS para tu componente
const styles = StyleSheet.create({
  contenedor: {
    flex: 1, // ocupa todo el espacio disponible
    justifyContent: 'center', // centra verticalmente
    alignItems: 'center',     // centra horizontalmente
    padding: 20,
    backgroundColor: '#f8f9fa', // gris más claro
    borderRadius: 10,
    margin: 10,
  },
  texto: {
    fontSize: 18,
    color: '#333',
    textAlign: 'center',
  },
});

// Exportamos el componente para usarlo en App.js
export default MiPrimerComponente;

import React from 'react';
import { SafeAreaView } from 'react-native';
import MiPrimerComponente from './components/MiPrimerComponente';

export default function App() {
return (
  <SafeAreaView>
    <MiPrimerComponente />
  </SafeAreaView>
);
}

npx expo start