@computools/react-native-material-text-input NPM

@computools/react-native-material-text-input

Common material input for react native

Installation

npm install @computools/react-native-material-text-input

yarn add @computools/react-native-material-text-input

Usage

import * as React from 'react';
import { StyleSheet, View, Keyboard, TextInput } from 'react-native';
import {
  FilledTextInput,
  OutlinedTextInput,
} from '@computools/react-native-material-text-input';

export const App = () => {
  const usernameRef = React.useRef<TextInput>(null);
  const [email, setEmail] = React.useState('');
  const [username, setUsername] = React.useState('');

  return (
    <View onTouchStart={Keyboard.dismiss} style={styles.container}>
      <FilledTextInput
        label="Email"
        autoFocus
        value={email}
        onChangeText={setEmail}
        onSubmitEditing={() => usernameRef.current.focus()}
      />
      <OutlinedTextInput
        label="Username"
        ref={usernameRef}
        containerStyle={{ backgroundColor: styles.container.backgroundColor }}
        value={username}
        onChangeText={setUsername}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
});