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,
},
})
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