eftalyurtseven / react-native-wheel-of-fortune Goto Github PK

Curve, Edge, and Text of wheel is broken, do anyone got any solution for these ??

Hi there, after install the latest update (1.5.4). I don't think there is anyway to assign onRef with React Native hooks. useRef cannot assign onRef with function type (Since useRef is read only).

*Is there any plan to migrated to React hooks so far?

How to add Outer and Inner wheel. I don't see any options to add child wheel and push its values separately

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
StatusBar,
Button
} from "react-native";

import WheelOfFortune from 'react-native-wheel-of-fortune';

const rewards = [1,2,3,4,5,6,7,8,9,10]

class App extends Component {

constructor(props) {
super(props);

this.state = {
  winnerValue: null,
  winnerIndex: null
}
this.child = null

}

_renderPlayButton = () => {
return (
TAP TO PLAY
);
}

render() {
return (

<StatusBar barStyle={'light-content'} />
<WheelOfFortune
onRef={ref => (this.child = ref)}
rewards={ rewards }
knobSize={20}
borderWidth={3}
borderColor={"#FFF"}
winner={3}
innerRadius={50}
backgroundColor={"#c0392b"}
getWinner={(value, index) => this.setState({ winnerValue: value, winnerIndex: index })}
/>
<Button title="Press me" onPress={ () => { this.child._onPress() } } />

  </View>
);

}
}
export default App;

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'aquamarine'
},
winner: {
width: '100%',
position: 'absolute',
padding: 10,
backgroundColor: 'black',
bottom: 50,
justifyContent: 'center',
alignItems: 'center'
},
winnerText: {
fontSize: 26,
color: 'black'
},
tapToStart: {
fontSize: 50,
color: '#fff',
fontWeight: 'bold'
}
});

Hi All,

I copied and pasted the code and it is not showing the labels on the spinner. I just see the colors.

If the rewards array contains 6 or else element wheel will show those in the same order and after spinning it will land on the winning index. But if we increase the rewards array list by one (6 + 1) the order on the wheel will be incorrect and after the spin even trough the winning index is the same the wheel will point to a different section since the order is different on the wheel UI it will point to the current order winning index.

Initial Order = ['%10','%20','%30','%40','%50','FREE'];
Wheel Order = ['%10','%20','%30','%40','%50','FREE'];

Initial Order = ['%10','%20','%30','%40','%50','%60','FREE'];
Wheel Order = ['%10','%50','FREE','%60','%40','%20','%30'];

So when downloading the package I got two errors the first one was no problem but they should also fix that which is there no image called 'knob.png' the second error I struggled with:

undefined is not an object (evaluating'_this.props.options.reward)

and I have no idea how to fix it. Any help?

Hi there, our event has great rewards, so i want to control the rate of special rewards, i can do this ?

Thanks

Hi,

This is great library, but how can I replace each section in the circle by images. I want to use different images for each sections not just color and numbers.

Thank you in advance.

If we want to rotate the characters to show them slanting in the center of each portion of wheel, then it shows space after thinner characters because each rendered character takes a fixed width. Is there any way to decrease this space? Decreasing space overlaps the characters.

winner={0} showing random winners, means delaring first element of the array always returns random results

Thinking of doing a PR that allows for text to stand horizontal. At the very moment the text goes down. So what would you like? A prop so people can decide or make it default?

I see there is a prop to change the inner radius of the spinner, what about the outer radius?

When I add this library into my react native app. App shows an error which indicates that in node_modules of this libabrary Image source was imported incorrect with assst name knob.png. while there is demo.png file instead of knob.png

HI I have installed but unable see the reward text

Hi,

I keep getting an eror for: TypeError: _this.props.onRef is not a function

I did a fresh react native project and installed the latest packages of SVG and D3 and receive this error.

index.bundle?platfor…&minify=false:28837 Unhandled JS Exception: TypeError: _this.props.onRef is not a function

This error is located at:
in WheelOfFortune (at App.js:69)
in RCTView (at App.js:68)
in RCTView (at App.js:66)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

I am trying to do some customization text in the wheel but in the text I letter is taking more space can you help me for this

After installation of react-native-wheel-of-fortune package got different errors i.e.. knod.png is not found, RNSVGGroup error.
After isntallation of react-native-svg package got error RNSVGSvgView. Is there any idea about it ?

Hi there,

Is anyone else having issues whereby the wheel is not rendering any text or images on iOS?
Android seems to be fine.

Thanks @eftalyurtseven for this package btw it's great!

Alkis.

i already have react-native-svg and react-native-svg-charts in package.json
i got this error after installing react-native-wheel-of-fortune

I need to align text horizontally not Vertically on each slice of a wheel, for this I need to change index.js file in the src folder. but we should not modify index.js right, then how do I change alignment without modifying index.js file(have more things need to change in index.js), Please clarify me?

TypeError: _this.props.getWinner is not a function. (In '_this.props.getWinner(_this._wheelPaths[winnerIndex].value, winnerIndex)', '_this.props.getWinner' is undefined)
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:null in ErrorUtils.setGlobalHandler$argument_0
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:null in tryCatch
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:null in
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:null in tryCatch
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:null in invoke
at node_modules@babel\runtime\helpers\regeneratorRuntime.js:null in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

I think the knob asset is no longer in the folder, no matter if you specify the knobSource or not, the require seem to fail.

rewards value is only show in string array. not showing int array .
const rewards = ["a", "b","c", "d","d"]

and how to reset wheel when finish one wheel to find winner ?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-wheel-of-fortune/assets/images/knob.png b/node_modules/react-native-wheel-of-fortune/assets/images/knob.png
new file mode 100644
index 0000000..78832cc
Binary files /dev/null and b/node_modules/react-native-wheel-of-fortune/assets/images/knob.png differ

This issue body was partially generated by patch-package.

i have installed this module and applied the example code getting error undefined is not an object (evaluating '_this.props.options.rewards')

const participants = [
'%10',
'%20',
'%30',
'%40',
'%50',
'%60',
'%70',
'%90',
'FREE',
];
const wheelOptions = {
rewards: participants,
knobSize: 50,
borderWidth: 5,
borderColor: '#000',
innerRadius: 50,
duration: 4000,
backgroundColor: 'transparent',
textAngle: 'horizontal',
// knobSource: require('../assets/knob.png'),
getWinner: (value, index) => {
this.setState({winnerValue: value, winnerIndex: index});
},
onRef: ref => (this.child = ref),
};

return (

)

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?

anyone getting this error message? know how to fix it?

It works well on ios devices but it is not working when the React Native Debugger is not working I attached the screenshots. You can find the rotation of each slice. When I checked the logs, the _wheelPaths lists are the same. How can I fix this error ?

Debug mode off :

Debug mode on : (expected behaviour)

Unsure of how to fix this. Google has not helped.

The index file of WheelOfFortune definitely explicitly states its export default.

abi48_0_0.com.facebool.react.bridge.ReadableNativeArray cannot be cast to abi48_0_0.com.facebool.react.bridge.ReadableMap

I've encountered this error while trying to setup the demo code, as well as in my project, I'm new to react, and this has stumped me, I thought i was making a mistake somewhere, but it seems the demo code does not function either (android and expo)

cheers