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

| Key | Type | Desctriprion | Example | |-|-|-|-| | isDarkMode | boolean | if true the container uses the dark color scheme | isDarkMode={true} | | style | StyleSheetPropType | allow to add styles to the ScrollView component | style={{paddingVertical: 35}} |

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

| Key | Type | Desctriprion | Example | |-|-|-|-| | isDarkMode | boolean | If true the container uses the dark color scheme | isDarkMode={true} | | label | string | Create a float label on android and an input placeholed in ios | label='Name' | | tintColor | color | The color of the floating android label | tintColor='red' | | fontFamily | string | The font of placeholder and label |fontFamily='open-sans-regular' | isFirst | boolean | If true provide the top border on the iOS input | isFirst={true} | | isLast | boolean | If true provide the bottom border on the iOS input | isLast={tue} | | stylesContainer | StyleSheetPropType | allow to add styles to the container View component on Android | style={{paddingBottom: 10}} | | stylesLabel | StyleSheetPropType | allow to add styles to the label component on Android | style={{left: 10}} | | style | StyleSheetPropType | allow to add styles to the textInput component | style={{left: paddingBottom: 20}} | 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

| Key | Type | Desctriprion | Example | |-|-|-|-| | isDarkMode | boolean | If true the container uses the dark color scheme | isDarkMode={true} | | fontFamily | string | The font of placeholder and label |fontFamily='open-sans-regular' | | isTop | boolean | if true set the top margin to 0 |fontFamily='open-sans-regular' | | style | StyleSheetPropType | allow to add styles to the label component | style={{left: paddingBottom: 20}} |