Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed to work under new versions React Native (tested on 0.38) #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,6 @@ let NumberPicker = require('react-native-numberpicker');
onSelect={(value) => {
console.log('onSelect', value);
}}
keyboardInputEnabled={true}
/>
```
9 changes: 4 additions & 5 deletions index.android.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, PropTypes } from 'react';
import React, { Component, PropTypes } from 'react';
import { requireNativeComponent, View} from 'react-native';

var REF_PICKER = 'numberpicker';
Expand Down Expand Up @@ -28,9 +28,6 @@ class NumberPicker extends Component {
if (this.props.onSelect)
this.props.onSelect(event.nativeEvent.value);

if (this.refs[REF_PICKER] && this.state.selectedIndex !== event.nativeEvent.value)
this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex});

}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This used to set the default value, does it not work in later versions?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It forces the client to update the selectedIndex prop every time an "onSelect" event is received, which, while logical, may not be immediately apparent (adding it to the README would fix that).

But the bigger problem when I was testing was that setting the selectedIndex prop on the element couldn't keep up with the native events that kept resetting the picker to it's original value thanks to these two lines. The whole thing then became unusable. I'm open to any ideas on how to fix that.


render() {
Expand All @@ -44,14 +41,15 @@ class NumberPicker extends Component {
onChange={this._onChange}
style={[{height:this.props.height}, style && style]}
{...otherProps}
/>
/>
);
}
}

NumberPicker.defaultProps = {
selectedIndex: 0,
height: 100,
keyboardInputEnabled: true
};

NumberPicker.propTypes = {
Expand All @@ -60,6 +58,7 @@ NumberPicker.propTypes = {
selectedIndex: PropTypes.number,
values: PropTypes.arrayOf(PropTypes.string).isRequired,
onSelect: PropTypes.func,
keyboardInputEnabled: PropTypes.bool
};

var NativeNumberPicker = requireNativeComponent('RNNumberPicker', NumberPicker, {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-numberpicker",
"version": "0.0.4",
"version": "0.0.5",
"description": "React Native Android NumberPicker",
"repository": {
"type": "git",
Expand Down
33 changes: 0 additions & 33 deletions src/main/java/io/fixd/numberpicker/RNNumberPickerChangeEvent.java

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,19 @@ public RNNumberPicker(Context context, AttributeSet attrs) {
super(context, attrs);
}

public RNNumberPicker(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); }
public RNNumberPicker(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public void setKeyboardInputEnabled(boolean enabled) {
if(!enabled) {
this.setDescendantFocusability(NumberPicker.FOCUS_BLOCK_DESCENDANTS);
}
else {
this.setDescendantFocusability(NumberPicker.FOCUS_AFTER_DESCENDANTS);
}
}


public void setOnChangeListener(@Nullable OnChangeListener onValueChangeListener) {
setOnValueChangedListener(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

import javax.annotation.Nullable;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
Expand All @@ -11,22 +14,27 @@
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.uimanager.UIProp;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.uimanager.events.RCTEventEmitter;

import java.lang.Integer;
import java.lang.String;

public class RNNumberPickerManager extends SimpleViewManager<RNNumberPicker> {
public class RNNumberPickerManager extends SimpleViewManager<RNNumberPicker>
implements RNNumberPicker.OnChangeListener {

public static final String REACT_CLASS = "RNNumberPicker";

private RNNumberPicker view;

@Override
public String getName() {
return REACT_CLASS;
}

@Override
protected RNNumberPicker createViewInstance(ThemedReactContext reactContext) {
return new RNNumberPicker(reactContext);
this.view = new RNNumberPicker(reactContext);
return this.view;
}

@ReactProp(name = "values")
Expand All @@ -46,32 +54,24 @@ public void setValue(RNNumberPicker view, Integer selected) {
view.setValue(selected);
}

@ReactProp(name = "keyboardInputEnabled")
public void setKeyboardInputEnabled(RNNumberPicker view, Boolean enabled) {
view.setKeyboardInputEnabled(enabled);
}

@Override
protected void addEventEmitters(final ThemedReactContext reactContext, final RNNumberPicker picker) {
picker.setOnChangeListener(
new RNNumberPickerEventEmitter(
picker,
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher()
)
);
picker.setOnChangeListener(this);
}

private static class RNNumberPickerEventEmitter implements RNNumberPicker.OnChangeListener {

private final RNNumberPicker mRNNumberPicker;
private final EventDispatcher mEventDispatcher;

public RNNumberPickerEventEmitter(RNNumberPicker reactNumberPicker, EventDispatcher eventDispatcher) {
mRNNumberPicker = reactNumberPicker;
mEventDispatcher = eventDispatcher;
}

@Override
public void onValueChange(int value) {
mEventDispatcher.dispatchEvent(
new RNNumberPickerChangeEvent(mRNNumberPicker.getId(), SystemClock.nanoTime(), value)
);
}
@Override
public void onValueChange(int value) {
WritableMap event = Arguments.createMap();
event.putInt("value", value);
ReactContext reactContext = (ReactContext) view.getContext();
reactContext.getJSModule(RCTEventEmitter.class)
.receiveEvent(view.getId(), "topChange", event);
}


}