Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

241
Views
onPress event is not working with custom button in my React Native code?

I'm working on a React Native project as a beginner. I'm creating a custom button called "RoundedButton" using touchableOpacity. But after creating this button when I use this and try to trigger an event using onPress like <RoundedButton onPress = {some function}/> it does not work. Here is my code:

my RoundedButton.js code:

import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';
import {colors} from '../utils/colors';

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
    <TouchableOpacity style ={[styles(size).radius, style]}>
      <Text style = {[styles(size).text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  )

};

my Timer.js code where I uses the above custom button:

import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {colors} from '../../utils/colors';
import {fontSizes, spacing} from '../../utils/sizes'
import {Countdown} from '../../components/Countdown';
import {RoundedButton} from '../../components/RoundedButton';

export const Timer = ({focusSubject}) => {
  const [isStarted, setIsStarted] = useState("false");
  const onPress = () => setIsStarted("true");
  
  return (
    <View style={styles.container}>
      <View style={styles.countdown}>
        <Countdown isPaused={!isStarted}/>
      </View>      
      <View>
        <Text style={styles.title}>Focusing on: </Text>
        <Text style={styles.task}>{focusSubject}</Text>
      </View>    
      <RoundedButton title="Start" size={50} onPress={onPress}/> 
      <Text style={{color: 'white'}}>{isStarted ? "True" : "False"}</Text>
    </View>    
  )
};

I have not included styles code to make it simpler to find the issue. I want to know the correct method to use onPress functionality in React Native. Please help as soon as possible. No error is shown, App is working but the pressing event is not working, so I am not able to find out the actual issue.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

This is because you haven't passed onPress to TouchableOpacity. Just pass the prop and it should work just fine.

<TouchableOpacity style ={[styles(size).radius, style]} onPress={props.onPress}>
      <Text style = {[styles(size).text, textStyle]}>{props.title}</Text>
</TouchableOpacity>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!