Question 244965 in React native Question posted in
The official React Native documentation can be found here.

Touchabble Opacity Not working-react native

The touchableOpacity component doesn’t word and I don’t know why
The First Component App.tsx

function App(): JSX.Element {
  const [focuseSubject, setFocusSubject] = useState(null)
  
  return (
    <View style={styles.container}>
      { focuseSubject ? <Text>{focuseSubject} </Text> : <Focus addSubject={setFocusSubject} /> }
      
      <Text style={ {color: 'white'} }>{ focuseSubject }</Text>
    </View>
  );
}

The Second Component Focus.tsx

function Focus({ addSubject }) {
    const [tempItem, setTempItem] = useState('');
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>What would you lie to focus on?</Text>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              onSubmitEditing={(event) => {
                setTempItem(event.nativeEvent.text);
              }}
            />
            <RoundedButton
              title="+"
              size={50}
              onPress={() => {
                addSubject(tempItem);
              }}
            />
            {/* <Text>{ tempItem }</Text> */}
          </View>
        </View>
      </View>
    );
}

The Third Component

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

if I add onSubmitEditing={addSubject(event.nativeEvent.text)} it works fine but I want to use the button,
Note: TochableOpacity imported from react-native

Thank You

Tags:

2

Answers


  1. 0

    You forgot to put the passed props into the <TouchableOpacity> component.

    function RoundedButton({style = {}, textStyle = {}, size = 125, ...props}) {
  return (
    <TouchableOpacity 
      onPress={props.onPress}
      style={[styles(size).radios, style]}
    >
      <Text style={[styles(size).text, textStyle]}>
        {props.title}
      </Text>
    </TouchableOpacity>
  );
}
    Login or Signup to reply.
  2. 0

    You need to pass the onPress props of TouchableOpacity from RoundedButton:

    function RoundedButton({style = {}, textStyle = {}, size = 125, ...props}) {
  return (
    <TouchableOpacity style={[styles(size).radios, style]} onPress={props.onPress}>
      <Text style={[styles(size).text, textStyle]}>
        {props.title}
      </Text>
    </TouchableOpacity>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search