Icons on customized plus

[AllAheadFull]

Great repo. Loved the article on Medium. Question - can't seem to find where you state the three icons above the "Plus" button. I am getting simple circles (which I can change the color of!). Any help appreciated. Thanks!

[Daanchaam]

If you change the multibar to also pass an image, and read this prop type in AddButton.js it works. the multibar would become this:

MultiBar: {
        screen: () => null,
        navigationOptions: () => ({
            tabBarIcon: (
                <AddButton
                    routes={[
                        {
                            routeName: Routes.OtherScreen,
                            color: 'red'
                            image: require( '../route/to/image')
                        },
                        {
                            routeName: Routes.OtherScreen,
                            color: 'green',
                            image: require( '../route/to/image')
                        },
                        {
                            routeName: Routes.OtherScreen,
                            color: 'blue'
                            image: require( '../route/to/image')
                        },
                    ]}
                />
            )
        }),
        params: {
            navigationDisabled: true
        }
    },

And your AddButton.js would change it's propTypes like this:

AddButton.propTypes = {
    routes: PropTypes.arrayOf(PropTypes.shape({
        routeName: PropTypes.string,
        color: PropTypes.string,
        image: PropTypes.string
    }))
};

Now you've imported the image per route, you still need to add it to each sub button like this:

return (
                <Animated.View
                    key={`action_${i}`}
                    style={[Styles.actionContainer, {
                        marginLeft: -ACTION_SIZE / 2,
                        left: activationPositionX,
                        bottom: activationPositionY,
                        transform: [
                            { scale: activationScale }
                        ]
                    }]}
                >
                    <TouchableOpacity
                        style={[Styles.actionContent, {
                            backgroundColor: route.color,
                        }]}
                        onPress={() => this.actionPressed(route)}
                    >
                        <Image style={Styles.icon} source={route.image} />
                    </TouchableOpacity>
                </Animated.View>
            );

All that's left now is change the styling and then it should work! My Styles.Icon looks as follows and works fine:

icon: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'contain'
    }

Note: You have to require the image in the routing file because react does not support dynamic image loading. Still, loading it in as a proptype string works just fine, but might cause issues if react ever decides to overhaul their dynamic image decisions.

[Daanchaam]

This one is actually fixed in the latest version with an easier implementation