SearchBar has no Cancel button on iOS

[lsarni]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I experienced it on my project, but the bug is visible on the example on the documentation:

import React, { useState } from 'react';
import { SearchBar } from '@rneui/themed';
import { View, Text, StyleSheet } from 'react-native';

type SearchBarComponentProps = {};

const SwitchComponent: React.FunctionComponent<SearchBarComponentProps> = () => {
const [search, setSearch] = useState("");

const updateSearch = (search) => {
  setSearch(search);
};

return (
  <View style={styles.view}>
    <SearchBar
      placeholder="Type Here..."
      onChangeText={updateSearch}
      value={search}
    />
  </View>
);
};

Expected behavior

The "Cancel" button should appear on focus on iOS, and always if showCancel is set to true.

Describe the bug

The "Cancel" button doesn't appear on focus, or when showCancel is set to true

Steps To Reproduce

1. Go to https://snack.expo.dev/@lsarni/rne-searchbar
2. Start the app on iOS
3. Write on the search bar
4. See that no cancel button shows up

Screenshots

Your Environment

`npx @rneui/envinfo`

Global Dependencies:

No related dependency found

Local Dependencies:

• @rneui/base : ^4.0.0-rc.7
• @rneui/themed : ^4.0.0-rc.7
• expo : ^50.0.0
• react : 18.2.0
• react-native : 0.73.2
• @types/react : 18.2.0

[khushal87]

Hey @lsarni, this is working fine as expected, even on the snack that you shared.

[khushal87]

What is your version of @expo/vector-icons?

[lsarni]

@khushal87 I don't mean the cross/cancel icon, which is showing correctly, but the cancel button. Like it's shown on the platform specific preview here: