CODEWITHSUNDEEP
react-native
Niko Konovalov
Niko Konovalov

Reputation: 191

Import/Export Components

I'm trying to build a custom input component, and render it on another page Here is my code

import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "@expo/vector-icons";
class RegisterTextBox extends React.Component {
  render() {
    const RegisterTextInput = ({
      value,
      placeholder,
      onChangeText,
      onBlur,
      secureTextEntry,
      inputStyle,
      viewStyle,
      eyeIcon = false,
    }) => {
      return (
        <View style={[styles.container, viewStyle]}>
          <TextInput
            style={[styles.main, inputStyle]}
            value={value}
            onChangeText={onChangeText}
            onBlur={onBlur}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
          />
          {eyeIcon ? (
            <MaterialCommunityIcons
              name="eye-off"
              size={24}
              color="black"
              style={{ paddingTop: 5 }}
            />
          ) : (
            <View />
          )}
        </View>
      );
    };

    const styles = StyleSheet.create({
      container: {
        height: hp(5.4),
        width: wp(65.2),
        borderBottomColor: "grey",
        borderBottomWidth: 1,
        flexDirection: "row",
        justifyContent: "space-between",
      },
      main: {},
    });
  }
}
export default RegisterTextBox;

I want const RegisterTextInput to be rendered and use dynamic data, but I seem to get an error when trying to use it "Error: RegisterTextBox(...): Nothing was returned from render. this is how I'm trying to use it:

...
import RegisterTextInput from "../components/registerInput";
<View style={styles.emailInputsContainer}>
            <RegisterTextInput
              style={styles.emailInput}
              placeholder="Email"
              value={"email"}
              onChangeText={}
            />
          </View>
...

Where Is my problem? Note: I want to use states on this component

Upvotes: 0

Views: 50

Answers (1)

mainak
mainak

Reputation: 2301

Try with this...

import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "@expo/vector-icons";

class RegisterTextBox extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      value,
      placeholder,
      onChangeText,
      onBlur,
      secureTextEntry,
      inputStyle,
      viewStyle,
      eyeIcon = false,
    } = this.props;
    return (
      <View style={[styles.container, viewStyle]}>
        <TextInput
          style={[styles.main, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          onBlur={onBlur}
          placeholder={placeholder}
          secureTextEntry={secureTextEntry}
        />
        {eyeIcon ? (
          <MaterialCommunityIcons
            name="eye-off"
            size={24}
            color="black"
            style={{ paddingTop: 5 }}
          />
        ) : (
          <View />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: hp(5.4),
    width: wp(65.2),
    borderBottomColor: "grey",
    borderBottomWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  main: {},
});

export default RegisterTextBox;

Upvotes: 1

Related Questions