Skip to content

Commit

Permalink
Updated to RN 0.60.5
Browse files Browse the repository at this point in the history
- Migrated from deprecated ListView to FlatList
- Migrated componentWillReceiveProps to getDerivedStateFromProps
- Fixed warning about “VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.” by specifying keyExtractor.
- Changed package.json from dependencies to peerDependencies.
- Updated react version.
  • Loading branch information
Mark Madlangbayan committed Sep 4, 2019
1 parent f9d55ea commit 55b329b
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 20 deletions.
32 changes: 14 additions & 18 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,25 @@ import {
TouchableHighlight,
View,
StyleSheet,
ListView,
YellowBox
FlatList
} from "react-native";
import PropTypes from "prop-types";


export default class ModalPicker extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(this.props.data),
modalVisible: false
};
YellowBox.ignoreWarnings(['ListView is deprecated']);
}

componentWillReceiveProps( nextProps ) {
if(this.state.dataSource != nextProps.dataSource) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows( nextProps.data )
});
static getDerivedStateFromProps(props, state) {
if (state.data === props.data) {
return null;
}

return { data: props.data };
}

setModalVisible(visible) {
Expand Down Expand Up @@ -58,22 +53,23 @@ export default class ModalPicker extends Component {
underlayColor={"#333333cc"}
>
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID, higlightRow) => {
<FlatList
data={this.state.data}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<TouchableHighlight
underlayColor={"transparent"}
onPress={() => {
this.setModalVisible(false);
this.props.onValueChange(rowData[this.props.value], rowID);
this.props.onValueChange(item[this.props.value], index);
}}
>
{this.props.renderRow ? (
this.props.renderRow(rowData, rowID)
this.props.renderRow(item, index)
) : (
<Text style={styles.itemText}>
{rowData[this.props.label]}
{item[this.props.label]}
</Text>
)}
</TouchableHighlight>
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"url": "https://github.com/binbytes/react-native-simple-modal-picker/issues"
},
"homepage": "https://github.com/binbytes/react-native-simple-modal-picker#readme",
"dependencies": {
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.2"
"react": "^16.8.6"
}
}
4 changes: 4 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


0 comments on commit 55b329b

Please sign in to comment.