Lost with icons - react-native

Question

I am trying to add a floating action button with multiple options. When I try to change the icon for the actionbuton item the icon is not found and a question mark is displayed.
I imported the Ionicons so I am checking in that list what buttons to add. I need a plus with outline which is this one here : add-circle-outline
But when I use that instead of md-create it is not found, which is strange since md-create is found and thus displayed . When I search for md-create in ionicons it is not found, so it must come from another library.
I think it is obvious that I am lost here. I read about extra installatin steps for icons as a custom font, but I am guessing this is not required, since md-create is working properly.
This is my page:
/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
export class Main extends Component {
render() {
return (
<View style={styles.container}>
<View style={{alignItems: 'center'}}>
<Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
This is the main page, return to registration
</Text>
<View style={{height:5}}></View>
</View>
<View style={styles.FABContainer}>
<ActionButton buttonColor="#c5e1a5">
<ActionButton.Item
style={styles.actionButtonItem}
buttonColor= '#c5e1a5'
title="Add a thing"
onPress={() => console.log("notes tapped!")}
>
<Icon name="md-create" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
</View>
)
}
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'black',
inactiveBackgroundColor: '#c5e1a5',
inactiveTintColor: 'gray',
labelStyle: {fontSize: 14},
style:
{
backgroundColor: '#c5e1a5',
borderTopColor: 'transparent',
padding: 0,
activeTabStyle: {
fontWeight: 'bold',
}
},
tabStyle: {
borderRightColor: 'white',
borderRightWidth: 1,
}
}}>
<Tab.Screen name="Main" component={Main} />
<Tab.Screen name="Scan" component={Scan} />
<Tab.Screen name="Wallet" component={Wallet} />
<Tab.Screen name="Kowops" component={Kowops} />
</Tab.Navigator>
);
}
export default function BottomNav() {
return (
<MyTabs />
);
}
const styles = StyleSheet.create({
container: {
flex: 2,
backgroundColor:'#ffffff',
padding: 10,
alignItems: 'stretch',
justifyContent: 'space-around'
},
logoContainer: {
height: 120,
padding: 10,
alignItems: 'center' ,
justifyContent: 'flex-end'
},
logo: {
height: 50,
width: 165
},
formContainer: {
flex:1,
alignItems: 'center' ,
justifyContent: 'center'
},
buttonContainer: {
padding: 10,
marginBottom: 20,
width: 250,
alignItems: 'center',
backgroundColor: '#c5e1a5'
},
inputTextField: {
alignItems: 'center',
justifyContent: 'space-between',
padding: 10,
height: 40,
width: 250,
marginBottom: 10,
fontSize: 16,
borderBottomWidth : 1.0,
},
plainText: {
fontSize: 16,
marginBottom: 5,
color: '#59616e',
textDecorationLine: 'underline',
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
FABCcontainer: {
height: 22,
},
actionButtonItem: {
},
});
And. the only thing I want to do is change md-create in a plus with outline.
Can anyone help me out?
Thanks a lot!
I also tried to use add-circle-outline from [this icons list][2], but also that didn't work.

Answer 1

The problem in your case is, that you try to use Ionicons v5 wich is not yet implemented in Vector-Icons Icons-Set. If you need to choose an Icon please refer to v4 - https://ionicons.com/v4/
Here you can see the icons that you can use.
md-iconname for android type icons and ios-iconname for apple icons.