Describe the bug
I want to display a FAB on IOS app in React Native.
To Reproduce
My react component looks like this:
export default class MapScreen extends Component { render() { return ( <View style={{ justifyContent: "center", width: DEVICE_WIDTH, height: DEVICE_HEIGHT }}> <View style={{flexDirection: 'row', flexWrap: 'wrap', width: 200, height: 200, backgroundColor:"#ff0000"}}> <Fab icon={'add'} /> <Fab backgroundColor={'#E91E63'} icon={'archive'} /> <Fab backgroundColor={'#F44336'} icon={'delete'} /> <Fab backgroundColor={'#009688'} icon={'edit'} /> <Fab backgroundColor={'black'} icon={'attach-money'} /> <Fab disabled backgroundColor={'#009688'} icon={'delete'} /> </View> </View> ); } } const DEVICE_WIDTH = Dimensions.get('window').width; const DEVICE_HEIGHT = Dimensions.get('window').height;
Expected behavior
On Android I get this:
Andorid Screenshot
And on IOS i get this:
IOS Screenshot
Screenshots
Andorid Screenshot
IOS Screenshot
Desktop (please complete the following information):
Smartphone (please complete the following information):
- Device: IPhone 11 simulator
- OS: IOS 13
Describe the bug
I want to display a FAB on IOS app in React Native.
To Reproduce
My react component looks like this:
export default class MapScreen extends Component { render() { return ( <View style={{ justifyContent: "center", width: DEVICE_WIDTH, height: DEVICE_HEIGHT }}> <View style={{flexDirection: 'row', flexWrap: 'wrap', width: 200, height: 200, backgroundColor:"#ff0000"}}> <Fab icon={'add'} /> <Fab backgroundColor={'#E91E63'} icon={'archive'} /> <Fab backgroundColor={'#F44336'} icon={'delete'} /> <Fab backgroundColor={'#009688'} icon={'edit'} /> <Fab backgroundColor={'black'} icon={'attach-money'} /> <Fab disabled backgroundColor={'#009688'} icon={'delete'} /> </View> </View> ); } } const DEVICE_WIDTH = Dimensions.get('window').width; const DEVICE_HEIGHT = Dimensions.get('window').height;Expected behavior
On Android I get this:
Andorid Screenshot
And on IOS i get this:
IOS Screenshot
Screenshots
Andorid Screenshot
IOS Screenshot
Desktop (please complete the following information):
Smartphone (please complete the following information):