FAB Not displayed on IOS

[firtacosmin]

trafficstars

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

[codypearce]

I'm having trouble reproducing this, I copied your component and put it into a storybook story on an Iphone 11 Pro Max simulator running IOS 13 and this is what I get

Maybe it has something to do with React Native Vector Icons, are they linked properly?

[JakeHadley]

I'm also having this issue currently actually. The thing I can say about this is I had an app that had the Fab working with material-bread version ^0.2.3, and I'm using v^0.2.5 with a new app and having issues.

I just installed 2.3 on my current app and had the same behavior with the fab or speed dial not showing up. Not sure what's going on here. I know I have React Native Vector Icons installed correctly because I have used the icons. I tried super plain fab rendering, no go.

On a side note, I did some messing around with it, and adding a fab to an empty component makes it look like it's not showing up, because it doesn't visually add anything to the screen, but it does take up space. I had a view with a border, and testing with and without a Fab item, the height of the View increased with the Fab and decreased without it. So it's definitely there, just can't get it to show up.

[codypearce]

Interesting

adding a fab to an empty component

So it's just the <Fab />, no other components?

[JakeHadley]

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.

[JakeHadley]

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