Displays proper input name.

Filters out fields  from other which have group id.
Added some margin to group tabs to make them look "better".

addons/ondevice-knobs/src/GroupTabs.js

@@ -14,6 +14,7 @@ class GroupTabs extends Component {
     return (
       <TouchableOpacity
         style={{
+          marginTop: 5,
           marginRight: 15,
           paddingBottom: 10,
         }}

addons/ondevice-knobs/src/PropField.js

@@ -19,7 +19,7 @@ const PropField = ({ onChange, onPress, knob }) => {
             fontWeight: 'bold',
           }}
         >
-          {`${knob.name}`}
+          {`${knob.label || knob.name}`}
         </Text>
       ) : null}
       <InputType knob={knob} onChange={onChange} onPress={onPress} />
@@ -30,6 +30,7 @@ const PropField = ({ onChange, onPress, knob }) => {
 PropField.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
+    label: PropTypes.string,
     value: PropTypes.any,
     hideLabel: PropTypes.bool,
     type: PropTypes.oneOf([

addons/ondevice-knobs/src/panel.js

@@ -118,6 +118,11 @@ export default class Panel extends React.Component {
         render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
         title: DEFAULT_GROUP_ID,
       };
+
+      if (groupId === DEFAULT_GROUP_ID) {
+        knobsArray = knobsArray.filter(key => !knobs[key].groupId);
+      }
+
       if (groupId !== DEFAULT_GROUP_ID) {
         knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
       }