We Keep Coding

Basic Beginner React-Native State Question

Hello guys I just started learning React-Native and I have a question about state.
I was practicing this concept trying to make a button that shows how many times I've pressed it.
My plan was to make a variable called clicks which will increase by 1 each time I press it and set the clickState to clicks. This is my code.
export default function App() {
const [clickState, setClicks] = useState(0)
let clicks = 0
return (
<View style = {styles.container}>
<StatusBar style="auto" />
<TouchableOpacity style={styles.button} onPress={()=>{setClicks(++clicks); console.log(clicks)}}>
<Text>Clicks : {clickState}</Text>
</TouchableOpacity>
</View>
);
}
this is the console
But apparently something is wrong and my clicks value goes random between 1 and 2 each time I click it instead of increasing by 1.
So I was curious about what I was doing wrong and why the values don't increase as I expected. I would also be glad if you showed how you would implement it if there is a better way.
Thanks guys.

You only need to update clickState, no need of variable clicks.
Also it won't rerender if we increment state value directly, so we should increment state by taking its previous state value like shown below
export default function App() {
const [clickState, setClicks] = useState(0)
return (
<View style = {styles.container}>
<StatusBar style="auto" />
<TouchableOpacity style={styles.button} onPress={()=>setClicks(prevState => prevState + 1)}>
<Text>Clicks : {clickState}</Text>
</TouchableOpacity>
</View>
);
}

When I use onPress, I would like to set both these states at the same time

What I have noticed is that either one of these onPress functions works when used alone. But I want them both to happen together. How could I do it?
onPress={()=>setGroupSelected(item.groupName) setModalVisible(false)}
I want to use setGroupSelected and setModalVisible at the same time. The entire block of code that uses the above line is as follows
<FlatList data={groups}
keyExtractor={item=>item.groupID.toString()}
renderItem={({item})=> <SelectionBoxComponent inputText={item.groupName}
onPress={()=>setGroupSelected(item.groupName) setModalVisible(false)} >
</SelectionBoxComponent> }
/>

One line arrow functions return the value indicated without a return statement.
Try changing this (check the onPress function change)
<FlatList data={groups}
keyExtractor={item=>item.groupID.toString()}
renderItem={({item})=> <SelectionBoxComponent inputText={item.groupName}
onPress={()=>setGroupSelected(item.groupName) setModalVisible(false)} >
</SelectionBoxComponent> }
/>
to this
<FlatList data={groups}
keyExtractor={item=>item.groupID.toString()}
renderItem={({item})=> <SelectionBoxComponent inputText={item.groupName}
onPress={()=> {
setGroupSelected(item.groupName);
setModalVisible(false);
}}>
</SelectionBoxComponent> }
/>

How to render something in an if statement React Native

Problem
I am using a flatlist in react native, and want to compare to variables in the flatlist, and render a text component if the two variables are equal, but render nothing if they are not. I've tried many methods of doing this, but they nothing has worked. I would love some help figuring out a way to do this! Thank you.

Couple ways that spring to mind straight away. Ill just assume what you are trying to compare but you can switch these variables out for whatever you please. First thing you could do is have your text be conditional inside of your Text component, EG
<Text>{this.state.variable == this.props.stuff ? "RENDER TEXT" : ""}</Text>
or, if you want to emit the Text component when variables are not equal, have a function inside of your class that will return the Text component conditionally
renderMessage = () => {
if(this.state.variable == "stuff"){
return(
<Text>They were equal</Text>
);
}else{
return(
<View></View> // OR WHATEVER YOU WANT HERE
);
}
}
...
//Then in your render function
....
<View style = {styles.whatever}>
{this.renderMessage()}
</View>

just compare your data in renderItem method accordingly
<FlatList
data={this.props.data}
renderItem={this._renderItem}
/>
_renderItem = ({item}) => (
if(item=='somthing'){
return <Text> your test </Text>
}else{
return <Text>some other text</Text>
}
);
if you want to compare your text in component then
<View>
{
item.data == 'somthing'
?
<Text>if</Text>
:
<Text>else</Text>
}
</View>

create multiple buttons in a view via loop

I want to create multiple custom buttons for my react-native app.
I'm using an array with all the informations in it and I want to iterate over all buttons in the array and create all buttons in one single view.
I tried something like this:
<View>
for( let i=0; i<numberButtons; i++) {
<TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]} >
<Image
style={[styles.image, this.props.imageStyle]}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
</TouchableOpacity>
}
</View>
That doesn't seem to work. I get errors from the react-native framework so I guess you can't do js in a view?
How can I do this?

You can do it like this:
renderButtons = () => {
const buttons = [];
for( let i = 0; i < numberButtons; i++) {
buttons.push(
<TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]}>
<Image
style={[styles.image, this.props.imageStyle]}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
</TouchableOpacity>
)
}
return buttons;
}
render() {
return (
<View>
{this.renderButtons()}
</View>
)
}

Long press on custom checkbox

I'm trying to create a long-press handler on the checkbox. The package with the component is https://www.npmjs.com/package/react-native-checkbox — i think it is default one. The problem is that checkbox intercepts onPressIn and onPressOut events and my TouchableWithoutFeedback component doesn't emit anything. Here is the code:
var pressStart = 0;
const pressTimeout = 400;
function pressIn() {
alert(0);
pressStart = parseInt((new Date()).getTime() / 1000);
}
function pressOut() {
var pressEnd = parseInt((new Date()).getTime() / 1000);
if (pressEnd - pressStart < pressTimeout) return;
alert(1);
}
return (
<View style={style.container}>
<TouchableWithoutFeedback onPressIn={pressIn} onPressOut={pressOut}>
<View>
{/*<Text>asdasdasd</Text>*/}
<CheckBox checked={this.state.done} labelStyle={style.checkbox} label={this.state.name} onChange={toggleChecked} />
</View>
</TouchableWithoutFeedback>
</View>
);
Also, if i use Text component instead of CheckBox — it fires pressIn event, but pressOut doesn't work (i see alert(0), but not alert(1)).

Ok, at first, i've created a fork from the react-native-checkbox package that supports onPressIn and onPressOut events:
https://www.npmjs.com/package/react-native-checkbox-touch-events
But I think it will be useless, cause you can do some like this (I don't promise it works):
<TouchableWithoutFeedback delayPressIn={0} onPressIn={pressIn} onPressOut={pressOut}>
<View>
<CheckBox onPress={press} />
</View>
</TouchableWithoutFeedback>
Anyway, I will use my package, I'm too lazy to test this solution and don't want to get disappointed with my work.
And also: don't divide getTime() by 1000, if you want milliseconds...