Export individual components

[mrousavy]

Hi! I really like the library, looks very friendly!

I'd like to implement a "Create your Avatar" screen, similar to the one Snapchat (BitMoji) has. The user can scroll through available parts, and pick the ones that he wants. Unfortunately, the individual components (hairstyles, shirts, etc) are only exported in maps, and I'm not sure how I could render them in a FlatList/ScrollView.

I've tried the following:

const mouths = Object.keys(mouthsMap) as (keyof typeof mouthsMap)[];

function SomeComponentFromMyApp(props) {
    // ...
    const renderMouth = useCallback(({ item: mouthType }: ListRenderItemInfo<keyof typeof mouthsMap>): React.ReactElement | null => {
        const Comp = mouthsMap[mouthType];
        return <Comp />;
    }, []);
    // ...

    return <FlatList data={mouths} renderItem={renderMouth} />;
}

But that just renders nothing. I assume I have to wrap the <Comp/> inside some parent View, such as a <View> or <Svg>, since the Mouth renderer actually returns a Fragment of Svg components. Could you point me in the right direction on how I could render those correctly?

Thanks!

[felipecespedes]

You need to wrap the component inside a <View> and a <Svg>
Something like this will work:

// imports
import { mouthsMap } from 'react-native-bigheads';
import { Svg } from 'react-native-svg';

// render
<View style={{ width: 500, height: 500 }}>
  <Svg viewBox="0 0 1000 990">
    <mouthsMap.lips lipColor="green" />
  </Svg>
</View>

Remember that some components receive their own properties, unfortunately that is not documented.

[felipecespedes]

I like the idea of exporting individual components in a better and friendly way, so I'm going to keep this issue open.

[loangodard]

Hi, i'm also trying to get all components one by one to create an avatar customizer...

I'm in trouble because this is working

<View style={caracStyle}> <Svg viewBox="0 0 1000 990"> {React.createElement(accessoryMap[type], null)} </Svg> </View>

But for some other components like hairMap or bodyMap, it is not working
javascript <View style={caracStyle}> <Svg viewBox="0 0 1000 990"> <hairMap.bun hairColor={"blonde"}/> </Svg> </View>

Many thanks for this nice project !

[pierroo]

Here as well, I might be late to the party, but did anyone find a solution to have those separated components? @loangodard @felipecespedes ?