2

I wanna set a specific color for the text input marker on Android (shown on the image below), using the TextInput component from the react-native-paper library.

android text input marker

I've already tried the props: selectionColor, underlineColor, activeUnderlineColor, outlineColor, activeOutlineColor. But none of these works for my problem.

I've already tried to set the primary and accent colors on the theme used by the component, but that didn't work either.

This is my current code snippet:

import React, { useState } from 'react';

import styled from 'styled-components/native';
import { TextInput } from 'react-native-paper';

const Input = styled(TextInput)`
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-horizontal: 0px;
`;

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const theme = {
    colors: {
      text: 'white',
      placeholder: 'white',
      primary: '#0f0',
      accent: '#0f0',
      background: '#0f0',
      surface: '#0f0',
      disabled: '#0f0',
      backdrop: '#0f0',
      onSurface: '#0f0',
      notification: '#0f0',
    },
  };

  return (
    <>
      <Input
        autoComplete
        mode="flat"
        theme={theme}
        value={email}
        label='Email'
        onChangeText={(text: string) => setEmail(text)}
        selectionColor='#ff0'
        activeUnderlineColor='#ff0'
        underlineColor='#ff0'
      />
      <Input
        autoComplete
        mode="flat"
        theme={theme}
        value={password}
        label='Password'
        onChangeText={(text: string) => setPassword(text)}
        selectionColor='#f00'
        activeUnderlineColor='#f00'
        underlineColor='#f00'
      />
    </>
  );
}

export default LoginForm;

I'd be appreciate for any help.

bmelocarcalho
  • 57
  • 9

1 Answers1

1

Try:

 const theme = {
    colors: {
      onSurfaceVariant: "red",

    },
  };

https://callstack.github.io/react-native-paper/theming.html#theme-properties

Fausto T. Toloi
  • 166
  • 1
  • 6