React-native-paper: 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;
    `,
  })};
`;