Wednesday, 22 January 2020
NativeBase Fab
import React, { Component } from 'react';
import { Image } from 'react-native';
import {
Container, Header, Title, Content, Footer,
FooterTab, Button, Left, Right, Body, Icon, Text,
Accordion, Card, CardItem, Thumbnail, ListItem,
CheckBox, DatePicker, DeckSwiper, View, Fab,
} from 'native-base';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
active: false
};
}
render() {
return (
<Container>
<Header>
<Body>
<Title>FAB</Title>
</Body>
</Header>
<View style={{ flex: 1 }}>
<Fab
active={this.state.active}
direction="up"
containerStyle={{}}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight"
onPress={() => this.setState({ active: !this.state.active })}>
<Icon name="share" />
<Button style={{ backgroundColor: '#34A34F' }}>
<Icon name="logo-whatsapp" />
</Button>
<Button style={{ backgroundColor: '#3B5998' }}>
<Icon name="logo-facebook" />
</Button>
<Button disabled style={{ backgroundColor: '#DD5144' }}>
<Icon name="mail" />
</Button>
</Fab>
</View>
</Container>
);
}
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment