Web: Unwanted TextInput focus outline

[globophobe]

Ask your Question

I thought this would remove the focus outline style with react-native-web, but it doesn't 😞.

const styles = StyleSheet.create({
  textInput: {
    outlineStyle: "none",
    outlineWidth: 0,
    outlineColor: "transparent"
  }
});

<TextInput style={styles.textInput} />

How can I remove it?

[globophobe]

Fixed wtih Emotion Global Styles .

[actuallymentor]

Fixed wtih Emotion Global Styles .

Did you find a way the doesn't involve including a whole new library?

[timsonater]

This worked for me, no libs

<TextInput
   style={{outline: "none"}}
/>

[nandorojo]

I'm seeing this error when I do outline: none.

[seancheung]

This is a react native web issue rather than react-native-paper issue.

Here is a patch without a third-party library

import React from 'react';
import { Platform } from 'react-native';

export interface GlobalStyleProps {
  css: string;
}

const GlobalStyle: React.FC<GlobalStyleProps> = ({ css }) => {
  React.useEffect(() => {
    if (Platform.OS === 'web') {
      const style = document.createElement('style');
      style.textContent = css;
      document.head.append(style);
      return () => style.remove();
    }
  }, [css]);
  return null;
};

export default React.memo(GlobalStyle);

In your App.tsx:

<GlobalStyle css="input {outline: none;}" />

Note: This takes effects globally.

[sanghee-dev]

This worked for me!

import { Platform } from "react-native";

const TextInput = styled.TextInput`
  ${Platform.select({
    web: css`
      outline-style: none;
    `,
  })};
`;

[minhquan1313]

if you use typescript

import { TextInput, TextInputProps } from "react-native";

<TextInput
  style={
    {
      outline: "none",
    } as TextInputProps["style"]
  }
  {..._props}
/>;

add as ... to disable error message :>