Didn't work for me, nothing rendered on the screen!

[hack-and-backslash]

I was looking for such a thing since a week now and found this one. Unfortunately, it doesn't work for me. Neither does it throw any errors or log anything to the console.

Using:
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-confetti-cannon": "^1.0.2",

[VincentCATILLON]

Hey @hack-and-backslash sorry for the response delay.

I'll spend time to understand why it doesn't work on your own app.

Can you copy past the component using this lib ?

Mine is:

import * as React from 'react';
import {View, StyleSheet} from 'react-native';
import ConfettiCannon from 'react-native-confetti-cannon';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const MyScreen = () => (
  <View style={styles.container}>
    <ConfettiCannon count={200} origin={{x: -10, y: 0}} />
  </View>
);

[hack-and-backslash]

I am doing the same thing. Nothing gets rendered on screen for me.

Here's my class:

export default class App extends Component {
render() {
return (

<ConfettiCannon count={200} origin={{ x: -10, y: 0 }} />

);
}
}

[VincentCATILLON]

Ok i'll see it ASAP.

Are you sure that you have a View wrapping the ConfettiCannon component with a height and width stuck to your window edges ?

Edit: my comment above has been updated to explicit the flex: 1 style for the container. Confirme me that you have the same integration please.

[Tracklous]

In ios, it is working fine but in android its show nothing. I guess fragment is causing some problem to render any confetti.

[VincentCATILLON]

Hi @Tracklous & @hack-and-backslash i'm reproducing your issue locally.
With 0.59, there is no issue with Android.

I'm looking to fix this ASAP and release a patch for this and back to you.

Don't know if it's related to this fix (in 0.59): facebook/react-native#18872

[VincentCATILLON]

Ok guys, I identified the root cause.

In debug mode, it's working, but not without debug mode. It seems that it's related to facebook/react-native#18426

I'll find a workaround or change the code to fix this. Stay tuned

[VincentCATILLON]

@hack-and-backslash @Tracklous a new version was published (1.1.2).
Please upgrade your lib and tell me if it's fixed on your project :)

yarn upgrade react-native-confetti-cannon@^1.1.2

[Tracklous]

Hi! @VincentCATILLON ,

It is running on Android now, but after the little fix " Array(count).fill(count).map(...." I've to give the args to the fill() function so I just passed the count in it. But there are also some performance issues whenever I put the count to greater than 70-80 confetti's then it performs the animation in <60 FPS.

Anyways thanx for the quick response.

[VincentCATILLON]

Yes, i think it depends on device CPU. We could use useNativeDriver for best performances but some transformations properties are not supported yet for this: top, left and rotateZ.

The solution could be to make it natively and expose it to JS through RN bridge.

[VincentCATILLON]

I'm closing the issue if it's right for you so :) Have a great day

[hack-and-backslash]

@hack-and-backslash @Tracklous a new version was published (1.1.2).
Please upgrade your lib and tell me if it's fixed on your project :)

yarn upgrade react-native-confetti-cannon@^1.1.2

Eveything seems fine now. Thanks.

[jhoanborges]

Same issue. I'm using react-native-confetti-cannon@^1.1.2 and React native 0.59.10