iOS | Android |
---|---|
npm install --save react-native-touchable-action
or
yarn add react-native-touchable-action
For a list of IconSources and iconNames, please refer to https://icons.expo.fyi
To position your floating action, use the React Native style prop
import FloatingActionButton from 'react-native-touchable-action';
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position='absolute',
bottom=75,
right=50,
}}
/>
type: String
IconSource='Ionicons'
type: String
iconName='rocket'
type: Object({Function})
onPress={() => {
console.log('You pressed the rocket button');
}
type: String - Default: #480ca8
buttonColor='#0F044C'
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
/>
type: String - Default: #6a4c93
ButtonColor | ButtonColorPressed |
buttonColorPressed='#693C72'
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
/>
type: Object({Number}) - Default: 65
Button Size 75 | Button Size 55 |
buttonSize={75}
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
buttonSize={75}
/>
type: Object({Number}) - Default: 40
Icon Size 50 | Icon Size 35 |
iconSize={35}
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
buttonSize={75}
iconSize={35}
/>
type: String - Default: #edf6f9
iconColor='#edf6f9'
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
buttonSize={75}
iconSize={35}
iconColor='#edf6f9'
/>
type: String - Default: #e2eafc
Icon color | Icon Color Pressed |
iconColorPressed='#c9ccd5'
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
buttonSize={75}
iconSize={35}
iconColor='#edf6f9'
iconColorPressed='#c9ccd5'
/>
type: Object({Boolean}) - Default: false
Shaded | Not Shaded |
shaded={true}
<FloatingActionButton
IconSource='Ionicons'
iconName='rocket'
onPress={() => {
console.log('You pressed the rocket button');
}}
style={{
position: 'absolute',
bottom: 75,
right: 50,
}}
buttonColor='#0F044C'
buttonColorPressed='#693C72'
buttonSize={75}
iconSize={35}
iconColor='#edf6f9'
iconColorPressed='#c9ccd5'
shaded={true}
/>
React Native Floating Action Button is under the MIT License. See bundled LICENSE file for details.