onPress 事件不适用于我的 React Native 代码中的自定义按钮？

Question

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.

Answer 1

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>