We Keep Coding

React Native: view not reacting at state changes

in my Tinder like react-native app I have a huge list of tags that people can add to their profile when they click on a tag, I want the tags the user adds to be a different color however, the background color is not changing... only time everything looks as it should is when I change the view/code and the component refreshes, then the colored tags appear.
This is my code:
const [selectedItems, setSelectedItems] = useState([]);
const addItem = (id) =>
{
console.log(id);
if(selectedItems.includes(id))
{
let index = selectedItems.findIndex(interest => interest == id);
if(index > -1)
{
let selectedInterests = selectedItems;
selectedInterests.splice(index, 1)
setSelectedItems(selectedInterests);
}
}
else
{
if(selectedItems.length < 10)
{
let selectedInterests = selectedItems;
selectedInterests.push(id);
setSelectedItems(selectedInterests);
}
}
};
{root.userStore.tags.map((item,index) => {return (
<Text key={item.id} onPress={ ()=>{ addItem(item.id) } } style={{ fontSize:17,padding:6,paddingLeft:10,paddingRight:10, ...selectedItems.includes(item.id) ? { color:'white', borderColor:'#E13545',backgroundColor:'#E13545' } : { color:'rgb(100,100,100)',borderColor:'rgba(0,0,0,0.1)',backgroundColor:'white' },borderRadius:35,borderWidth:1,margin:5 }}>{I18n.t(item.title)}</Text>
)
})}
Thanks in advance

Something does not appear to be correct with your destructuring, to use multiple styles you can try using a styles array, I did not get a chance to run this but should work. You can check documentation of the style array here, you may also consider using a flatlist for this if possible
{
root.userStore.tags.map((item, index) => {
return (
<Text
key={item.id}
onPress={() => {
addItem(item.id);
}}
style={[
{
fontSize: 17,
padding: 6,
paddingLeft: 10,
paddingRight: 10,
borderRadius: 35,
borderWidth: 1,
margin: 5,
},
selectedItems.includes(item.id)
? {
color: "white",
borderColor: "#E13545",
backgroundColor: "#E13545",
}
: {
color: "rgb(100,100,100)",
borderColor: "rgba(0,0,0,0.1)",
backgroundColor: "white",
},
]}
>
{I18n.t(item.title)}
</Text>
);
});

Stop re-rendering mapped lists when parent state changes

How do I avoid mapped child components from re-rendering at onParent state change?
I have already tried memo in child component and useCallback in parent component to memoise function that updates the state with an empty array as dependencies. I have also tried to use option?.id as a key to each child component. None of these seem to work.
Parent.js
// imports and stuff
const [passedAnswers, setPassedAnswers] = useState(item?.options);
// const [showScore, setShowScore] = useState(false);
console.log("===========Parent component called ======================");
// const [correct, setCorrect] = useState(false);
const changeAnswer = useCallback((id) => {
setPassedAnswers((prev) =>
prev.map(
(el) => (el?.id === id ? { ...el, isSeclected: !el?.isSeclected } : el)
)
);
}, []);
return (<>
{
passedAnswers?.map((option, index) => {
return (
<CheckBoxQuiz
key={option?.id}
value={option}
index={index}
isSelected={!!option?.isSeclected}
changeAnswer={changeAnswer}
disabled={answered}
/>
);
})
}
</>)
QuizBox.js
import React, { memo, useEffect } from "react";
import { View, Text } from "react-native";
import { ICONS } from "../../assets";
import { TouchableBloc } from "../../components/bloc";
import { theme } from "../../constants/theme";
function CheckBoxQuiz({
value,
isSelected = false,
changeAnswer,
disabled = false,
}) {
const color =
isSelected == true && value.isCorrect == true
? theme.COLORS.green
: isSelected == false && value.isCorrect == true
? theme.COLORS.green
: "red";
console.log(`==child component called ${value.id}==`);
return (
<TouchableBloc
// key=r{index}
onPress={() => {
changeAnswer(value?.id);
}}
disabled={disabled}
containerStyle={{
marginHorizontal: 0,
flexDirection: "row",
borderRadius: 10,
borderColor: disabled
? color
: isSelected
? theme.COLORS.green
: "#E6E6E6",
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: isSelected && "#FAFFF9",
marginVertical: 5,
}}
>
<Text
style={{
flexGrow: 0.98,
flex: 1,
fontFamily: theme.FONTS.PoppinsSemiBold,
fontSize: 16,
}}
>
{value?.value}
</Text>
<View
style={{
width: 20,
height: 20,
borderWidth: 1,
borderColor: disabled
? color
: isSelected
? theme.COLORS.green
: "#E8E8E8",
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
}}
>
{isSelected && (
<Icon
name="check"
size={10}
color={disabled ? color : theme.COLORS.green}
/>
)}
</View>
</TouchableBloc>
);
}
export default memo(CheckBoxQuiz);

How to get dynamic ref and focus in TextInput component on React Native

Hello everyone and thank you in advance.
I have a screen, where I dynamically generate TextInput (the default number of generated textInput is 4), but from the parent component you can indicate how many inputs you want to have in the view.
I have managed to dynamize the generation of inputs, but I need to dynamize the references and I can't find a way.
The way it is at the moment, it works perfect for 4 inputs, but if I create it from the parent component with 2 inputs, it breaks.
This is the code:
import React, { useRef } from 'react'
import { TextInputProps, View, TextInput } from 'react-native'
interface iPinCode extends TextInputProps {
onComplete: (code: string) => void
length?: number
}
const PinCode: React.FunctionComponent<iPinCode> = ({ onComplete, length }) => {
const inputStyle = {
height: 75,
width: 50,
fontSize: 26,
color: '#FFF',
backgroundColor: '#4B4B4B',
borderRadius: 15,
padding: 8,
margin: 4,
}
const _getInputs = (length: number) => {
let inputs: JSX.Element[] = []
let pin: string[] = []
let refFirstInput = useRef()
let refSecondInput = useRef()
let refThirdInput = useRef()
let refFourthInput = useRef()
for (let i = 0; i < length; i++) {
inputs.push(
<TextInput
key={i}
style={[inputStyle, { textAlign: 'center' }]}
onChangeText={text => {
text.length >= 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
i === 0
? text.length > 0 && refSecondInput.current.focus()
: i === 1
? text.length > 0 && refThirdInput.current.focus()
: i === 2
&& text.length > 0 && refFourthInput.current.focus()
console.log('PIN: ', pin)
}}
value={pin[i]}
onKeyPress={({ nativeEvent }) => {
nativeEvent.key === 'Backspace' &&
i === 3 && refThirdInput.current.focus() ||
i === 2 && refSecondInput.current.focus() ||
i === 1 && refFirstInput.current.focus()
}}
secureTextEntry
keyboardType="numeric"
maxLength={1}
returnKeyType={i === 3 ? 'done' : 'next'}
onSubmitEditing={() => { onComplete(pin.join('')); console.log('PIN TO SEND: ', pin.join(''))}}
ref={
i === 0
? refFirstInput
: i === 1
? refSecondInput
: i === 2
? refThirdInput
: i === 3
&& refFourthInput
}
autoFocus={i === 0 && true}
/>
)
}
return (
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
{inputs}
</View>
)
}
return <>{_getInputs(length || 4)}</>
}
export default PinCode
Now works perfectly with 4 inputs, but breack with other number of inputs.
Need dynamic refs to pass inside for loop and use it in onChangeText and onKeyPress of TextInput component.
Thanks a lot.

I was implements this in OTP input, first we need to create a object that have the all refs.
const inputsRef = React.useRef(inputs.map(() => React.createRef<TextInput>()));
The inputs are an array with the number of elements, in your component add this:
ref={inputsRef.current[index]}
and for access to the reference, use this :
inputsRef?.current[index]?.current?.focus();

Soooolved!
import React, { useRef } from 'react'
import { TextInputProps, View, TextInput } from 'react-native'
interface iPinCode extends TextInputProps {
onComplete: (code: string) => void
length?: number
}
const PinCode: React.FunctionComponent<iPinCode> = ({ onComplete, length }) => {
const inputStyle = {
height: 75,
width: 50,
fontSize: 26,
color: '#FFF',
backgroundColor: '#4B4B4B',
borderRadius: 15,
padding: 8,
margin: 4,
}
const _getInputs = (length: number) => {
let inputs: JSX.Element[] = []
let pin: string[] = []
const mapRef: any = []
for (let index = 0; index < length; index++) {
mapRef.push(useRef())
}
for (let i = 0; i < length; i++) {
inputs.push(
<TextInput
key={i}
style={[inputStyle, { textAlign: 'center' }]}
onChangeText={text => {
text.length === 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
i < length - 1 && text.length > 0 && mapRef[i + 1].current.focus()
text.length === 0 && i > 0 && mapRef[i].current.focus()
}}
value={pin[i]}
onKeyPress={({ nativeEvent }) => {
nativeEvent.key === 'Backspace' &&
i > 0 && mapRef[i - 1].current.focus()
}}
secureTextEntry
keyboardType="numeric"
maxLength={1}
returnKeyType={length - 1 ? 'done' : 'next'}
onSubmitEditing={() => onComplete(pin.join(''))}
ref={mapRef[i]}
autoFocus={i === 0}
/>
)
}
return (
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
{inputs}
</View>
)
}
return <>{_getInputs(length || 4)}</>
}
export default PinCode

React-hooks handling mutliple buttons state on click

I have 5 buttons in my app which I would like to change the background color based on button states, so now when I click one button it affects all the buttons (toggle-class), not only that I need to change the button color but also I need to hide and show data for each button, so I am using condition rendering, the default tab is social media. so, for example, u click button 1 it changes the background color and it shows div withe information, etc
Here is what I have so far
import React, { useState, useEffect, useRef } from 'react';
function Mata() {
const [isBlack, setIsBlack] = useState(0);
const [tab, setTab] = useState('socialmedia');
const handleBtn1 = (e) =>{
e.preventDefault();
setIsBlack(!isBlack);
setTab('data1);
}
const handleBtn2 = (e) =>{
e.preventDefault();
setIsBlack(!isBlack);
setTab('data2');
}
const handleBtn3 = (e) =>{
e.preventDefault();
setIsBlack(!isBlack);
setTab('data3');
}
const handleBtn4 = (e) =>{
e.preventDefault();
setIsBlack(!isBlack);
setTab('data4');
}
const handleBtn5 = (e) =>{
e.preventDefault();
setIsBlack(!isBlack);
setTab('data5');
}
return (
<div className="container">
<button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn1 ${isBlack && activeTab}`} onClick={handleBtn1}>btn1</button>
<button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn2 ${isBlack && activeTab}`} onClick={handleBtn2}>btn2</button>
<button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn3 ${isBlack && activeTab}`} onClick={handleBtn3}>btn3</button>
<button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn4 ${isBlack && activeTab}`} onClick={handleBtn4}>btn4</button>
<button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn5 ${isBlack && activeTab}`} onClick={handleBtn5}>btn5</button>
{tab === 'socialmedia' && <>
....data
</div>
{tab === 'data1' && <>
....data
</div>
............
..........
</div>
)
}
export default Mata
What do I need to change to get this working?

You need individual state for each button. I suggest using a map to store a button id and a boolean value for whether it is "black" or not, i.e. the click handler simply toggles a boolean value. I don't know if it was a typo in copy/pasting code to SO, but the react state needs to be declared in in the functional component body.
const [isBlack, setIsBlack] = useState({});
You can also use a single click handler by converting it to a curried callback, taking and enclosing in scope the button id. This uses a functional state update to shallowly copy existing state and updates the value of the enclosed button id.
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId],
}));
};
Complete code
function Mata() {
const [activeTab, setActiveTab] = useState("activeTab");
const [isBlack, setIsBlack] = useState({});
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId]
}));
};
return (
<div className="container">
<button
style={{ backgroundColor: isBlack["btn1"] ? "#262626" : "#F3F3F3" }}
className={`btn1 ${isBlack["btn1"] && activeTab}`}
onClick={handleBtn("btn1")}
>
btn1
</button>
<button
style={{ backgroundColor: isBlack["btn2"] ? "#262626" : "#F3F3F3" }}
className={`btn2 ${isBlack["btn2"] && activeTab}`}
onClick={handleBtn("btn2")}
>
btn2
</button>
<button
style={{ backgroundColor: isBlack["btn3"] ? "#262626" : "#F3F3F3" }}
className={`btn3 ${isBlack["btn3"] && activeTab}`}
onClick={handleBtn("btn3")}
>
btn3
</button>
<button
style={{ backgroundColor: isBlack["btn4"] ? "#262626" : "#F3F3F3" }}
className={`btn4 ${isBlack["btn4"] && activeTab}`}
onClick={handleBtn("btn4")}
>
btn4
</button>
<button
style={{ backgroundColor: isBlack["btn5"] ? "#262626" : "#F3F3F3" }}
className={`btn5 ${isBlack["btn5"] && activeTab}`}
onClick={handleBtn("btn5")}
>
btn5
</button>
</div>
);
}
There is a lot of repeated code, so a more DRY version where active tab and buttons are passed as props.
function Mata({ activeTab = '', buttons }) {
const [isBlack, setIsBlack] = useState({});
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId]
}));
};
return (
<div className="container">
{buttons.map(btn => (
<button
style={{ backgroundColor: isBlack[btn] ? "#262626" : "#F3F3F3" }}
className={`btn1 ${isBlack[btn] && activeTab}`}
onClick={handleBtn(btn)}
>
{btn}
</button>
))}
</div>
);
}
Used as such
const buttons = ["btn1", "btn2", "btn3", "btn4", "btn5"];
...
<Mata buttons={buttons} />
Edit
Seems you are really creating a "tab manager". I suggest lofting state to the parent and converting Mata to a "dumb" component that simply renders the "tab" buttons. Takes 3 props: an active tab index, array of buttons, and a state update callback.
function Mata({ activeTab = -1, buttons, setActiveTab }) {
return (
<div className="container">
{buttons.map((btn, i) => {
const isActive = i === activeTab;
return (
<button
key={btn.id}
style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
className={`${btn.id} ${isActive && activeTab}`}
onClick={() => setActiveTab(i)}
>
{btn.id}
</button>
);
})}
</div>
);
}
Example tabs data
const tabs = [
{ id: "btn1", data: "data1" },
{ id: "btn2", data: "data2" },
{ id: "btn3", data: "data3" },
{ id: "btn4", data: "data4" },
{ id: "btn5", data: "data5" }
];
Example usage
<Mata activeTab={activeTab} buttons={tabs} setActiveTab={setActiveTab} />
{activeTab === -1 ? (
<div>Social Media</div>
) : (
<div>{tabs[activeTab].data}</div>
)}
Adding "Icons"
Similar to Choosing the Type at Runtime
If SVG icons are not already react components, wrap them into a simple functional component
const Icon1 = () => <svg>...</svg>;
Add an icon field to the tabs data and set the value to the icon component
const tabs = [
{ id: "btn1", data: "data1", icon: Icon1 },
{ id: "btn2", data: "data2", icon: Icon2 },
{ id: "btn3", data: "data3", icon: Icon3 },
{ id: "btn4", data: "data4", icon: Icon4 },
{ id: "btn5", data: "data5", icon: Icon5 }
];
And destructure and rename to render
function Mata({ activeTab = -1, buttons, setActiveTab }) {
return (
<div className="container">
{buttons.map((btn, i) => {
const isActive = i === activeTab;
const { icon: Icon, id } = btn; // <-- rename icon -> Icon
return (
<button
key={id}
style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
className={`${id} ${isActive && activeTab}`}
onClick={() => setActiveTab(i)}
>
<Icon /> {id} // <-- render icon component
</button>
);
})}
</div>
);
}

Why are you doing this
const [isBlack, setIsBlack] = useState(0);
instead of doing this ?
const [isBlack, setIsBlack] = useState(false);
Also to make use of useState you have to edit your code like the following, as hooks can only be called inside of the body of a function component.
import React, { useState, useEffect, useRef } from "react";
function Mata() {
const [isBlack, setIsBlack] = useState(false); // correction here
const handleBtn1 = e => {
e.preventDefault();
setIsBlack(!isBlack);
};
const handleBtn2 = e => {
e.preventDefault();
setIsBlack(!isBlack);
};
const handleBtn3 = e => {
e.preventDefault();
setIsBlack(!isBlack);
};
const handleBtn4 = e => {
e.preventDefault();
setIsBlack(!isBlack);
};
const handleBtn5 = e => {
e.preventDefault();
setIsBlack(!isBlack);
};
return (
<div className="container">
<button
style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
className={`btn1 ${isBlack && activeTab}`}
onClick={handleBtn1}
>
btn1
</button>
<button
style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
className={`btn2 ${isBlack && activeTab}`}
onClick={handleBtn2}
>
btn2
</button>
<button
style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
className={`btn3 ${isBlack && activeTab}`}
onClick={handleBtn3}
>
btn3
</button>
<button
style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
className={`btn4 ${isBlack && activeTab}`}
onClick={handleBtn4}
>
btn4
</button>
<button
style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
className={`btn5 ${isBlack && activeTab}`}
onClick={handleBtn5}
>
btn5
</button>
</div>
);
}
export default Mata;

Rerender Component on Function Return

I have a class function that filters my props then uses it to render a deckswiper. The problem is that the function doesn't complete by the time the deckswiper renders so it renders a blank deckswiper. Is there a way that I can either make it rerender when the deck is complete or make the function asynchronous? Or should I be filtering this data elsewhere? When I first refresh the page the deckswiper is blank, then if I click my button to add more data it seems to work.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container, View, DeckSwiper, Text, Spinner, Button, Icon } from 'native-base';
import { findDogs, addDog, blacklistDog } from '../actions';
import SwipeDogItem from './SwipeDogItem';
class SwipeDogSelect extends Component {
componentWillMount() {
this.props.findDogs();
}
shouldComponentUpdate(nextProps) {
if(nextProps.blacklist !== this.props.blacklist) {
return false;
}
return true;
}
dogBreedString(breed) {
if (Array.isArray(breed)) {
let breedString = '';
for (let i = 0; i < breed.length; i++) {
breedString += `${breed[i].$t}, `;
}
return breedString.slice(0, -2);
}
return breed.$t;
}
filterDogs() {
const { dogs, gender, selectedBreeds, blacklist, size } = this.props;
return dogs.filter((pet) => {
return blacklist.indexOf(pet.id.$t) === -1 &&
(selectedBreeds > 248 || Object.values(pet.breeds.breed).filter(val => !selectedBreeds.includes(val)).length < 1) &&
(gender === 'either' || pet.gender.$t === gender) &&
(size === 'any' || pet.size.$t === size);
});
}
renderDeckSwiper() {
console.log(this.props.dogs);
if (this.props.findingDogs || typeof this.props.dogs === 'string') {
return (<Spinner color='black' />);
} else if (this.props.dogs === undefined) {
return (
<Text>No dogs found.</Text>
);
}
return (
<DeckSwiper
ref={mr => (this._deckSwiper = mr)}
dataSource={this.filterDogs()}
renderItem={dog => {
return (
<SwipeDogItem
dog={dog}
breed={this.dogBreedString(dog.breeds.breed)}
/>
);
}}
renderEmpty={() => {
return (<Text>No dogs found. Try less filters or refreshing.</Text>);
}}
onSwipeRight={(dog) => { this.props.addDog(dog); }}
onSwipeLeft={(dog) => { this.props.blacklistDog(dog.id.$t); }}
loop={false}
/>
);
}
render() {
return (
<Container>
<View>
{this.renderDeckSwiper()}
</View>
<View
style={styles.buttonViewStyles}
>
<Button
style={styles.buttonsStyles}
rounded
large
onPress={() => {
this.props.blacklistDog(this._deckSwiper._root.state.selectedItem.id.$t);
this._deckSwiper._root.swipeLeft();
}}
>
<Icon style={styles.buttonIconStyles} name="close" fontSize='40' color='red' />
</Button>
<Button
warning
rounded
style={styles.buttonsStyles}
large
onPress={() => this.props.findDogs()}
>
<Icon style={styles.buttonIconStyles} name='refresh' />
</Button>
<Button
rounded
style={styles.buttonsStyles}
large
danger
color='red'
onPress={() => {
this.props.addDog(this._deckSwiper._root.state.selectedItem);
this._deckSwiper._root.swipeLeft();
console.log(this._deckSwiper._root);
}
}
>
<Icon style={styles.buttonIconStyles} color='red' name="heart" active />
</Button>
</View>
</Container>
);
}
}
const styles = {
buttonsStyles: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
alignItems: 'center',
justifyContent: 'center',
width: 75,
height: 75,
borderRadius: 100,
marginTop: 100,
},
buttonViewStyles: {
flexDirection: "row",
flex: 1,
position: "absolute",
bottom: 15,
left: 15,
right: 15,
justifyContent: "space-between",
padding: 15
},
buttonIconStyles: {
fontSize: 45,
}
};
const mapStateToProps = state => {
const { selectedBreeds, gender, size } = state.settings;
const { dogs, findingDogs } = state.findDogsReducer;
const { blacklist } = state.dogs;
return {
dogs,
findingDogs,
blacklist,
selectedBreeds,
gender,
size
};
};
export default connect(mapStateToProps, { findDogs, addDog, blacklistDog })(SwipeDogSelect);

I ended up switching to another swiper because native base's swiper was causing the issue.