Skip to main content
5 de 5
Errores de ortografías

Pasar imagen como parámetro a un componente en react-native

Tengo un problema y no hay mucha información sobre esto

Quiero hacer esto, crear un componente que cuando le pases tu nombre y una path de un avatar este dispare una contact bar mostrando el nombre y el avatar al lado todo como una caja

archivo: assetObjects.js (Donde están las paths a los avatars)

const avatarPaths = {
  naruto: require('../../assets/avatars/NarutoSmall.png'),
  hinata: require('../../assets/avatars/HinataSmall.png'),
  susuke: require('../../assets/avatars/SasukeSmall.png'),
  sakura: require('../../assets/avatars/SakuraSmall.png'),
  kakashi: require('../../assets/avatars/KakashiSmall.png'),
  tsunade: require('../../assets/avatars/TsunadeSmall.png'),
};

export default avatarPaths;

archivo ContactBar.js (Componente, el problema con los parámetros)

import React from 'react';
import {Alert, Pressable, View, Image, Text} from 'react-native';
import avatarPaths from '../../assets/assetObjects/assetObjects';
//import {avatarPaths} from '../../assets/assetObjects/assetObjects';

//const assets = require('../../assets/assetObjects/assetObjects.js');

const ContactBar = props => {
  return (
    <View>
      <Image style={{height: 2, width: 3}} source={props.path)} />
      <Text>{props.name}</Text>
      <Pressable onPress={() => Alert.alert('unhide')}>
        <Image source={require('../../assets/icons/bx-hide.png')} />
      </Pressable>
    </View>
  );
};

export default ContactBar;

archivo Dashboard.js (Componente de pantalla dashboard que manipula la ContactBar)

import React from 'react';
import {SafeAreaView, View} from 'react-native'; //si no lo hago con View en vez de SafeAreaView, me tirar error de renderizado
import BarTitleButton from '../../components/BarTitleButton/BarTitleButton';
import ScreenHeader from '../../components/ScreenHeader/ScreenHeader'; //Si lo pongo llaves no renderiza
import {primaryBackground, logo2} from '../commonsStyles/Styles';
import {dashboardBox, dashboardBackBox} from './Styles'; //si lo pongo sin llaves no renderiza la box
import avatarPaths from '../../assets/assetObjects/assetObjects';
import {ContactBar} from '../../components/ContactBar/ContactBar';

const Dashboard = () => {
  return (
    <SafeAreaView style={primaryBackground}>
      <ScreenHeader style={logo2} />
      <View style={dashboardBackBox} />
      <View style={dashboardBox}>
        <BarTitleButton title="Contacts" titleBtn="+" />
        <View>
          <ContactBar name="Seba" path={avatarPaths.naruto} />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Dashboard;

Me tira error de renderizado con el require Si en vez de hacer esto:

<ContactBar name="Seba" path={avatarPaths.naruto} />

hago <Image source={avatarPaths.naruto} /> en la dashboard funciona. Pero no me sirve, porque quiero poder estandarizarlo como un componente nombre+avatar+icon-hide