react-native-keyboard-aware-scroll-view
react-native-keyboard-aware-scroll-view copied to clipboard
Published
20 hours ago •
APSL
APSL
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.
I was experiencing this issue with RN 0.65+ but upgrading keyboard-aware-scroll-view to 0.9.5 fixed it.
