react-native-wheel-of-fortune icon indicating copy to clipboard operation
react-native-wheel-of-fortune copied to clipboard

How to put Image vertical with Text value in wheel

Open Cskian opened this issue 4 years ago • 5 comments

image

I pass below array in rewards property

const participants = [ '%10', '%20', '%30', '%40', '%50', '%60', '%70', '%90', 'FREE', ];

And How to remove center red Small Circle?

Cskian avatar May 06 '21 03:05 Cskian

In Wheel Circle we can put value in array and passed in rewards property. but I need to set Image vertical also with string value. How can I set image with text?

image

red Circle type view I need how can I do that

@eftalyurtseven Eftal Yurtseven please help to short out that issue

Thanks In advance

Cskian avatar May 06 '21 03:05 Cskian

Hi @Cskian, I need to pass the image with rewards too. Please, do you have any code snippet how are you passing this to the wheel? Thanks.

bouchja1 avatar Sep 08 '21 08:09 bouchja1

@bouchja1 hi, did you manage to find a solution ? Thanks

kukuandroid avatar Sep 21 '21 07:09 kukuandroid

@bouchja1 hi, did you manage to find a solution ? Thanks

You go to link https://github.com/suusofttruongnv/react-native-wheel-of-fortune.git next move into src/.. directory on git and update index.js file, create new imageReward.js file in your source code

like the image below:

image

How to use:

const iconRewards = [
    require('./assets/images/knoob.png'),
    require('./assets/images/knoob.png'),
    .....
]

const wheelOptions = {
      rewards: participants,
      knobSize: 50,
      borderWidth: 5,
      borderColor: '#000',
      innerRadius: 50,
      duration: 4000,
      backgroundColor: 'transparent',
      textAngle: 'horizontal',
      knobSource: require('./assets/images/knoob.png'),
      typeRewards: typeRewards,
      sizeIconReward: 40,
      iconRewards: iconRewards,
      getWinner: (value, index) => {
        this.setState({winnerValue: value, winnerIndex: index});
      },
      onRef: ref => (this.child = ref),
    };

suusofttruongnv avatar Oct 13 '21 04:10 suusofttruongnv

@bouchja1 hi, did you manage to find a solution ? Thanks

You go to link https://github.com/suusofttruongnv/react-native-wheel-of-fortune.git next move into src/.. directory on git and update index.js file, create new imageReward.js file in your source code

like the image below:

image

How to use:

const iconRewards = [
    require('./assets/images/knoob.png'),
    require('./assets/images/knoob.png'),
    .....
]

const wheelOptions = {
      rewards: participants,
      knobSize: 50,
      borderWidth: 5,
      borderColor: '#000',
      innerRadius: 50,
      duration: 4000,
      backgroundColor: 'transparent',
      textAngle: 'horizontal',
      knobSource: require('./assets/images/knoob.png'),
      typeRewards: typeRewards,
      sizeIconReward: 40,
      iconRewards: iconRewards,
      getWinner: (value, index) => {
        this.setState({winnerValue: value, winnerIndex: index});
      },
      onRef: ref => (this.child = ref),
    };

This is very helpful !!!!!

ItxAltaf avatar Jan 05 '22 10:01 ItxAltaf