PostFooter.js

import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import ExpandingTextInput from 'components/expanding-text-input/ExpandingTextInput';

const { width: ww, height: wh } = Dimensions.get('window');
const VIEW_HEIGHT = Platform.OS === 'android' ? wh - 24 : wh;
const VIEW_WIDTH = ww;
const viewSize = {
  width: VIEW_WIDTH,
  height: VIEW_HEIGHT,
};

const styles = StyleSheet.create({
  container: {
    width: viewSize.width,
    minHeight: 54,
    borderTopWidth: 1,
    borderTopColor: 'gray',
    flexDirection: 'row'
  },
  content: {
    flex: 1,
  },
  inputWrapper: {
    flex: 1,
    minHeight: 54,
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  inputBorder: {
    alignSelf: 'stretch',
    minHeight: 54 - (6 * 2),
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 25,
    paddingVertical: 12,
    paddingHorizontal: 18,
  },
  input: {
    alignSelf: 'stretch',
    padding: 0,
    margin: 0,
    fontSize: 13,
    color: '#333',
    lineHeight: 18,
    includeFontPadding: false,
  },
  message: {
    borderRadius: 18,
    fontSize: 13,
    color: '#333',
    lineHeight: 18,
    alignSelf: 'flex-start'
  },
});

class PostFooter extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      text: ''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.content} />
        <View style={styles.inputWrapper}>
          <View style={styles.inputBorder}>
            <ExpandingTextInput
              onChangeText={(text) => this.setState({ text })}
              style={styles.input}
              underlineColorAndroid="transparent"
              autoCapitalize="sentences"
              autoCorrect={true}
              placeholder="This is a placeholder"
              minRows={1}
              maxRows={3}
            >
              <Text style={styles.message}>{this.state.text}</Text>
            </ExpandingTextInput>
          </View>
        </View>
      </View>
    )
  }
}

export default PostFooter

PostFooter.propTypes = {};