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 estan 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 parametros)
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 <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