Long press on custom checkbox - javascript

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...

Related

How to get the position of a moving element in React Native

I am currently trying to develop an app with draggable elements using React Native and the library react Native draggable (https://www.npmjs.com/package/react-native-draggable).
My goal is to get the position of my Draggable element. (So I can change their color depending on where it is on the screen).
I tried different method but nothing worked for me. Here is the last thing I tried :
return (
<View>
<Draggable
onDragRelease={event =>
{const layout = event.nativeEvent.layout;
console.log('x:', layout.x);
console.log('y:', layout.y);
}
}
x={positionX}
y={positionY}
renderSize={56}
renderColor='#BDFF00'
renderText={'Drag me'}
// onDrag={getPosition}
/>
</View>
)
The code above returns this error (TypeError: undefined is not an object (evaluating 'layout.x'))
I also tried to do this :
const getPosition = (event) => {
console.log(event.locationX)
setPositionX(event.locationX)
setPositionY(event.locationY)
};
const changerColorFunction = () => {
}
return (
<View>
<Draggable
x={positionX}
y={positionY}
renderSize={56}
renderColor='#BDFF00'
renderText={'Drag me'}
onDrag={getPosition}
/>
</View>
)
Based on the react native Draggable documentation, but it is not working too. I think, I didn't fully understand how it should be working. Any help would be great.

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>
);
}

How to cause a slight delay of conditional rendering in react-native

I want to delay the conditional rendering of the progreeBar Component to 1.5 sec if the below condition is true
the method that I have already tried I try using setTimeOut with use effect but that didn't work also I don't know if I implemented this method right so any help will be welcome too.
function UploadScreen({ onDone, progress = 0.23, visible = false }) {
var progressWidth = progress;
return (
<Modal visible={visible}>
<View style={styles.container}>
{progress < 1 ? (
<Progress.Bar
color={colors.primary}
progress={progressWidth}
width={200}
/>
) : (
<LottieView
autoPlay
loop={false}
onAnimationFinish={onDone}
source={require("../assets/animations/done.json")}
style={styles.animation}
/>
)}
</View>
</Modal>
);
}
useDebounce
Maybe this can help u

onPress doesn't detect props of touchable opacity in react native

onPress doesn't show me the id of my touchable opacity component when I press on it. He just shows me undefined.
render() {
var rows = [];
var i = 0;
while(i<5){
rows.push(<TouchableOpacity id={i} activeOpacity={0.9} onPress={() => alert(this.props.id)}>
<View>
</View>
</TouchableOpacity>);
i++;
}
return {rows}
}
I want to when I press on it, it shows the id of touchable opacity. Please help me
The component you have for this render() function would need to have a prop id for this to show an alert, but I think you are wanting to show each value of i. Due to i never going out of scope within this function (as it is var), if you attempted to just do alert(i) it would show 5 for each button, but if you use const inside the while to store the current value of i, each button will have the correct value:
while (i < 5) {
const temp = i;
rows.push(
<TouchableOpacity
id={i}
activeOpacity={0.9}
onPress={() => alert(temp)}
>
<View />
</TouchableOpacity>,
);
i++;
}
You can't use a prop you are assigning in another prop you are assigning like you were trying to do.

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>

Categories