daily pastebin goal
29%
SHARE
TWEET

Untitled

a guest Mar 25th, 2019 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* @flow */
  2.  
  3. import * as React from 'react';
  4. import {
  5.   StyleSheet,
  6.   View,
  7.   ScrollView,
  8.   KeyboardAvoidingView,
  9.   type Theme,
  10. } from 'react-native';
  11. import { TextInput, HelperText, withTheme, Button } from 'react-native-paper';
  12.  
  13. type Props = {
  14.   theme: Theme,
  15. };
  16.  
  17. type State = {
  18.   text: string,
  19.   name: string,
  20.   outlinedText: string,
  21. };
  22.  
  23. class TextInputExample extends React.Component<Props, State> {
  24.   static title = 'TextInput';
  25.  
  26.   state = {
  27.     text: '',
  28.     name: '',
  29.     outlinedText: '',
  30.   };
  31.  
  32.   _isUsernameValid = () => /^[a-zA-Z]*$/.test(this.state.name);
  33.   textinput: ?TextInput;
  34.  
  35.   render() {
  36.     const {
  37.       theme: {
  38.         colors: { background },
  39.       },
  40.     } = this.props;
  41.  
  42.     return (
  43.       <KeyboardAvoidingView
  44.         style={styles.wrapper}
  45.         behavior="padding"
  46.         keyboardVerticalOffset={80}
  47.       >
  48.         <ScrollView
  49.           style={[styles.container, { backgroundColor: background }]}
  50.           keyboardShouldPersistTaps={'always'}
  51.           removeClippedSubviews={false}
  52.         >
  53.           <Button
  54.             onPress={() => {
  55.               if (this.textinput) {
  56.                 console.log('!@#', this.textinput.focus);
  57.                 this.textinput.focus();
  58.               }
  59.             }}
  60.           >
  61.             Clear
  62.           </Button>
  63.           <TextInput
  64.             style={styles.inputContainerStyle}
  65.             label="Flat input"
  66.             placeholder="Type something"
  67.             value={this.state.text}
  68.             onChangeText={text => this.setState({ text })}
  69.           />
  70.           <TextInput
  71.             disabled
  72.             style={styles.inputContainerStyle}
  73.             label="Disabled flat input"
  74.             ref={ref => {
  75.               this.textinput = ref;
  76.             }}
  77.           />
  78.           <TextInput
  79.             mode="outlined"
  80.             style={styles.inputContainerStyle}
  81.             label="Outlined input"
  82.             placeholder="Type something"
  83.             value={this.state.outlinedText}
  84.             onChangeText={outlinedText => this.setState({ outlinedText })}
  85.           />
  86.           <TextInput
  87.             mode="outlined"
  88.             disabled
  89.             style={styles.inputContainerStyle}
  90.             label="Disabled outlined input"
  91.           />
  92.           <View style={styles.inputContainerStyle}>
  93.             <TextInput
  94.               label="Input with helper text"
  95.               placeholder="Enter username, only letters"
  96.               value={this.state.name}
  97.               error={!this._isUsernameValid()}
  98.               onChangeText={name => this.setState({ name })}
  99.             />
  100.             <HelperText type="error" visible={!this._isUsernameValid()}>
  101.               Error: Only letters are allowed
  102.             </HelperText>
  103.           </View>
  104.         </ScrollView>
  105.       </KeyboardAvoidingView>
  106.     );
  107.   }
  108. }
  109.  
  110. const styles = StyleSheet.create({
  111.   container: {
  112.     flex: 1,
  113.     padding: 8,
  114.   },
  115.   wrapper: {
  116.     flex: 1,
  117.   },
  118.   inputContainerStyle: {
  119.     margin: 8,
  120.   },
  121. });
  122.  
  123. export default withTheme(TextInputExample);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top