TextInput

A basic TextInput component that should render nicely on any platform. Supports a good level of customization.

You can customization TextInput component with the Props

Usage#

import React, {FC} from 'react';
import {Body, TextInput} from 'qdmrncomponents';

const App: FC = () => {
    const [value,setValue] = React.useState('');
  return (
    <Body paddingAll={20} V_Aligin_center>
       <TextInput
            onChangeText={text => setValue(text)}
            value={value}
      />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for TextInput Component and it Inherits all TextInput Props, from React Native

borderColor#

borderColor props for apply borderColor to the textInput by default it is black type string

import React, {FC} from 'react';
import {Body, TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput borderColor="red" />
    </Body>
  );
};

borderRadius#

borderRadius props for apply borderRadius to the textInput by default it is 0 number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput borderRadius={10} />
    </Body>
  );
};

height#

height props for apply height to the textInput number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput height={55} />
    </Body>
  );
};

textColor#

textColor props for apply color to the font in textInput string

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput textColor="red" />
    </Body>
  );
};

textSize#

textSize props for apply size for the font in textInput number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput textSize={20} />
    </Body>
  );
};

paddingHorizontal#

paddingHorizontal props for apply padding horizontal for textInput number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput paddingHorizontal={20} />
    </Body>
  );
};

paddingVertical#

paddingVertical props for apply padding vertical for textInput number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput paddingVertical={20} />
    </Body>
  );
};

backgroundColor#

backgroundColor props for apply background color for textInput number

import * as React from 'react';
import {Body,TextInput} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body paddingAll={20} V_Aligin_center>
      <TextInput backgroundColor="red" />
    </Body>
  );
};

inlineStyle#

props give addition props to the Text element type Object