Search code examples
react-nativeexpo

How to hide the react native focus input border?

There would be always a blue border when the text focus. I have already set style borderWidth: 0, but there is still a border. I also tried to set the border color, it won't work either.

Any hint?

Nothing special, I starts from expo tab boilerplate. Also I found the autofocuse won't be able to triggered either :(

import * as React from "react";
import { StyleSheet } from "react-native";
import { TextInput } from "react-native-gesture-handler";

import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";

export default function TabOneScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      <TextInput
        autoFocus={true}
        placeholder="here is a input"
        style={{ padding: 4, borderBottomWidth: 2 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

enter image description here

Solution

  • Can you try setting outlineStyle to 'none'. This will remove all border styles

    <TextInput style={{outlineStyle: 'none' }} />