trying to expand or reduce view within a `Flatlist` when clicking on them based on their current state - react-native

Question

I am trying to expand or reduce view within a Flatlist when clicking on them based on their current state. I am using data within mobx and connecting it to a react component. Even though console.log confirms that the state is changing after clicking on the view, it does not expand when clicked upon. It was working when the data was a react state, but I had to move it to mobx due to diverse interactions within the software. I think the action syntax and logic has to be changed or it might something else. Please can anyone help?
mobx code below:
import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'
class StateStorage {
#observable materials = [
{
name: 'RAG',
price: '$',
image: require("./Icons/RAG.jpg"),
expanded: false
},
{
name: 'GRAPE',
price: '$',
image: require("./Icons/GRAPE.jpg"),
expanded: false
},
{
name: 'FLAG',
price: '$',
image: require("./Icons/FLAG.jpg"),
expanded: false
},
#action changeLayout(index) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.materials[index].expanded= !this.materials[index].expanded
console.log(this.materials[index].expanded)
}
#action chooseMaterial(index){
this.selectedMaterial = this.materials[index].name
console.log(this.selectedMaterial)
}
export default new StateStorage();
React-native code below:
import React, { Component } from 'react';
import { View, Text, FlatList, Image, ImageBackground, PixelRatio, Platform, UIManager, TouchableOpacity, LayoutAnimation }
from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import DropDownItem from 'react-native-drop-down-item';
import StateStorage from './StateStorage';
import {observer} from 'mobx-react';
#observer
class App extends Component {
constructor (props) {
super(props)
this.state ={
}
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
render() {
return (
<View
style={{
backgroundColor:'#262A2C',
flex:1
}}>
<FlatList
style={{marginTop:80,}}
data={StateStorage.materials}
renderItem={({ item, index }) => (
<View style={{}}>
<TouchableOpacity
onPress={() =>{
StateStorage.chooseMaterial(index)
}}>
<ImageBackground
source={item.image}
//pay FlatIcon or design personal one
style={{
resizeMode: 'contain',
position:'relative',
width: wp('100%'),
left: wp('0%'),
borderBottomWidth: 1,
borderBottomColor: 'grey',
padding: hp('6%'),
}}
>
</ImageBackground>
</TouchableOpacity
<TouchableOpacity activeOpacity={0.8}
onPress={() => {
StateStorage.changeLayout(index)
}}
style={{ padding: 10,
backgroundColor:'black',
left:wp('-10.9%'),
top:hp('0%'),
width: wp('120%'),
height:hp('5%')}}>
<Image
style={{
width:wp('9%'),
height:hp('4.5%'),
tintColor:'white',
left:250,
top:-10
//tintColor:'#81F018'
}}
source={StateStorage.materials[index].expanded ? require('./Icons/arrowDown.png') : require('./Icons/arrowUp.png') }/>
</TouchableOpacity>
<View style={{height: StateStorage.materials[index].expanded ? null : 0,
overflow: 'hidden',
backgroundColor:'black' }}>
<Text
style={{
fontSize: 17,
left:150,
top:-10,
color: 'turquoise',
padding: 10}}>
Specs
</Text>
</View>
</View>
)}
}
export default App
Before the state was moved to mobx, I was using this method to make it work:
changeLayout = ({index}) => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState(({ materials }) => ({
materials: materials.map((s, idx) =>
idx === index ? {...s, expanded: !StateStorage.materials[index].expanded} : {...s, expanded: false})
}));
console.log(StateStorage.materials[index].expanded)
}

Answer 1

You are searching for accordion :
Please refer to the native base accordion component. This is what you need.
https://docs.nativebase.io/Components.html#accordion-def-headref