Componentes estilizados con react-native-paper

¿Qué es `react-native-paper`?

react-native-paper es una biblioteca que proporciona componentes preconstruidos y accesibles para React Native, siguiendo las guías de diseño de Material Design. Algunos de los componentes que incluye son botones, tarjetas, listas y mucho más.

¿Por qué usar `react-native-paper`?

Consistencia: Garantiza que tu aplicación tenga un diseño limpio y profesional.
Accesibilidad: Sus componentes están optimizados para ser inclusivos y accesibles.
Facilidad de uso: Los componentes vienen con estilos predeterminados que puedes personalizar fácilmente.

¿Qué es `react-native-safe-area-context`?

En dispositivos con bordes o recortes (como el notch en algunos teléfonos), es importante respetar las áreas seguras para evitar que el contenido quede oculto. react-native-safe-area-context ayuda a manejar estas áreas correctamente, asegurando que tu diseño sea responsive y compatible con cualquier dispositivo.

Configuración inicial

Sigue estos pasos para configurar react-native-paper en tu proyecto:

Instala react-native-paper:
```
npm install react-native-paper
```

Instala react-native-safe-area-context:

npm install react-native-safe-area-context

Consulta la documentación oficial para más información.

Implementación en `App.tsx`

A continuación, un ejemplo básico que muestra cómo integrar ambas bibliotecas:

import { PaperProvider } from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { HelloWorld } from './src/presentation/screen/HelloWord';

import React from 'react';

export const App = () => {
  return (
    <SafeAreaProvider>
      <PaperProvider>
        <HelloWorld />
      </PaperProvider>
    </SafeAreaProvider>
  );
};

SafeAreaProvider: Asegura que los componentes respeten las áreas seguras.
PaperProvider: Es el contexto global necesario para usar los componentes de react-native-paper.

Implementación en `HelloWorld`

Un componente simple que utiliza los estilos básicos de React Native:

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

export const HelloWorld = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5', justifyContent: 'center', alignItems: 'center' }}>
      <Text>¡Hola mundo!</Text>
    </View>
  );
};

Este ejemplo respeta los principios básicos de diseño, asegurando una experiencia visual coherente.

Resultado esperado

Al ejecutar tu proyecto, deberías ver un texto “¡Hola mundo!” centrado en una pantalla con un fondo neutro. Desde aquí, puedes comenzar a personalizar y construir tu aplicación móvil utilizando react-native-paper.

Componentes estilizados con react-native-paper

¿Qué es react-native-paper?

¿Por qué usar react-native-paper?

¿Qué es react-native-safe-area-context?