Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FAB Not displayed on IOS

See original GitHub issue

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):

OS: IOS
Version 0.2.5

Smartphone (please complete the following information):

Device: IPhone 11 simulator
OS: IOS 13

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

JakeHadleycommented, Feb 2, 2020

Here’s a testRepo. Pretty boring, but shows what I’m seeing at least: https://github.com/JakeHadley/fabTest. Installed material-bread, vector icons, rn-svg, and did pod install, ran with npx react-native run-ios with the default sim that pops up. Let me know if you need more details.

Simulator Screen Shot - iPhone 11 - 2020-02-02 at 15 07 53