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