React-Native while pressing customButton nothing happens but when i press return it works

Viewed 76

While pressing RoundButton component nothing happens, but when I press press return it works,

Here is my custom Button component

Custom Button:

import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, } from 'react-native';

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

Calling from component:

import React, {useState} from 'react';
import { Text, View, StyleSheet,TouchableHighlight } from 'react-native';
import {TextInput} from "react-native-paper";
import {RoundedButton} from '../../components/RoundedButton'

export const Focus = ({addSubject}) => {
  const [focusSubject, setFocusSubject] = useState(null);
  const [tempItem, setTempItem] = useState(null);
  return (
    <View style={styles.container}>
    <View style={styles.titleContainer}>
    <Text>Want something?</Text>
    <View  styles={styles.inputContainer} >
    <TextInput onSubmitEditing={({ nativeEvent }) => {
      setTempItem(nativeEvent.text);
addSubject(nativeEvent.text)
    }} />
    <RoundedButton size={100} title="+" onPress={()=> {addSubject(tempItem)}} />
    </View>
    </View>
    </View>
  );
}
1 Answers

You need to call onPress on TouchableOpacity

Custom Button:

import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, } from 'react-native';

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

In your component pass onButtonHandler

Calling from component:

import React, {useState} from 'react';
import { Text, View, StyleSheet,TouchableHighlight } from 'react-native';
import {TextInput} from "react-native-paper";
import {RoundedButton} from '../../components/RoundedButton'

export const Focus = ({addSubject}) => {
  const [focusSubject, setFocusSubject] = useState(null);
  const [tempItem, setTempItem] = useState(null);
  return (
    <View style={styles.container}>
    <View style={styles.titleContainer}>
    <Text>Want something?</Text>
    <View  styles={styles.inputContainer} >
    <TextInput onSubmitEditing={({ nativeEvent }) => {
      setTempItem(nativeEvent.text);
addSubject(nativeEvent.text)
    }} />
    <RoundedButton size={100} title="+" onButtonHandler={()=> {addSubject(tempItem)}} />
    </View>
    </View>
    </View>
  );
}
Related