React Native Common Select

Getting started

yarn add react-native-commonselect

Generate ttf file

  if ("react-native-vector-icons" in package.json){
    react-native link
  }
  else{
    Insert into package.json
    "dependencies": {
    ...
    "react-native-vector-icons": "^6.6.0",
    ...
    }
    react-native link
    Delete react-native-vector-icons": "^6.6.0" from package.json
  }

CommonSelectTree Usage

import React from "react";
import {
  View,
  StyleSheet
} from "react-native";
 
import {
  CommonSelectTree
} from 'react-native-commonselect';
 
export default class App extends React.Component {
  constructor(props) {
    super(props);
 
    this.normalLabel = [{
      label_id: 1,
      label_name: 'Tom',
      other_data: 'data1'
    }, {
      label_id: 2,
      label_name: 'Jack',
      other_data: 'data2'
    }, {
      label_id: 3,
      label_name: 'Rose',
      other_data: 'data3'
    }];
    this.normalLabelInit = [2];
 
    this.treeSingleLabel = [{
      tree_id: 1,
      tree_name: 'Level1 1',
      other_data: 'data1',
      tree_children: [{
        tree_id: 11,
        tree_name: 'Level2 11',
        other_data: 'data11',
      }, {
        tree_id: 12,
        tree_name: 'Level2 12',
        other_data: 'data12',
      }, ]
    }, {
      tree_id: 2,
      tree_name: 'Level1 2',
      other_data: 'data2',
      tree_children: [{
        tree_id: 21,
        tree_name: 'Level2 21',
        other_data: 'data21',
        tree_children: [{
          tree_id: 211,
          tree_name: 'Level3 211',
          other_data: 'data211',
        }, {
          tree_id: 212,
          tree_name: 'Level3 212',
          other_data: 'data212',
        }, ]
      }, {
        tree_id: 22,
        tree_name: 'Level2 22',
        other_data: 'data22',
        tree_children: [{
          tree_id: 221,
          tree_name: 'Level3 221',
          other_data: 'data221',
        }, {
          tree_id: 222,
          tree_name: 'Level3 222',
          other_data: 'data222',
        }, ]
      }, ]
    }, ];
 
    this.treeMutipleLabel = JSON.parse(JSON.stringify(this.treeSingleLabel));
    this.treeLabelSingleInit = [1, 2, 21, 212];
    this.treeLabelMutipleInit = [1, 11, 2, 21, 212];
  }
 
  selectNormal = (node, result) => {
    console.log(node, result);
  }
 
  selectTree = (node, result) => {
    console.log(node, result);
  }
 
  render() {
    return (
      <View style={styles.container}>
        <CommonSelectTree labelData={this.normalLabel}
            selectCode='label_id'
            selectName='label_name'
            selectResult={this.selectNormal}
            selectInit={this.normalLabelInit}
            treeStyle={{flexDirection:'row',flexWrap :'wrap'}}
        />
        <View style={{backgroundColor:'#677ca0',height:10}}/>
        <CommonSelectTree labelData={this.treeSingleLabel}
            selectCode='tree_id'
            selectName='tree_name'
            selectChildren='tree_children'
            selectResult={this.selectTree}
            selectInit={this.treeLabelSingleInit}
            treeStyle={{width:200}}
        />
        <View style={{backgroundColor:'#677ca0',height:10}}/>
        <CommonSelectTree labelData={this.treeMutipleLabel}
            selectCode='tree_id'
            selectName='tree_name'
            selectChildren='tree_children'
            selectResult={this.selectTree}
            selectInit={this.treeLabelMutipleInit}
            treeStyle={{width:200}}
            mutipleFlag={true}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

CommonSelectList CommonSelectPanel Usage

import React from "react";
import {
  View,
  StyleSheet
} from "react-native";
 
import {
  CommonSelectList,
  CommonSelectPanel
} from 'react-native-commonselect';
import CommonIcon from 'react-native-commonicon';
 
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listVisible: false,
    }
 
    this.SelectData = [{
      student_code: '01',
      student_name: 'Tom',
      other_data: 'data1'
    }, {
      student_code: '02',
      student_name: 'Jack',
      other_data: 'data2'
    }, {
      student_code: '03',
      student_name: 'Rose',
      other_data: 'data3'
    }, {
      student_code: '04',
      student_name: 'David',
      other_data: 'data4'
    }, {
      student_code: '05',
      student_name: 'Peter',
      other_data: 'data5'
    }];
 
    this.SelectData0 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData1 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData2 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData3 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData4 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData5 = JSON.parse(JSON.stringify(this.SelectData));
 
    this.SelectDataInit2 = ['02'];
    this.SelectDataInit4 = ['02', '04'];
 
  }
 
  selectedData = (res) => {
    console.log(res);
  }
 
  selectStudent = () => {
    this.setState({
      listVisible: !this.state.listVisible
    });
  }
 
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <View style={{alignItems:'flex-end'}}>
          <CommonIcon iconType='MaterialCommunityIcons' iconName='account' color={'#FF0000'} size={30} onPress={() => this.selectStudent()}/>
        </View>
        <CommonSelectList
            selectData={this.SelectData5}
            selectCode='student_code'
            selectName = 'student_name'
            selectResult={this.selectedData}
            listVisible={this.state.listVisible}
            listLeft={0}
            listTop={10+30}
            listWidth={150}
            listMaxHeight={300}
            listPosition={{alignItems: 'flex-end'}}
            listToolBarHeight={30}
        />
        <CommonSelectPanel
            selectData={this.SelectData0}
            selectCode='student_code'
            selectName='student_name'
            selectToolBar={false}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData1}
            selectCode='student_code'
            selectName='student_name'
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData2}
            selectCode='student_code'
            selectName='student_name'
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            selectInit={this.SelectDataInit2}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData3}
            selectCode='student_code'
            selectName='student_name'
            selectMuti={true}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textHead='You Have Selected'
            textTail='Students'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData4}
            selectCode='student_code'
            selectName='student_name'
            selectMuti={true}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            selectInit={this.SelectDataInit4}
            textHead='You Have Selected'
            textTail='Students'
            listToolBarHeight={30}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

CommonSelectTree Component props

Prop	Required	Type	default	description
labelData	NO	array	none	Label data Array
selectCode	NO	string	'code'
selectName	NO	string	'name'
selectChildren	NO	string	'children'
selectResult	NO	func	none
selectInit	NO	array	none
treeStyle	NO	array or object	none
treeBackgroundColor	NO	'#42464b'	none
treeSelectedBackgroundColor	NO	string	'#ff0000'
iconColor	NO	string	'#FFF'
iconSize	NO	number	20
labelStyle	NO	array or object	{color: '#FFFFFF', fontSize: 16, margin: 4}
mutipleFlag	NO	bool	false

CommonSelectList Component props

Prop	Required	Type	default	description
selectData	YES	array	[]	Select data Array
selectCode	YES	string	none
selectName	YES	string	none
selectMuti	NO	bool	false
selectToolBar	NO	bool	true
selectResult	NO	func	(selectedItem) => {}
selectInit	NO	array	none
caseSensitive	NO	bool	true
listVisible	NO	bool	false
listPosition	NO	array or object	{}
listLeft	NO	number	0
listTop	NO	number	0
listWidth	NO	number	200
listMaxHeight	NO	number	300
listToolBarHeight	NO	number	20
listInputFocus	NO	bool	true
listInputBgColor	NO	string	'#ececec'
listItemDarkBgColor	NO	string	'#d4d8e9'
listItemLightBgColor	NO	string	'#f0f0f0'
listItemSeparatorColor	NO	string	'#42464b'

CommonSelectPanel Component props

Prop	Required	Type	default	description
selectData	YES	array	[]	Select data Array
selectCode	YES	string	none
selectName	YES	string	none
selectMuti	NO	bool	false
selectToolBar	NO	bool	true
selectResult	NO	func	(selectedItem) => {}
selectInit	NO	array	none
caseSensitive	NO	bool	true
selectWidth	NO	number	200
selectStyle	NO	array or object	{}
textPrompt	NO	string	''
textHead	NO	string	''
textTail	NO	string	''
listMaxHeight	NO	number	300
listToolBarHeight	NO	number	20
listInputFocus	NO	bool	true
listInputBgColor	NO	string	'#ececec'
listItemDarkBgColor	NO	string	'#d4d8e9'
listItemLightBgColor	NO	string	'#f0f0f0'
listItemSeparatorColor	NO	string	'#42464b'