This is the start component and below the render function onPress function works fine.
import React, { useState, useEffect, useRef } from "react"
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
KeyboardAvoidingView,
Keyboard,
Button,
} from "react-native"
import BouncyCheckbox from "react-native-bouncy-checkbox"
import { SafeAreaView } from "react-native-safe-area-context"
import { ScrollView, TouchableWithoutFeedback } from "react-native-gesture-handler"
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"
import RNPickerSelect from "react-native-picker-select"
import Animated from "react-native-reanimated"
import BottomSheet from "reanimated-bottom-sheet"
import EventBannerSheet from "./event-banner"
export const UserInfoPhone: React.FC = () => {
const userNumberFormRef = useRef<TextInput>()
const userNumberNextFormRef = useRef<TextInput>()
const userPhoneNumberFormRef = useRef<TextInput>()
const focusToNextForm = (nextForm: any) => {
nextForm.current.focus()
}
const EssentialAgreementContainer = ({ text }) => {
return (
<View style={styles.essentialAgreementContainer}>
<View style={styles.essentialSmallBox}>
<Text style={styles.essentialAgreementText}>[필수] {text}</Text>
<TouchableOpacity style={styles.okButton}>
<Text style={styles.okButtonTitle}>보기</Text>
</TouchableOpacity>
</View>
<BouncyCheckbox
size={17}
fillColor="lightgrey"
unfillColor="lightgrey"
iconStyle={{ borderColor: "lightgrey" }}
textStyle={{ fontFamily: "JosefinSans-Regular" }}
/>
</View>
)
}
return (
<>
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAwareScrollView>
<Image source={require("./back.png")} style={styles.backButton} />
<View style={styles.viewTitle}>
<Text style={styles.title}>휴대폰으로</Text>
<Text style={styles.title}>간편 본인인증하세요.</Text>
</View>
<View style={styles.subTitleContainer}>
<Text style={styles.subTitle}>나중에 할게요</Text>
<TouchableOpacity style={styles.okButton}>
<Text style={styles.okButtonTitle}>확인</Text>
</TouchableOpacity>
</View>
<View style={[styles.agreementContainer, styles.shadowProps]}>
<View style={styles.conditionContainer}>
<Text style={styles.agreementTitle}>본인확인 서비스에 대해 모두 동의하기</Text>
<BouncyCheckbox
size={17}
fillColor="lightgrey"
unfillColor="lightgrey"
iconStyle={{ borderColor: "lightgrey" }}
textStyle={{ fontFamily: "JosefinSans-Regular" }}
/>
</View>
<View style={styles.contour}></View>
<EssentialAgreementContainer text="서비스 이용약관 동의" />
<EssentialAgreementContainer text="통신사 이용약관 동의" />
<EssentialAgreementContainer text="개인 정보 수집 및 이용 동의" />
<EssentialAgreementContainer text="개인 제어보 제공/위탁 동의" />
<EssentialAgreementContainer text="고유식별 정보 처리" />
</View>
<View style={styles.infoForms}>
<View style={styles.nameFormContainer}>
<Text style={styles.userInfo}>성명</Text>
<TextInput
style={styles.nameForm}
onSubmitEditing={() => {
focusToNextForm(userNumberFormRef)
}}
/>
</View>
<View style={styles.personNumberFormContainer}>
<Text style={styles.userInfo}>주민등록번호 (외국인등록번호)</Text>
<View style={styles.userNumberFormContainer}>
<TextInput
style={styles.userNumberForm}
maxLength={6}
placeholder="960101"
onSubmitEditing={() => {
focusToNextForm(userNumberNextFormRef)
}}
ref={userNumberFormRef}
/>
<Text style={{ fontSize: 20 }}>-</Text>
<TextInput
style={styles.userSecondNumberForm}
maxLength={1}
ref={userNumberNextFormRef}
onSubmitEditing={() => {
focusToNextForm(userPhoneNumberFormRef)
}}
/>
</View>
</View>
<View style={styles.phoneFormContainer}>
<Text style={styles.userInfo}>휴대폰번호</Text>
<View style={styles.phoneForms}>
<View style={styles.telecome}>
<RNPickerSelect
style={{ inputAndroid: { color: "black", padding: 0, height: 20 } }}
useNativeAndroidPickerStyle={false}
onValueChange={(value) => console.log(value)}
placeholder={{ label: "통신사" }}
items={[
{ label: "SKT", value: "SKT" },
{ label: "KT", value: "KT" },
{ label: "LG U ", value: "LG U " },
{ label: "SKT알뜰폰", value: "SKT알뜰폰" },
{ label: "KT알뜰폰", value: "KT알뜰폰" },
{ label: "LG U 알뜰폰", value: "LG U 알뜰폰" },
]}
/>
</View>
<TextInput
style={styles.phoneForm}
placeholder="010-1234-5678"
ref={userPhoneNumberFormRef}
/>
</View>
</View>
</View>
<TouchableOpacity style={styles.certificationButton}>
<Text style={styles.certificationText}>인증하기</Text>
</TouchableOpacity>
</KeyboardAwareScrollView>
</TouchableWithoutFeedback>
</SafeAreaView>
<EventBannerSheet />
</>
)
}
and this is the EventBannerSheet Component, I got this BottomSheet library and wrote it, but the onPress function doesn't work here. Also I did it before using the Checkbox library but onValueChange also didn't work in android.
import React, { useRef } from "react"
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"
import BottomSheet from "reanimated-bottom-sheet"
const EventBannerSheet: React.FC = () => {
const sheetRef = useRef(null)
const consoleHello = () => {
console.log("helloooooooo!!!!")
}
const renderContent = () => (
<View style={styles.bottomSheet}>
<View style={styles.sheetTextContainer}>
<Text
style={styles.sheetText}
onPress={() => {
consoleHello()
}}
>
EVENT BANNER
</Text>
<Text style={styles.sheetText}>IMG</Text>
</View>
<View style={styles.sheetCloseContainer}>
<TouchableOpacity
onPress={() => {
console.log("helloMaster123")
}}
>
<Text style={{ color: "blue" }}>오늘 하루 보지않기</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => sheetRef.current.snapTo(2)}>
<Text>닫기</Text>
</TouchableOpacity>
</View>
</View>
)
return (
<>
<BottomSheet
initialSnap={1}
ref={sheetRef}
snapPoints={[450, 350, 0]}
borderRadius={10}
renderContent={renderContent}
/>
</>
)
}
and this is stylesheet of EventBannerSheet
const styles = StyleSheet.create({
bottomSheet: {
backgroundColor: "white",
padding: 25,
height: 440,
},
sheetTextContainer: {
height: 270,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#d3d3d3",
borderRadius: 10,
},
sheetText: {
fontSize: 30,
color: "white",
},
sheetCloseContainer: {
flexDirection: "row",
justifyContent: "space-between",
marginTop: 20,
},
})
CodePudding user response：
<View style={styles.bottomSheet}>
<View style={styles.sheetTextContainer}>
<TouchableOpacity
style={styles.sheetText}
onPress={() => {
consoleHello()
}}
>
<Text style={{ color: "black" }}>EVENT BANNER</Text>
</TouchableOpacity>
<Text style={styles.sheetText}>IMG</Text>
</View>
<View style={styles.sheetCloseContainer}>
<TouchableOpacity
onPress={() => {
console.log("helloMaster123")
}}>
<Text style={{ color: "blue" }}>오늘 하루 보지않기</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => sheetRef.current.snapTo(2)}>
<Text>닫기</Text>
</TouchableOpacity>
</View>
</View>
Please try the above code. I have tested the code and touchable opacity is working fine without any issue. I have added a text color for EVENT BANNER text just to test. Let me know if you need any other help.
CodePudding user response：
here is the config I've made to make it work on both iOS and Android with button and horizontal drag slider
<BottomSheet
initialSnap={1}
ref={sheetRef}
snapPoints={[450, 350, 0]}
borderRadius={10}
renderContent={renderContent}
enabledContentGestureInteraction={false}
enabledInnerScrolling={false}
enabledContentTapInteraction={false}
/>
I append three attributes so i solve this problem.
And the button inside the view use TouchableOpacity from RN for iOS and TouchableOpacity from react-native-gesture-handler for Android