React Native how to remove the blue glow outline on input component - react-native

Question

I have a react native project (react native for macOS) I am using the input component but notice there is a blue outline. Not sure how to remove it. I am using Native base input component which I am told it's using the react native input component. How can I remove the ugly blue outline when focus. I am mainly trying to remove the one that is square
import React from 'react';
import {Icon, Input} from 'native-base';
import Ionicons from 'react-native-vector-icons/Ionicons';
const SearchBar = () => {
return (
<Input
variant="rounded"
size="xs"
// w={{
// base: '75%',
// md: '25%',
// }}
InputLeftElement={
<Icon
as={<Ionicons name="ios-search" />}
size={5}
ml="2"
color="muted.400"
/>
}
placeholder="Search"
/>
);
};
export default SearchBar;

Answer 1

When using a React native TextInput component the css styling outline: "none" can be used to remove the outline on focus. This can be done by passing it directly into the style prop.
<View style={styles.body}>
<TextInput
style={{ outline: "none" }}
placeholder="Text"
onChangeText={(newText) => setText(newText)}
value={text}
/>
</View>
);
}
However since you are using a custom component you will need to make sure that the styles are passed to the component.