react-native-text-input-material-swift-ui v1.0.3

react-native-text-input-material-swift-ui

A TextInput component customized to appear in material design on android e swift ui in ios

Installation

npm install react-native-text-input-material-swift-ui

Usage

Container

Creates a container for the screen and it will adapt the background color to the OS

import  *  as  React  from  'react'
   import { Container} from  "react-native-text-input-material-swift-ui"

   export  default () => {
    return (
	    <Container>
		    {/* Content of the form screen goes here */}
	    </Container>
	)
}

Props

TextInput

This componet is a standard React Native text input that will have different styles applied dipending on the OS: on an android device it will obey the matirial design guidelines and in ios it will obay the Swift UI guidelines.

import  *  as  React  from  'react'
import TextInput, { Container } from  "react-native-text-input-material-swift-ui"

export  default () => {
	// State
	const [nome, setNome] = React.useState('');
	
	return (
	    <Container>
		    <TextInput
				onChangeText={name => setName(name)}
				label='Name'
				defaultValue={name}
			/>
			{/* Other input components */}
	    </Container>
	)
}

Props

it also accept all the React Native TextInput props

InputGroupLabel

This is a label that can be used to divide groups of input. This will also fallow OS design guidelines.

import  *  as  React  from  'react'
import TextInput, { Container, InputGroupLabel } from  "react-native-text-input-material-swift-ui"

export  default () => {
	// State
	const [nome, setNome] = React.useState('');
	const [email, setEmail] = React.useState('');
	
	return (
	    <Container>
		    <InputGroupLabel isTop>
			    User information
			</InputGroupLabel>
		    <TextInput
				onChangeText={name => setName(name)}
				label='Name'
				defaultValue={name}
			/>
			<TextInput
				onChangeText={email => setEmail(email)}
				label='E-mail'
				defaultValue={email}
			/>
			{/* Other input groups */}
	    </Container>
	)
}

Props