react-native-keyboard-aware-scroll-view
react-native-keyboard-aware-scroll-view copied to clipboard
undefined is not a function (evaluating 'this.scroll.props._scrollToFocusedInput(reactNode)')
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:
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: (
<TouchableOpacity
style={{ paddingLeft: 15 }}
onPress={() => navigation.goBack()}
>
<Ionicons name={"ios-arrow-back"} size={35} color={"black"} />
</TouchableOpacity>
),
headerRight: null
};
};
_scrollToInput(reactNode: any) {
// Add a 'scroll' ref to your ScrollView
this.scroll.props._scrollToFocusedInput(reactNode);
}
render() {
if (this.state.keystoredata === undefined) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
<KeyboardAwareScrollView
contentContainerStyle={styles.takewalletcontainer}
ref={ref => (this.scroll = ref)}
>
<View style={{ flex: 1 }}>
<View style={styles.takewalletscreen3layout1}>
<View style={{ flexDirection: "row", paddingLeft: 30 }}>
<Image
source={require("../../image/minigroup.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<View
style={{ paddingLeft: Platform.OS === "ios" ? "29%" : "33%" }}
>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_yellow.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
<View style={{ paddingLeft: 6 }}>
<Image
style={{
resizeMode: "stretch"
}}
source={require("../../image/oval_gray.png")}
/>
</View>
</View>
<View style={styles.walletscreen3layout2}>
<Text
style={{
fontWeight: "bold",
paddingBottom: 10,
fontSize: 18
}}
>
지갑 가져오기
</Text>
<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
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.
Having the same issue
I was experiencing this issue with RN 0.65+ but upgrading keyboard-aware-scroll-view to 0.9.5
fixed it.