Props
Los props (abreviatura de "properties") te permiten personalizar un componente desde afuera — como llenar los campos de un formulario. Pásale distintos props al mismo componente para que muestre cosas diferentes.
<Text style={styles.title}>¡Hola!</Text>
<Image source={{ uri: "https://example.com/photo.jpg" }} />
Cómo leer los props
Un componente recibe todos sus props como un solo objeto. Usa desestructuración para un código más limpio:
function Badge({ label, color }: { label: string; color: string }) {
return (
<View style={{ backgroundColor: color, borderRadius: 12, padding: 8 }}>
<Text style={{ color: "white" }}>{label}</Text>
</View>
);
}
// Uso
<Badge label="Nuevo" color="#3b82f6" />;
Props integrados comunes
Los componentes de React Native aceptan muchos props de fábrica:
| Componente | Props principales |
|---|---|
<Text> | style, numberOfLines |
<View> | style |
<Image> | source, style, resizeMode |
<TextInput> | value, onChangeText, placeholder |
Reglas para recordar
- Los props son de solo lectura — un componente nunca debe modificar sus propios props.
- Los datos fluyen en una sola dirección: del padre al hijo.
- Usa estado (no props) para valores que cambian con el tiempo.
Intenta esto: Crea un componente
Greetingque reciba un propnamey muestre "¡Hola, !".
Ve este concepto en acción con resaltado interactivo de código
Probar en el Playground