React-native-keyboard-aware-scroll-view: undefined is not a function (evaluating 'this.scroll.props._scrollToFocusedInput(reactNode)')

Created on 15 May 2019  ยท  2Comments  ยท  Source: APSL/react-native-keyboard-aware-scroll-view

They downloaded the module and did not have an example, so they said they could not find the function.

Error message is:

undefined is not a function (evaluating 'this.scroll.props._scrollToFocusedInput(reactNode)')

use page code:
~~~js
import React from "react";
import {
View,
Text,
TouchableOpacity,
Dimensions,
TextInput,
ActivityIndicator,
AsyncStorage,
Alert,
Image,
Platform,
KeyboardAvoidingView,
findNodeHandle
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import "../../global";
import { Ionicons } from "@expo/vector-icons";
import styles from "./styles.js";

const { windowHidth, windowHeight } = Dimensions.get("window");

class TakeWalletScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
walletname: "",
password: ""
};
}

static navigationOptions = ({ navigation }) => {
return {
headerLeft: (
style={{ paddingLeft: 15 }}
onPress={() => navigation.goBack()}
>


),

  headerRight: null
};

};

_scrollToInput(reactNode: any) {
// Add a 'scroll' ref to your ScrollView
this.scroll.props._scrollToFocusedInput(reactNode);
}

render() {
if (this.state.keystoredata === undefined) {
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
contentContainerStyle={styles.takewalletcontainer}
ref={ref => (this.scroll = ref)}
>
source={require("../../image/minigroup.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>

style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>

style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>

style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>


style={{
fontWeight: "bold",
paddingBottom: 10,
fontSize: 18
}}
>
์ง€๊ฐ‘ ๊ฐ€์ ธ์˜ค๊ธฐ

          <Text
            style={{
              fontSize: 16
            }}
          >
            {`์ง€๊ฐ‘๋ช…๊ณผ ๊ฐ€์ ธ์˜จ ์ง€๊ฐ‘์˜ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ${"\n"}์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.`}
          </Text>

          <View
            style={{
              flexDirection: "row",
              paddingTop: 45,
              paddingLeft: 3,
              paddingBottom: 8
            }}
          >
            <Text
              style={{
                fontSize: 14,
                fontWeight: "bold"
              }}
            >
              ์ง€๊ฐ‘์ด๋ฆ„
            </Text>
          </View>
          <View
            style={{
              flexDirection: "row",
              backgroundColor: "#f6f6ef",
              width: "90%",
              height: 50,
              justifyContent: "flex-start"
            }}
          >
            <TextInput
              style={{
                width: "80%",
                height: 50,
                paddingLeft: 10
              }}
              returnKeyType="next"
              placeholder={"์ง€๊ฐ‘ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."}
              onChangeText={walletname => this.setState({ walletname })}
              value={this.state.walletname}
              textContentType="nickname"
              underlineColorAndroid={"#f6f6ef"}
              onSubmitEditing={() => this.password.focus()}
            />

            {/* {this.state.nickname.length >= 2 ? (
          <View
            style={{
              height: "100%",
              width: "20%",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Ionicons name="ios-checkmark" size={50} color="yellow" />
          </View>
        ) : (
          <View
            style={{
              height: "100%",
              width: "20%",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Ionicons name="ios-checkmark" size={50} color="gray" />
          </View>
        )} */}
          </View>
          <Text style={{ paddingLeft: 5, color: "#d22e2e", fontSize: 12 }}>
            {this.state.checknick}
          </Text>
          <View
            style={{
              flexDirection: "row",
              paddingTop: 30,
              paddingLeft: 3,
              paddingBottom: 8
            }}
          >
            <Text
              style={{
                fontSize: 14,
                fontWeight: "bold"
              }}
            >
              ๋น„๋ฐ€๋ฒˆํ˜ธ
            </Text>
            <Text
              style={{
                fontSize: 12,
                color: "#434343",
                paddingLeft: 5
              }}
            >
              ์˜๋ฌธ/์ˆซ์ž ์กฐํ•ฉ,8์ž๋ฆฌ ์ด์ƒ
            </Text>
          </View>
          <View
            style={{
              flexDirection: "row",
              backgroundColor: "#f6f6ef",
              width: "90%",
              height: 50,
              justifyContent: "flex-start"
            }}
          >
            <TextInput
              style={{
                width: "80%",
                height: 50,
                paddingLeft: 10
              }}
              returnKeyType="go"
              placeholder={"๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."}
              onChangeText={password => this.setState({ password })}
              value={this.state.password}
              textContentType="password"
              underlineColorAndroid={"#f6f6ef"}
              ref="password"
              onFocus={(event: Event) => {
                this._scrollToInput(findNodeHandle(event.target));
              }}
            />

            {/* {this.state.nickname.length >= 2 ? (
          <View
            style={{
              height: "100%",
              width: "20%",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Ionicons name="ios-checkmark" size={50} color="yellow" />
          </View>
        ) : (
          <View
            style={{
              height: "100%",
              width: "20%",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Ionicons name="ios-checkmark" size={50} color="gray" />
          </View>
        )} */}
          </View>
        </View>
      </View>
      <View style={styles.walletscreenlayout4}>
        <TouchableOpacity
          style={styles.walletscreen3button}
          onPress={async () => {
            if (
              this.state.nickname.length >= 2 &&
              this.state.walletname.length >= 2 &&
              this.state.nickname.length <= 8
            ) {
              this.setState({
                disabled: true
              });
              this.checkNickName();
            } else {
              Alert.alert("์•ˆ๋‚ด", "๋‹‰๋„ค์ž„์„ 2์ž~8์ž๋กœ ํ•ด์ฃผ์„ธ์š”.");
            }
          }}
          disabled={this.state.disabled}
        >
          <Text style={{ color: "#fff" }}>์„ค์ •ํ•˜๊ธฐ</Text>
        </TouchableOpacity>
      </View>
    </View>
  </KeyboardAwareScrollView>
);

}
}

export default TakeWalletScreen;
~~~

please help me

All 2 comments

Use innerRef to get the component reference and use this.scrollRef.props to access these methods.

Having the same issue.
Too bad Haper's comment is useless.

Was this page helpful?
0 / 5 - 0 ratings