{"size": 2187, "ext": "js", "max_stars_repo_path": "app/components/TextInput.js", "max_stars_repo_name": "Juljulia/obvi", "max_stars_repo_stars_event_min_datetime": "2020-10-14T07:39:29.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-25T06:58:54.000Z", "max_issues_repo_path": "app/components/TextInput.js", "max_issues_repo_name": "Juljulia/obvi", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "app/components/TextInput.js", "max_forks_repo_name": "Juljulia/obvi", "max_forks_repo_forks_event_min_datetime": "2020-10-30T10:36:18.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-16T11:43:37.000Z"}
{"max_stars_count": 3, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 20.25, "max_line_length": 74, "alphanum_fraction": 0.5180612711}
import React from "react";
import {
  View,
  TextInput,
  StyleSheet,
  Image,
  TouchableWithoutFeedback,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import colors from "../config/colors";

function AppTextInput({
  icon,
  width = 315,
  height = 70,
  iconSize = 20,
  style,
  inputStyle,
  onPress,
  rightIcon,
  imageIcon,
  ...otherProps
}) {
  return (
    <View style={[styles.container, { width, height }, style]}>
      {height < 100 ? (
        <Image
          style={{
            width,
            height,
            position: "absolute",
            top: 0,
            left: 0,
          }}
          source={require("../assets/input-bg.png")}
          resizeMode="stretch"
        />
      ) : (
        <Image
          style={{
            width,
            height,
            position: "absolute",
            top: 0,
            left: 0,
          }}
          source={require("../assets/message-bg.png")}
          resizeMode="stretch"
        />
      )}
      {icon && (
        <MaterialCommunityIcons
          name={icon}
          size={iconSize}
          color={colors.mediumGrey}
          style={styles.icon}
        />
      )}
      {imageIcon && <Image style={styles.imageIcon} source={imageIcon} />}
      {rightIcon && (
        <TouchableWithoutFeedback onPress={onPress}>
          <MaterialCommunityIcons
            name={rightIcon}
            size={iconSize}
            color={colors.mediumGrey}
            style={styles.rightIcon}
          />
        </TouchableWithoutFeedback>
      )}
      <TextInput
        placeholderTextColor={colors.mediumGrey}
        style={[styles.text, inputStyle]}
        {...otherProps}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    marginBottom: 16,
    flexDirection: "row",
    alignItems: "center",
    padding: 15,
  },
  text: {
    fontSize: 14,
    padding: 5,
    alignSelf: "center",
  },
  icon: {
    marginRight: 10,
  },
  imageIcon: {
    width: 20,
    height: 20,
    marginRight: 10,
  },
  rightIcon: {
    position: "absolute",
    right: 32,
  },
});

export default AppTextInput;
