omulet / react-native-radial-menu Goto Github PK

Hi, great lib. Just wondering why you need to copy children from props to state? With this design, it creates an issue as the children will no longer re-render when their props change.

Is there any way to use icons instead of text in the radial menu?
Adding Images with did not work, as the space for them gets reserved but they do not show up.

hi guys i am about to launch an application in react-native and i am using this component, but when i navigate to a view that contains react-native-radial-menu it fails, basically the phone turns off like 10 secs, and then gets me out from the app, everything else in the app is working just fine. the strange thing here, is that it was working well for testing no issues there, not warnings in the console, but when i attached the BUNDLE (command react-native bundle) to the device itself. the component's behavior changed, in simulator it was very very slow, in the real device just fails. my device for testing is an iphone 5s.

Note: when i replace the component for a simple to test if there is something wrong in my code, everything run good

the example code do not work properly on android , the button doesn't appear when i tap on the main button

works well on iOS, but onPress doesn't get triggered on Android. Any workaround?

<RadialMenu onOpen={() => {}} onClose={() => {}}>
  <Text>ROOT</Text>
  <TouchableOpacity onSelect={() => {}} onPress={() => Alert.alert("test","test")}>A</TouchableOpacity>
  <TouchableOpacity onSelect={() => {}} onPress={() => Alert.alert("test","test")}>B</TouchableOpacity>
  <TouchableOpacity onSelect={() => {}} onPress={() => Alert.alert("test","test")}>C</TouchableOpacity>
  <TouchableOpacity onSelect={() => {}} onPress={() => Alert.alert("test","test")}>D</TouchableOpacity>
</RadialMenu>

Is there a way to make the items connect to the root from a further ditance and faster? and prohibit the root to surpass the items? Or make the root snap back if it surpasses them?

I want to prevent this from happening. And maybe tweak things a bit so that items connect and attach faster and therefor trigger onSelect() faster. Is there a way to do this?

here is the code

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow
  */

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var RadialMenu = require('react-native-radial-menu');

export default class rmnu extends Component {
componentWillMount() {
this.setState({output: ""});
}

_onOpen() {
this.setState({
output: 'on menu open'
})
}

_onClose() {
this.setState({
output: 'on menu close'
})
}

renderItems(count) {
return [...Array(count)].map((_, i) => {
return (
<View style={styles.item} key={i}
onSelect={ () => {
this.setState({output: onSelect ${i}})
} }>
{i}

);
})
}

renderRoot() {
return (
<View style={[styles.item, styles.root]}>
MENU

)
}

render() {
return (

{this.state.output}
<RadialMenu onOpen={() => {}} onClose={() => {}}>
ROOT
<Text onSelect={() => {}}>A
<Text onSelect={() => {}}>B
<Text onSelect={() => {}}>C
<Text onSelect={() => {}}>D


)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
item: {
height: 60,
width: 60,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DDD'
},
root: {
backgroundColor: '#FFCC00'
}
});

AppRegistry.registerComponent('rmnu', () => rmnu);

I get this error during startup:

I installed it normally using npm.
Deleting node_modules folder, clearing cache and reinstalling did not solve the issue.
It can't find the radial menu module. Other modules like navigation work.

The radial menu's functionality works great and is exactly what I have searched for,
However there is one problem with the alignment of the menu on Android. No matter the props or style settings.

While I think the center alignment works in theory due to the fact that there is space reserved, The root and children nodes are not being centered with the radial menu's outer layout, but instead always at the top left corner, even while other items added to the main View are centered correctly.

react-native: 0.49.3

Edit: The problem was related to another special component in the same view. It somehow caused layout problems.