react-native-multiselect-view - render containers as "pressed" - react-native

Question

react-native-multiselect-view is a seemingly simple library.....however I cant find a way to render a container as "pressed" (i.e. active) without physically pressing it. I want user to make choices and store them in Firebase.....this way when they re-open the app I will fetch choices from Firebase and update UI for their previous selections. Im guessing I need to change the data array data={['item1', 'item2']} to reflect whether item is active or not.....but cant figure out exactly how
import MultiSelectView from 'react-native-multiselect-view';
<MultiSelectView
data={['item1', 'item2']}
inactiveContainerStyle={{padding:2, borderColor: colorConsts.c3, opacity:0.25, borderWidth: 2, borderRadius:sizeConsts.widgetBorderRadius, backgroundColor:'white'}}
activeContainerStyle={{padding:2, borderColor: colorConsts.c2, borderWidth: 2, borderRadius:sizeConsts.widgetBorderRadius, backgroundColor:'white'}}
activeTextStyle={{color:colorConsts.c2}}
inactiveTextStyle={{color:colorConsts.c3}}
inactiveIcon={<IconFA name="plus-circle" size={20} style={{color:colorConsts.c3}}/>}
activeIcon={<IconFA name="minus-circle" size={20} style={{color:colorConsts.c2}}/>}
onSelectionStatusChange={this._onSelectionStatusChange}
/>

Answer 1

I emailed author who kindly came right back to me with: "It's not implemented at the moment. But here the code screenshot where it can be handled. U can raise a PR or fork repo and do it. If u need me to do it for u let me know.."
I decided instead to write my own and use much of the authors code (below)....I pull user preferences from Firebase....into Redux....into local state
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
import {sizeConsts, colorConsts} from '../globalConst';
import IconFA from 'react-native-vector-icons/FontAwesome';
import database from '#react-native-firebase/database';
import {connect} from 'react-redux';
//*********************************************************
//REDUX
//*********************************************************
const passStateToProps = state => ({
arrObjInterests: state.profile.mySelf.arrInterests,
userId: state.auth.userId,
});
class MyMultiSelectView extends Component {
//To update the status of any arrInterests object, run a map on the array and check for some unique value of each object,
//in case of condition=true, return the new object with updated value, else same object.
_onPress = (label, oldValue) => {
//FIRST UPDATE STATE FOR QUICK UI RESPONSE
this.setState(
prevState => ({
//map through prevState interests array and return each object same as you saw it
//.....unless its a match in which case you update the value
arrInterests: prevState.arrInterests.map(obj =>
obj.label === label ? {...obj, value: !oldValue} : obj,
),
}),
() => {
//NEXT UPDATE FBS WITH UPDATED STATE
//prettier-ignore
database().ref('/profiles/users/' + this.props.userId + '/arrInterests').set(this.state.arrInterests);
},
);
};
constructor(props) {
super(props);
//populate state with interests array arrInterests from Redux arrObjInterests
this.state = {
arrInterests: this.props.arrObjInterests,
};
}
render() {
return (
//prettier-ignore
<View
style={{flexDirection: 'row', flexWrap: 'wrap', flex: 1, padding: 15}}>
{/* map through interests array and create TouchableOpacity for each */}
{this.state.arrInterests.map((item, index) => (
<TouchableOpacity key={index} onPress={() => {
this._onPress(item.label, item.value);
}}>
<View style={!item.value ? [styles.container, {borderColor: colorConsts.c3, opacity:0.25}] : [styles.container, {borderColor: colorConsts.c2}]}>
<Text style={!item.value ? [styles.text, {color:colorConsts.c3}] : [styles.text, {color:colorConsts.c2}]}>{item.label}</Text>
{!item.value ? <IconFA name="plus-circle" size={20} style={[styles.icon, {color:colorConsts.c3}]}/> : <IconFA name="minus-circle" size={20} style={[styles.icon, {color:colorConsts.c2}]}/>}
</View>
</TouchableOpacity>
))}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingVertical: 5,
marginTop: 10,
marginRight: 10,
paddingLeft: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 2,
borderRadius: sizeConsts.widgetBorderRadius,
backgroundColor: '#f8f8f8',
},
text: {
fontSize: 16,
color: 'black',
marginRight: 6,
},
icon: {
width: 20,
marginRight: 2,
},
});
export default connect(
passStateToProps,
null,
)(MyMultiSelectView);