floating action button on react native
Check out this component, I think it does exactly what you're looking for: https://github.com/mastermoo/react-native-action-button
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
alignItems: 'center',
justifyContent: 'center',
width: 70,
position: 'absolute',
bottom: 10,
right: 10,
height: 70,
backgroundColor: '#fff',
borderRadius: 100,
}}
>
<Icon name='plus' size={30} color='#01a699' />
</TouchableOpacity>
Install Icon Packs: https://github.com/oblador/react-native-vector-icons
npm install react-native-vector-icons --save
react-native link
Adjust your button with bottom, Left, Right, Top and provide absolute position to button.
This is my code that used to made floating button
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,