FABs | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
3.4.x
🎉 Prompt to React Native UI
→
Search
⌘
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
FABs
Migrating to v3 will provide a lot more design, size, color and customisation option.
Overview
Migrating Fab components can broadly described in these points:
Instead of Passing Icon as child, use icon prop.
Code Comparison
v2
v3
Copy
import React, { Component } from "react";
import { Container, Header, View, Icon, Fab } from "native-base";
export default function () {
return (
<Container>
<Header />
<View style={{ flex: 1 }}>
<Fab
direction="up"
style={{ backgroundColor: "#5067FF" }}
position="bottomRight"
>
<Icon name="share" />
</Fab>
</View>
</Container>
);
}
Nativebase logo
MadeWithNativeBase
Gluestack logo
gluestack-ui