I have to use both KeyboardAvoidingView and ScrollView at the same time.
But my problem is that it doesn’t work at all.
Also I tried KeyboardAwareScrollView, but it didn’t work either.
My screen should function like it.
this is my code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
< KeyboardAwareScrollView
style={{ flex: 1 }}
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth,
flex: 1
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</ScrollView>
</KeyboardAvoidingView>
);
}
use KeyboardAwareScrollView code:
const { windowHidth, windowHeight } = Dimensions.get("window");
...
render() {
if (this.state.loading === false) {
<ActivityIndicator
style={{ alignItems: "center", justifyContent: "center" }}
size="large"
/>;
}
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : null}
enabled
>
<ScrollView
contentContainerStyle={{ flex: 1 }}
keyboardShouldPersistTaps="always"
>
<SafeAreaView
style={{
backgroundColor: "green",
height: windowHeight,
width: windowHidth
}}
>
<View
style={{
height: "100%",
backgroundColor: "blue",
paddingTop: 40
}}
>
<View
style={{ paddingLeft: "7%", paddingRight: "7%", height: "94%" }}
>
<Image
source={require("../../image/testimage.png")}
resizeMode="stretch"
style={{ alignSelf: "center" }}
/>
<Text style={{ fontSize: 17, marginTop: "10%" }}>
비밀번호의 관리는 사용자의 책임이며, 분실하면 다시 찾을 수
있는 방법이 없습니다.
</Text>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
지갑 이름
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
onSubmitEditing={() => this.password.focus()}
placeholder={"지갑 이름을 설정하세요."}
onChangeText={walletname => this.setState({ walletname })}
value={this.state.walletname}
textContentType="password"
underlineColorAndroid="#fff"
autoFocus={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="next"
ref={input => (this.password = input)}
onSubmitEditing={() => this.passwordconfirm.focus()}
placeholder={
"비밀번호를 설정하세요(영문자,숫자포함 8자리 이상)."
}
onChangeText={password => this.setState({ password })}
value={this.state.password}
textContentType="password"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
<Text
style={{
paddingTop: "6%",
fontWeight: "bold",
paddingBottom: 10
}}
>
비밀번호 확인
</Text>
<TextInput
style={styles.walletscreen2textinput}
returnKeyType="go"
ref={input => (this.passwordconfirm = input)}
placeholder={"비밀번호를 한번 더 입력하세요."}
onChangeText={passwordconfirm =>
this.setState({ passwordconfirm })
}
value={this.state.passwordconfirm}
textContentType="nickname"
underlineColorAndroid="#fff"
secureTextEntry={true}
/>
</View>
<View style={{ height: "6%" }}>
<TouchableOpacity
disabled={this.state.disabled}
style={styles.walletscreen2button}
onPress={ () => { }}
>
<Text style={{ color: "#fff" }}>생성하기</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
Please help me to solve this problem.
Thank you in advance