I have rendered data from an array / JSON and its shows on screen. When I click on an option its heiglights the box on which I have clicked. But I want to heightlight multiple options or want to choose multiple options from array. I am not getting how to do that. It only shows only one option and when I click click on another otion it heighlights the option but dehighlights the previous option. Please suggest me solution for that. I have share image and code below -
Image: enter image description here
Code:
import React, {useContext} from 'react'; import { Dimensions, Image, StatusBar, Text, TouchableHighlight, } from 'react-native';
import {Box, Button, ScrollView} from 'native-base';
import {useState} from 'react';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {styles} from './createHabitStyles';
import {ApplicationContext} from '../../../context/application_ctx';
import {IconCheck, IconCircleBack} from '../../../svgIcons/icons';
export function ChooseTechnique({navigation, choose}) {
const [chooseButton, setChooseButton] = useState();
const {habitNavigation,setHabitNavigation,chooseSpan} =
useContext(ApplicationContext);
const {techniques, setTechniques} = useContext(ApplicationContext);
let techniqueChooser = [
{button: 'Mood Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
{button: 'Meditation',src:require('../../../assets/images/techniqueBackgrounds/meditation.jpg')},
{button: 'ABCD',src:require('../../../assets/images/techniqueBackgrounds/abcd.jpg')},
{button: 'Optimism',src:require('../../../assets/images/techniqueBackgrounds/optimism1.jpg')},
{button: 'Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
{button: 'Motivation',src:require('../../../assets/images/techniqueBackgrounds/motivation.jpg')},
{button: 'Defusion',src:require('../../../assets/images/techniqueBackgrounds/defusion.jpg')},
{button: 'Values',src:require('../../../assets/images/techniqueBackgrounds/goals.jpg')},
{button: 'Goals',src:require('../../../assets/images/techniqueBackgrounds/values.jpg')},
{button: 'Thought Record',src:require('../../../assets/images/techniqueBackgrounds/thought.jpg')},
{button: 'Breathe',src:require('../../../assets/images/techniqueBackgrounds/breathe.jpg')},
];
return (
<>
<StatusBar
backgroundColor={'#F5F5F5'}
translucent={false}
barStyle={'dark-content'}
/>
<Box style={styles.MainBox}>
<ScrollView>
<Box style={{height: '6%', alignItems: 'center'}}>
<Text style={styles.stepperTxt}>Create Habit</Text>
</Box>
<IconCircleBack
onPress={() => setHabitNavigation(0)}
style={{...styles.iconBack, top: '2.2%'}}
/>
<Box style={styles.choosenBox}>
<Box
style={styles.choosenButton}>
<Text style={{fontSize: 15, color: '#5D535C'}}>
{chooseSpan.but}
</Text>
</Box>
{chooseButton !== undefined ? (
<Box
style={styles.choosenButtonDynamic}>
<Text style={{fontSize: 15, color: '#5D535C'}}>
{techniques}
</Text>
</Box>
) : (
''
)}
</Box>
<Box style={{height: '6%', marginTop: '2%'}}>
<Text style={styles.headTxt}>Choose a technique</Text>
<Text
style={styles.subHeading}>
Create a habit from any one of your susbcribed techniques
</Text>
</Box>
<Box style={{height: 1050}}>
<Box style={{alignItems: 'center'}}>
{techniqueChooser.map((data, i) => {
return (
<TouchableHighlight
key={i}
underlayColor={'none'}
onPress={() => {
setChooseButton(i), setTechniques(data.button);
}}
style={styles.cardTechniques}>
<>
{chooseButton === i ? <IconCheck style={{position:'absolute',right:10,bottom:"10%",zIndex:1}} /> : ""}
<Image
style={styles.imageOptimism}
resizeMethod="scale"
resizeMode="cover"
source={data.src}
/>
<Image
style={{
...styles.imageBackdrop,
display: `${chooseButton === i ? 'none' : 'flex'}`,
}}
resizeMethod="scale"
resizeMode="cover"
source={require('../../../assets/images/techniqueBackgrounds/backdrop.png')}
/>
<Box
style={styles.buttonTechnique}>
<Text
style={{
fontSize: 14,
fontWeight: 'bold',
color: '#5D535C',
}}>
{data.button}
</Text>
</Box>
</>
</TouchableHighlight>
);
})}
</Box>
</Box>
</ScrollView>
<Box
style={{
position: 'absolute',
bottom: '3%',
width: '100%',
alignItems: 'center',
}}>
<Button
isDisabled={chooseButton !== undefined ? false : true}
style={{
...styles.button2,
backgroundColor: `${
chooseButton !== undefined ? '#36A2D0' : '#6D7A82'
}`,
}}
isLoadingText="Continue"
spinnerPlacement="end"
onPress={() =>{techniques === "Meditation" ? setHabitNavigation(4) : techniques === 'Breathe' ? setHabitNavigation(6) : setHabitNavigation(3)}}>
<MaterialIcons
name="arrow-forward-ios"
style={{
fontSize: 20,
color: `${chooseButton !== undefined ? 'white' : 'black'}`,
}}
/>
</Button>
</Box>
</Box>
</>
);
}