It’s ok, but where is pus button?

Keep calm… To make a plus button, you need to build a component with needed content. In our example, we need to have a big button with a plus icon and three hidden buttons with icons.

Tab bar with the plus button

In the gif located at the top, we can see smooth animation with special effect, I don’t know yet, how to reproduce effect but, don’t accent mind now on it. So in details, to get the plus button in the tab bar you need:

Create empty component representing screen for this tab, it’s required by the tab bar component and component which will be used as the plus button.

Likes: {

screen: Likes,

navigationOptions: () => ({

tabBarIcon: ({tintColor}) => (

<Icon

name="heart"

color={tintColor}

size={24}

/>

)

})

},

// Our plus button

Adding: {

screen: () => null, // Empty screen

navigationOptions: () => ({

tabBarIcon: <AddButton /> // Plus button component

})

},

Private: {

screen: Private,

navigationOptions: () => ({

tabBarIcon: ({tintColor}) => (

<Icon

name="lock"

color={tintColor}

size={24}

/>

)

})

},

After that, you can do what you want in the component which you created. In my example you can see very raw animation but, I will improve it in the next article.

import React, {Component} from 'react';

import {Animated, TouchableHighlight, View} from "react-native";

import Icon from '@expo/vector-icons/FontAwesome'; const SIZE = 80; class AddButton extends Component {

mode = new Animated.Value(0); toggleView = () => {

Animated.timing(this.mode, {

toValue: this.mode._value === 0 ? 1 : 0,

duration: 300

}).start();

}; render() {

const firstX = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [20, -40]

});

const firstY = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [0, -30]

});

const secondX = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [20, 20]

});

const secondY = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [0, -55]

});

const thirdX = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [20, 80]

});

const thirdY = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [0, -30]

}); const opacity = this.mode.interpolate({

inputRange: [0, 1],

outputRange: [0, 1]

}); const rotation = this.mode.interpolate({

inputRange: [0, 1],

outputRange: ['0deg', '45deg']

}); return (

<View style={{

position: 'absolute',

alignItems: 'center'

}}>

<Animated.View style={{

position: 'absolute',

left: firstX,

top: firstY,

opacity

}}>

<TouchableHighlight

onPress={() => {

}}

style={{

alignItems: 'center',

justifyContent: 'center',

width: SIZE / 2,

height: SIZE / 2,

borderRadius: SIZE / 4,

backgroundColor: '#48A2F8'

}}

>

<Icon name="rocket" size={16} color="#F8F8F8"/>

</TouchableHighlight>

</Animated.View>

<Animated.View style={{

position: 'absolute',

left: secondX,

top: secondY,

opacity

}}>

<TouchableHighlight

onPress={() => {

}}

style={{

position: 'absolute',

alignItems: 'center',

justifyContent: 'center',

width: SIZE / 2,

height: SIZE / 2,

borderRadius: SIZE / 4,

backgroundColor: '#48A2F8'

}}

>

<Icon name="home" size={16} color="#F8F8F8"/>

</TouchableHighlight>

</Animated.View>

<Animated.View style={{

position: 'absolute',

left: thirdX,

top: thirdY,

opacity

}}>

<TouchableHighlight

onPress={() => {

}}

style={{

position: 'absolute',

alignItems: 'center',

justifyContent: 'center',

width: SIZE / 2,

height: SIZE / 2,

borderRadius: SIZE / 4,

backgroundColor: '#48A2F8'

}}

>

<Icon name="archive" size={16} color="#F8F8F8"/>

</TouchableHighlight>

</Animated.View> <TouchableHighlight

onPress={this.toggleView}

underlayColor="#2882D8"

style={{

alignItems: 'center',

justifyContent: 'center',

width: SIZE,

height: SIZE,

borderRadius: SIZE / 2,

backgroundColor: '#48A2F8'

}}

>

<Animated.View style={{

transform: [

{rotate: rotation}

]

}}>

<Icon name="plus" size={24} color="#F8F8F8"/>

</Animated.View>

</TouchableHighlight>

</View>

);

}

} export {AddButton};

And we got not bad animation but we improve it.