codypearce / material-bread

Cross Platform React Native Material Design Components
https://material-bread.org/
MIT License
323 stars 118 forks source link

FAB Not displayed on IOS #363

Open firtacosmin opened 4 years ago

firtacosmin commented 4 years ago

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

codypearce commented 4 years ago

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

image

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

JakeHadley commented 4 years ago

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 commented 4 years ago

Interesting

adding a fab to an empty component

So it's just the , no other components?

JakeHadley commented 4 years ago

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

JakeHadley commented 4 years ago

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