React-Native onSubmitEditing - Objects are not valid as a React Child-CodePudding

I am trying to get text input when it is returned so I don't have to continuously run an API on every key entry. The code works when I run on onChangePress, but when I change it to onSubmitEditing I get the error below the code.

export default function Search({navigation}) {
    const [search, setSearch] = useState('123')

    return (    
        <View style={styles.container}>
          <SafeAreaView>
            <View style={styles.header}>
              <TouchableOpacity 
                style={styles.back}
                onPress={() => navigation.goBack()}
              >
              <Ionicons name="arrow-back-circle-sharp" size={24} color="black" />
              </TouchableOpacity>
              <View style={styles.input}>
                <Feather
                  name="search"
                  size={20}
                  color="black"
                  style={{textAlign: 'center'}}
                />
                <TextInput
                  placeholder='Search for channels'
                  onSubmitEditing={(val) => setSearch(val)}
                />
              </View>
            </View>
          </SafeAreaView>
          <Text>{search}</Text>
          <StatusBar style="auto" />
        </View>
    );
}

Error:

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

CodePudding user response：

As described on react-native documentation onSubmitEditing returns an object on callback like ({ nativeEvent: { text, eventCount, target }}) => void.

So to set the text you must do

            onSubmitEditing={(val) => setSearch(event.nativeEvent.text)}