KeyboardInput - test

gistfile1.txt

import React, {PureComponent} from 'react';
import {
  View,
  ScrollView,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';
import {
  Keyboard,
  Text,
  Colors,
  Spacings,
  Typography,
} from 'react-native-ui-lib';
import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';
const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;

import './demoKeyboards';
const KeyboardRegistry = Keyboard.KeyboardRegistry;

const TrackInteractive = true;

export default class KeyboardInputViewScreen extends PureComponent {
  onPressSendComment = () => {
    console.warn('onPressSendComment');
  };

  keyboardAccessoryViewContent = () => {
    return (
      <View style={styles.inputAccessoryViewContainer}>
        <AutoGrowingTextInput
          onFocus={this.onInputFocus}
          onBlur={this.onInputBlur}
          ref={this.onGetTextInputRef}
          style={styles.inputAccessoryViewText}
          placeholder={'placeholder'}
          placeholderTextColor={'blue'}
          onChangeText={this.onChangeText}
        />
        <TouchableOpacity
          style={styles.sendCommentButton}
          onPress={this.onPressSendComment}>
          <Image
            style={styles.sendCommentIcon}
            source={require('./res/search.png')}
          />
        </TouchableOpacity>
      </View>
    );
  };

  requestShowKeyboard = () => {
    KeyboardRegistry.requestShowKeyboard('KeyboardView1');
  };

  render() {
    const {message} = this.props;

    return (
      <View style={{flex: 1, backgroundColor: Colors.dark80}}>
        <ScrollView
          contentContainerStyle={styles.scrollContainer}
          keyboardDismissMode={TrackInteractive ? 'interactive' : 'none'}>
          <Text text40 dark10 marginV-20 center>
            {message || 'Keyboards example'}
          </Text>
        </ScrollView>

        <KeyboardAccessoryView
          renderContent={this.keyboardAccessoryViewContent}
          trackInteractive={TrackInteractive}
          kbInputRef={this.textInputRef}
          revealKeyboardInteractive
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputAccessoryViewContainer: {
    backgroundColor: '#f5f1ea',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 12,
    paddingRight: 15,
    paddingVertical: 8,
  },
  inputAccessoryViewText: {
    maxHeight: 170,
    backgroundColor: 'white',
    flex: 1,
    height: 36,
    fontSize: 15,
    // fontFamily: GOTHAM_BOOK,
    // color: BOB_EXTRA_DARK_TEXT,
    paddingTop: 12,
    paddingBottom: 8,
    paddingHorizontal: 8,
    // borderRadius: DEFAULT_BORDER_RADIUS,
  },
  // sendCommentIcon: {
  //   height: SEND_COMMENT_ICON_EDGE_SIZE,
  //   width: SEND_COMMENT_ICON_EDGE_SIZE,
  //   resizeMode: "contain",
  // },
  scrollContainer: {
    paddingHorizontal: Spacings.s5,
    flex: 1,
    justifyContent: 'center',
  },
  textInput: {
    flex: 1,
    padding: Spacings.s2,
    ...Typography.text70,
  },
  button: {
    padding: Spacings.s2,
  },
  keyboardContainer: {
    backgroundColor: Colors.white,
    borderWidth: 1,
    borderColor: Colors.dark60,
  },
});