Mixing
How can select multiple items from flatlist with check box from react native elements library in react...
1
I am creating a flat list with checkbox and text,but i am going to selecting a single item it selects all the items from the list, and i want to select single or multiple or all items but not all like this, when i selecting single item it checks true to all items.
Here i am fetching list from api.
Here is my Code :
import React, { Component } from 'react'
import { View,FlatList} from 'react-native'
import { HeaderView } from '../components/Headers';
import { color } from '../values/color';
import TextViewClickable, { TextViewNonClickable } from
'../components/TextView';
import { dimension } from '../values/dimensions';
import Modal from 'react-native-modal';
import { Header, Icon, CheckBox, Button } from 'react-native-
elements';
import { getSessionId, showMessage } from '../utils
/GeneralFunctions';
import { showMyLists } from '../networkRequest/API';
import { onSuccess, onFailure } from '../networkRequest
/AxiosRequest';
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
lists : ,
isChecked : false
}
}
componentWillMount() {
this.getAllList()
}
getAllList = () => {
// this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
// this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
// this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
isIconCheckedOrNot = () => {
if(this.state.isChecked){
this.setState({isChecked:false})
}else {
this.setState({isChecked:true})
}
}
_renderListItem = ({item}) => {
return(
<View style=
{{flex:1,flexDirection:'row',alignItems:'center',
justifyContent:'flex-start'}}>
<CheckBox
checked={this.state.isChecked}
onPress={() => this.isIconCheckedOrNot()}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle=
{{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomInDown'
animationOut='zoomOutDown'
isVisible={modalVisibility}
animationInTiming={300}s
animationOutTiming={300}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View style={{alignItems:'flex-start',
flex:1,backgroundColor:color.colorWhite}}>
<Header
placement='left'
leftComponent={
<Icon name='cross' type='entypo' color='white'
iconStyle={{padding:16}}
onPress={closeModal}/>
}
centerComponent={{ text: 'My Lists',
style: [{ color:
'white',fontWeight:'bold',fontSize:24 }] }}
outerContainerStyles=
{{alignSelf:'stretch',height:64,borderBottomWidth:0}}
backgroundColor={color.loginBgColor}
/>
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
/>
<Button
title={'Ok'}
containerStyle=
{{position:'absolute',bottom:10,right:10}}
onPress={closeModal}
buttonStyle=
{{paddingHorizontal:16,paddingVertical:8,
backgroundColor:color.colorAccent}}
/>
</View>
</Modal>
)
}
}
javascript node.js react-native ecmascript-6
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
add a comment |
1
I am creating a flat list with checkbox and text,but i am going to selecting a single item it selects all the items from the list, and i want to select single or multiple or all items but not all like this, when i selecting single item it checks true to all items.
Here i am fetching list from api.
Here is my Code :
import React, { Component } from 'react'
import { View,FlatList} from 'react-native'
import { HeaderView } from '../components/Headers';
import { color } from '../values/color';
import TextViewClickable, { TextViewNonClickable } from
'../components/TextView';
import { dimension } from '../values/dimensions';
import Modal from 'react-native-modal';
import { Header, Icon, CheckBox, Button } from 'react-native-
elements';
import { getSessionId, showMessage } from '../utils
/GeneralFunctions';
import { showMyLists } from '../networkRequest/API';
import { onSuccess, onFailure } from '../networkRequest
/AxiosRequest';
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
lists : ,
isChecked : false
}
}
componentWillMount() {
this.getAllList()
}
getAllList = () => {
// this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
// this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
// this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
isIconCheckedOrNot = () => {
if(this.state.isChecked){
this.setState({isChecked:false})
}else {
this.setState({isChecked:true})
}
}
_renderListItem = ({item}) => {
return(
<View style=
{{flex:1,flexDirection:'row',alignItems:'center',
justifyContent:'flex-start'}}>
<CheckBox
checked={this.state.isChecked}
onPress={() => this.isIconCheckedOrNot()}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle=
{{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomInDown'
animationOut='zoomOutDown'
isVisible={modalVisibility}
animationInTiming={300}s
animationOutTiming={300}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View style={{alignItems:'flex-start',
flex:1,backgroundColor:color.colorWhite}}>
<Header
placement='left'
leftComponent={
<Icon name='cross' type='entypo' color='white'
iconStyle={{padding:16}}
onPress={closeModal}/>
}
centerComponent={{ text: 'My Lists',
style: [{ color:
'white',fontWeight:'bold',fontSize:24 }] }}
outerContainerStyles=
{{alignSelf:'stretch',height:64,borderBottomWidth:0}}
backgroundColor={color.loginBgColor}
/>
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
/>
<Button
title={'Ok'}
containerStyle=
{{position:'absolute',bottom:10,right:10}}
onPress={closeModal}
buttonStyle=
{{paddingHorizontal:16,paddingVertical:8,
backgroundColor:color.colorAccent}}
/>
</View>
</Modal>
)
}
}
javascript node.js react-native ecmascript-6
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49
add a comment |
1
1
1
0
I am creating a flat list with checkbox and text,but i am going to selecting a single item it selects all the items from the list, and i want to select single or multiple or all items but not all like this, when i selecting single item it checks true to all items.
Here i am fetching list from api.
Here is my Code :
import React, { Component } from 'react'
import { View,FlatList} from 'react-native'
import { HeaderView } from '../components/Headers';
import { color } from '../values/color';
import TextViewClickable, { TextViewNonClickable } from
'../components/TextView';
import { dimension } from '../values/dimensions';
import Modal from 'react-native-modal';
import { Header, Icon, CheckBox, Button } from 'react-native-
elements';
import { getSessionId, showMessage } from '../utils
/GeneralFunctions';
import { showMyLists } from '../networkRequest/API';
import { onSuccess, onFailure } from '../networkRequest
/AxiosRequest';
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
lists : ,
isChecked : false
}
}
componentWillMount() {
this.getAllList()
}
getAllList = () => {
// this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
// this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
// this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
isIconCheckedOrNot = () => {
if(this.state.isChecked){
this.setState({isChecked:false})
}else {
this.setState({isChecked:true})
}
}
_renderListItem = ({item}) => {
return(
<View style=
{{flex:1,flexDirection:'row',alignItems:'center',
justifyContent:'flex-start'}}>
<CheckBox
checked={this.state.isChecked}
onPress={() => this.isIconCheckedOrNot()}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle=
{{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomInDown'
animationOut='zoomOutDown'
isVisible={modalVisibility}
animationInTiming={300}s
animationOutTiming={300}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View style={{alignItems:'flex-start',
flex:1,backgroundColor:color.colorWhite}}>
<Header
placement='left'
leftComponent={
<Icon name='cross' type='entypo' color='white'
iconStyle={{padding:16}}
onPress={closeModal}/>
}
centerComponent={{ text: 'My Lists',
style: [{ color:
'white',fontWeight:'bold',fontSize:24 }] }}
outerContainerStyles=
{{alignSelf:'stretch',height:64,borderBottomWidth:0}}
backgroundColor={color.loginBgColor}
/>
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
/>
<Button
title={'Ok'}
containerStyle=
{{position:'absolute',bottom:10,right:10}}
onPress={closeModal}
buttonStyle=
{{paddingHorizontal:16,paddingVertical:8,
backgroundColor:color.colorAccent}}
/>
</View>
</Modal>
)
}
}
javascript node.js react-native ecmascript-6
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
I am creating a flat list with checkbox and text,but i am going to selecting a single item it selects all the items from the list, and i want to select single or multiple or all items but not all like this, when i selecting single item it checks true to all items.
Here i am fetching list from api.
Here is my Code :
import React, { Component } from 'react'
import { View,FlatList} from 'react-native'
import { HeaderView } from '../components/Headers';
import { color } from '../values/color';
import TextViewClickable, { TextViewNonClickable } from
'../components/TextView';
import { dimension } from '../values/dimensions';
import Modal from 'react-native-modal';
import { Header, Icon, CheckBox, Button } from 'react-native-
elements';
import { getSessionId, showMessage } from '../utils
/GeneralFunctions';
import { showMyLists } from '../networkRequest/API';
import { onSuccess, onFailure } from '../networkRequest
/AxiosRequest';
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
lists : ,
isChecked : false
}
}
componentWillMount() {
this.getAllList()
}
getAllList = () => {
// this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
// this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
// this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
isIconCheckedOrNot = () => {
if(this.state.isChecked){
this.setState({isChecked:false})
}else {
this.setState({isChecked:true})
}
}
_renderListItem = ({item}) => {
return(
<View style=
{{flex:1,flexDirection:'row',alignItems:'center',
justifyContent:'flex-start'}}>
<CheckBox
checked={this.state.isChecked}
onPress={() => this.isIconCheckedOrNot()}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle=
{{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomInDown'
animationOut='zoomOutDown'
isVisible={modalVisibility}
animationInTiming={300}s
animationOutTiming={300}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View style={{alignItems:'flex-start',
flex:1,backgroundColor:color.colorWhite}}>
<Header
placement='left'
leftComponent={
<Icon name='cross' type='entypo' color='white'
iconStyle={{padding:16}}
onPress={closeModal}/>
}
centerComponent={{ text: 'My Lists',
style: [{ color:
'white',fontWeight:'bold',fontSize:24 }] }}
outerContainerStyles=
{{alignSelf:'stretch',height:64,borderBottomWidth:0}}
backgroundColor={color.loginBgColor}
/>
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
/>
<Button
title={'Ok'}
containerStyle=
{{position:'absolute',bottom:10,right:10}}
onPress={closeModal}
buttonStyle=
{{paddingHorizontal:16,paddingVertical:8,
backgroundColor:color.colorAccent}}
/>
</View>
</Modal>
)
}
}
javascript node.js react-native ecmascript-6
javascript node.js react-native ecmascript-6
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
edited Nov 22 '18 at 10:07
Savinder Singh
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
asked Nov 22 '18 at 9:11
Savinder SinghSavinder Singh
7212
7212
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49
add a comment |
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49
add a comment |
1 Answer
1
active
oldest
votes
1
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
isChecked : ,
}
}
componentWillMount = () => {
let initialCheck = this.state.lists.map(() => false);
this.setState({isChecked : initialCheck})
}
getAllList = () => {
this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
//add product to selected lists
addProduct = () => {
showMessage(JSON.stringify(this.state.selectedLists))
getSessionId().then(sessionId => {
addProductToLists(sessionId,this.state.selectedLists,
this.props.productId).then(response => {
onSuccess(response).then(response => {
alert(JSON.stringify(response.message))
})
}).catch(error => {
onFailure(error).then(error => {
alert(JSON.stringify(error))
})
})
})
}
isIconCheckedOrNot = (item,index) => {
let { isChecked,selectedLists} = this.state;
isChecked[index] = !isChecked[index];
this.setState({ isChecked : isChecked});
if(isChecked[index] == true){
selectedLists.push(item.list_id)
}else {
selectedLists.pop(item.list_id)
}
}
_renderListItem = ({item,index}) => {
return(
<View >
<CheckBox
checked={this.state.isChecked[index]}
onPress={() => this.isIconCheckedOrNot(item,index)}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle={{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
_onOkPress = () => {
this.props.closeModal();
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={modalVisibility}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View >
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => {
this.getAllList();
}}
/>
}
/>
<Button
title={'Ok'}
containerStyle={{position:'absolute',bottom:10,right:10}}
onPress={() => this.addProduct()}
/>
</View>
</Modal>
)
}
}
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427360%2fhow-can-select-multiple-items-from-flatlist-with-check-box-from-react-native-ele%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
isChecked : ,
}
}
componentWillMount = () => {
let initialCheck = this.state.lists.map(() => false);
this.setState({isChecked : initialCheck})
}
getAllList = () => {
this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
//add product to selected lists
addProduct = () => {
showMessage(JSON.stringify(this.state.selectedLists))
getSessionId().then(sessionId => {
addProductToLists(sessionId,this.state.selectedLists,
this.props.productId).then(response => {
onSuccess(response).then(response => {
alert(JSON.stringify(response.message))
})
}).catch(error => {
onFailure(error).then(error => {
alert(JSON.stringify(error))
})
})
})
}
isIconCheckedOrNot = (item,index) => {
let { isChecked,selectedLists} = this.state;
isChecked[index] = !isChecked[index];
this.setState({ isChecked : isChecked});
if(isChecked[index] == true){
selectedLists.push(item.list_id)
}else {
selectedLists.pop(item.list_id)
}
}
_renderListItem = ({item,index}) => {
return(
<View >
<CheckBox
checked={this.state.isChecked[index]}
onPress={() => this.isIconCheckedOrNot(item,index)}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle={{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
_onOkPress = () => {
this.props.closeModal();
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={modalVisibility}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View >
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => {
this.getAllList();
}}
/>
}
/>
<Button
title={'Ok'}
containerStyle={{position:'absolute',bottom:10,right:10}}
onPress={() => this.addProduct()}
/>
</View>
</Modal>
)
}
}
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
add a comment |
1
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
isChecked : ,
}
}
componentWillMount = () => {
let initialCheck = this.state.lists.map(() => false);
this.setState({isChecked : initialCheck})
}
getAllList = () => {
this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
//add product to selected lists
addProduct = () => {
showMessage(JSON.stringify(this.state.selectedLists))
getSessionId().then(sessionId => {
addProductToLists(sessionId,this.state.selectedLists,
this.props.productId).then(response => {
onSuccess(response).then(response => {
alert(JSON.stringify(response.message))
})
}).catch(error => {
onFailure(error).then(error => {
alert(JSON.stringify(error))
})
})
})
}
isIconCheckedOrNot = (item,index) => {
let { isChecked,selectedLists} = this.state;
isChecked[index] = !isChecked[index];
this.setState({ isChecked : isChecked});
if(isChecked[index] == true){
selectedLists.push(item.list_id)
}else {
selectedLists.pop(item.list_id)
}
}
_renderListItem = ({item,index}) => {
return(
<View >
<CheckBox
checked={this.state.isChecked[index]}
onPress={() => this.isIconCheckedOrNot(item,index)}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle={{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
_onOkPress = () => {
this.props.closeModal();
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={modalVisibility}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View >
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => {
this.getAllList();
}}
/>
}
/>
<Button
title={'Ok'}
containerStyle={{position:'absolute',bottom:10,right:10}}
onPress={() => this.addProduct()}
/>
</View>
</Modal>
)
}
}
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
add a comment |
1
1
1
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
isChecked : ,
}
}
componentWillMount = () => {
let initialCheck = this.state.lists.map(() => false);
this.setState({isChecked : initialCheck})
}
getAllList = () => {
this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
//add product to selected lists
addProduct = () => {
showMessage(JSON.stringify(this.state.selectedLists))
getSessionId().then(sessionId => {
addProductToLists(sessionId,this.state.selectedLists,
this.props.productId).then(response => {
onSuccess(response).then(response => {
alert(JSON.stringify(response.message))
})
}).catch(error => {
onFailure(error).then(error => {
alert(JSON.stringify(error))
})
})
})
}
isIconCheckedOrNot = (item,index) => {
let { isChecked,selectedLists} = this.state;
isChecked[index] = !isChecked[index];
this.setState({ isChecked : isChecked});
if(isChecked[index] == true){
selectedLists.push(item.list_id)
}else {
selectedLists.pop(item.list_id)
}
}
_renderListItem = ({item,index}) => {
return(
<View >
<CheckBox
checked={this.state.isChecked[index]}
onPress={() => this.isIconCheckedOrNot(item,index)}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle={{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
_onOkPress = () => {
this.props.closeModal();
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={modalVisibility}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View >
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => {
this.getAllList();
}}
/>
}
/>
<Button
title={'Ok'}
containerStyle={{position:'absolute',bottom:10,right:10}}
onPress={() => this.addProduct()}
/>
</View>
</Modal>
)
}
}
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
export default class AllLists extends Component {
constructor(props){
super(props)
this.state={
isChecked : ,
}
}
componentWillMount = () => {
let initialCheck = this.state.lists.map(() => false);
this.setState({isChecked : initialCheck})
}
getAllList = () => {
this.showRefreshLoader();
getSessionId().then(sessionId => {
showMyLists(sessionId).then(response => {
onSuccess(response).then(successResponse => {
this.hideRefreshLoader();
this.setState({
lists:successResponse,
})
})
}).catch(error => {
this.hideRefreshLoader();
onFailure(error).then(errorMessage => {
showMessage(errorMessage);
})
})
})
}
//add product to selected lists
addProduct = () => {
showMessage(JSON.stringify(this.state.selectedLists))
getSessionId().then(sessionId => {
addProductToLists(sessionId,this.state.selectedLists,
this.props.productId).then(response => {
onSuccess(response).then(response => {
alert(JSON.stringify(response.message))
})
}).catch(error => {
onFailure(error).then(error => {
alert(JSON.stringify(error))
})
})
})
}
isIconCheckedOrNot = (item,index) => {
let { isChecked,selectedLists} = this.state;
isChecked[index] = !isChecked[index];
this.setState({ isChecked : isChecked});
if(isChecked[index] == true){
selectedLists.push(item.list_id)
}else {
selectedLists.pop(item.list_id)
}
}
_renderListItem = ({item,index}) => {
return(
<View >
<CheckBox
checked={this.state.isChecked[index]}
onPress={() => this.isIconCheckedOrNot(item,index)}
/>
<TextViewNonClickable
textViewText={item.name}
textStyle={{color:color.colorBlack,fontWeight:'700'}}
/>
</View>
)
}
_onOkPress = () => {
this.props.closeModal();
}
//render screen
render() {
const {modalVisibility,closeModal} = this.props;
return (
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={modalVisibility}
onBackButtonPress={closeModal}
style={{margin:32}}
>
<View >
<FlatList
data={this.state.lists}
renderItem={this._renderListItem}
keyExtractor={(item,index) => item+index}
style={{flex:1,width:dimension.screenWidth}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={() => {
this.getAllList();
}}
/>
}
/>
<Button
title={'Ok'}
containerStyle={{position:'absolute',bottom:10,right:10}}
onPress={() => this.addProduct()}
/>
</View>
</Modal>
)
}
}
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
answered Nov 29 '18 at 9:41
Savinder SinghSavinder Singh
7212
7212
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427360%2fhow-can-select-multiple-items-from-flatlist-with-check-box-from-react-native-ele%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of How to select item(s) out of a FlatList?
– kivul
Nov 22 '18 at 9:14
Take a look at what your "this" refers to. It looks like you are setting and looking at the selected state of your AllLists component. But in reality you want to have a selected state per row. So your selection should also be a list, putting an index and its selected state together.
– stephanmantel
Nov 22 '18 at 9:49
I can't understand what are you trying to say.
– Savinder Singh
Nov 27 '18 at 9:49