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:open
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

JakeHadleycommented, Feb 2, 2020

Here’s a testRepo. Pretty boring, but shows what I’m seeing at least: 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

JakeHadleycommented, Aug 4, 2020

@codypearce Coming back to this, I’m still seeing this issue. Super basic setup as before. iOS simulator, RN 62. Latest on Material-bread

Read more comments on GitHub >

github_iconTop Results From Across the Web

ios - View of floating action button not appearing when device ...
So the floating action button works, and a clear view that holds a few buttons appears. The problem is that when the orientation...
Read more >
FAB button not showing properly on iPhone - Ionic Forum
Hi, I am trying to add a FAB button to a view, but it does not show as I expect it, when running...
Read more >
Ion-fab show behind the toolbar · Issue #16780 - GitHub
If I understand this issue correctly, it seems like the contain: layout style, while it was in the Ionic code, likely was never...
Read more >
Is the Floating Action Button going away - UX Stack Exchange
The Floating button is fairly new and not used much on desktops at all ... Hence, it's still visible on launch in phones...
Read more >
ons-fab - Onsen UI
By default the <ons-fab> will be rendered in both iOS and Android. However, in most cases it should not be displayed in iOS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found