월 14,300원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결배달앱 클론코딩 [with React Native]
실행중 코드 변경 반영문제...
프로젝트를 새로 만들었는데요.이전과 다르게실행 중에 소스코드 변경이 바로 반영이 안되요.metro command창에 로그가 안나와요.무엇을 빼 먹은 걸까요?
- 미해결배달앱 클론코딩 [with React Native]
tmap 연동 실패
현재 세팅을 모두 완료한 상태에서 `npm run android --reset-cache`를 했을 때, 실패를 하게 됩니다. ./gradlew clean으로 설정을 마무리 했을 때 같은 문제가 발생합니다. 현재 T-map 설치 sdk 버전은 com.skt.Tmap_1.76.jar입니다. rn 버전은 0.74입니다. 아래와 같이 세팅은 모두 마친 상태에서 다음과 같이 에러가 발생하고 있습니다. github commit : https://github.com/kd02109/react-native-delivery/commit/590f740f6fae2f42499c6c20af7e7e775cb76ab0 Error log Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. For more on this, please refer to https://docs.gradle.org/8.6/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation. 203 actionable tasks: 199 executed, 4 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-image-resizer\android\src\main\java\fr\bamlab\rnimageresizer\ImageResizerModule.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-permissions\android\src\main\java\com\zoontek\rnpermissions\RNPermissionsPackage.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-safe-area-context\android\src\paper\java\com\th3rdwave\safeareacontext\NativeSafeAreaContextSpec.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-screens\android\src\paper\java\com\swmansion\rnscreens\NativeScreensModuleSpec.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:35 Unexpected tokens (use ';' to separate expressions on the same line) e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:111 Expecting ')' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:49:1 Expecting a top level declaration e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:14:12 Unresolved reference: microsoft e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:22:13 Unresolved reference: PackageList e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:17 Unresolved reference: add e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:21 Unresolved reference: TMapPackage e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:17 Unresolved reference: add e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:21 Unresolved reference: CodePush e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:49 Unresolved reference: CodePushDeploymentKey e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:30:9 'getJSMainModuleName' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:32:9 'getUseDeveloperSupport' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:34:9 'isNewArchEnabled' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:35:9 'isHermesEnabled' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:38:3 Modifier 'override' is not applicable to 'top level property without backing field or delegate' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:39:33 Unresolved reference: applicationContext e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:39:53 Unresolved reference: reactNativeHost e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:41:3 Modifier 'override' is not applicable to 'top level function' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:42:5 No supertypes are accessible in this context e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:43:19 'this' is not defined in this context FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugKotlin'. > A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction > Compilation error. See log for more details어떤 방식으로 해결을 해야 할까요? 해당 세팅 방식은 제로초님의 repo중 https://github.com/ZeroCho/food-delivery-app/tree/master/rn73을 참고했습니다. 출발 지점을 클릭하게 되면 해당 openNavi 자체 모듈을 찾아서 실행할 수 없다는 에러가 발생하고 있는 상황입니다. andoroid에서 add package, T-map api 가이드를 모두 진행하고 키도 도입한 상황에서 실행이 되지 않고 있습니다..
- 미해결배달앱 클론코딩 [with React Native]
[질문은 아니고 에러 해결법] 혹시 iOS로 진행하시면서 Config가 안 먹히는 분들 써보세요.
save it under ios folder as "Config.xcconfig" with the following content:#include? "tmp.xcconfig" ios폴더 들어가셔서 Config.xcconfig라는 새파일 만드시고 위 코드 넣으시면 동작합니다. 출처:https://www.npmjs.com/package/react-native-config
- 미해결배달앱 클론코딩 [with React Native]
xcode 빌드 시 Command PhaseScriptExecution failed with a nonzero exit code 에러가 나옵니다
안녕하세요 제로초님 안드로이드는 시뮬레이터에서 돌아가는 것 보고 iOS도 해보고 있는 중입니다.그런데 계속 Command PhaseScriptExecution failed with a nonzero exit code 나오면서 빌드가 실패하네요 https://github.com/facebook/react-native/issues/36762https://stackoverflow.com/questions/75975043/xcode-error-phasescriptexecution-failed-with-a-nonzero-exit-code 위의 게시물들을 참고해서 수정도 해봤고 node_modules를 지우고 다시 설치도 해봤습니다. pod deintegrate와 캐시를 지운 후에 다시 pod install도 해줬습니다. 그래도 지속적으로 문제가 해결되지 않았습니다. 지금 애플 디벨로퍼에서 인증서들은 모두 발급 받고 Xcode에도 제 계정이 연결되어 있습니다. 하나 걸리는 건 react-native 버전이 0.74.0 인데 이 부분이 문제가 될 수도 있을까요?"react-native": "0.74.0" 혼자 해결해 보려고 했는데 도저히 답이 나오지 않아서 질문 드립니다. 늘 질문 받아주셔서 감사합니다
- 미해결배달앱 클론코딩 [with React Native]
그래들 설정 부분이 궁금합니다.
강의 내용과 실제 파이어베이스 페이지에 가보니 설정하는 부분이 달라져서 아래와 같이 넣는게 맞을 것 같다고 생각해서 넣었는데 맞는지 모르겠네요아래는 파이어베이스에서 설정하라고 하는 부분이고.아래는 소스에서 적용한 부분입니다.build.gradle 부분에서buildscript { ..... dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") // 추가부분 classpath('com.google.gms.google-services' version '4.4.1' apply false) } } .... app/build.gradle부분에서dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") // 추가된 부분 implementation('com.android.application') // 추가된 부분 implementation('com.google.gms.google-services') // 추가된 부분 implementation platform('com.google.firebase:firebase-bom:33.0.0') // 추가된 부분 implementation 'com.google.firebase:firebase-analytics' if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor } } ... // 추가 apply plugin: 'com.google.gms.google-services'
- 미해결배달앱 클론코딩 [with React Native]
.env는 iOS에서는 따로 설정할 부분이 없는걸까요?
안드로이드와 아이폰 기기의 주소가 달라서 .env파일에서ANDROID_API_URL=http://10.0.2.2:3105 IOS_API_URL=http://localhost:3105이런식으로 사용을 할려고 합니다.그리고 SignUp 파일에서 아래와 같이 플랫폼에 맞게 주소를 불러오게 하려고 하는데 const response = await axios.post( Platform.OS === 'ios' ? `${Config.IOS_API_URL}/user` : `${Config.ANDROID_API_URL}/user`, { email, name, password, }, );iOS는 설정할 부분에 대한 설명이 따로 없어서 테스트를 하는데 .env를 사용하지 않고 바로 주소를 입력했을때는 정상적으로 호출이 되는데 .env를 사용하면 undefined로 나옵니다.검색을 해 보니https://velog.io/@attosisss_/ios-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95이런식으로 하면 될 것 같은데. 잘못 손을대면 문제가 커질것 같아서 조금 고민이기는 합니다.위 링크대로 xCode를 수정하면 문제가 없는지 궁금합니다.
- 미해결배달앱 클론코딩 [with React Native]
API 연결이 안됩니다.
.env 설정을 아래 3가지로 해 보고, 이것도 안되서 실제 아이피로 해 봤는데도 애뮬레이터 아래 undefined라는 오류 메시지만 뜨네요; API_URL = http://192.168.0.255:3105 API_URL = http://10.0.2.2:3105 ; API_URL = http://localhost:3105 SignUp.tsx 는 아래와 같이 되어 있습니다.try { setLoading(true); const response = await axios.post(`${Config.API_URL}/user`, { email, name, password, }); console.log(response); Alert.alert('알림', '회원가입이 완료되었습니다.'); } catch (error) { const errorResponse = (error as AxiosError).response; console.error(errorResponse); if (errorResponse) { Alert.alert('알림', errorResponse.data.message); } } finally { setLoading(false); }해당 패키지도 모두 설치하고, 서버도 재시작하고 했는데도 안되네요.포트스맨으로 http://localhost:3105로 post 요청을 해 보면 아래와 같은 오류가 뜹니다.TypeError: Cannot read properties of undefined (reading 'toLowerCase') at /Users/xxx/React-Project/React-Native/back/app.js:104:27 at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:137:13) at Route.dispatch (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) at /Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:281:22 at Function.process_params (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:341:12) at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:275:10) at urlencodedParser (/Users/xxx/React-Project/React-Native/back/node_modules/body-parser/lib/types/urlencoded.js:100:7) at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) POST /user 500 7.179 ms - 2
- 미해결배달앱 클론코딩 [with React Native]
FastImage의 source속성 질문
FastImage의 source속성의 uri값으로 넣는 주소 API는 API.md엔 나와있지 않던데 이것도 백엔드 서버로 GET요청을 보내는 것이고 그에 따라 백엔드 서버가 해당 요청이 왔을 때 이미지를 보내주는 API를 직접 구현해야 하는게 맞죠?
- 미해결배달앱 클론코딩 [with React Native]
프로젝트를 만드는데 templateerror라는 메시지가 나옵니다.
안녕하세요.프로젝트를 새로 만들 때npx react-native MyProjectApp 으로 실행을 하면 아래와 같이 templatererror가 나옵니다.⠦ Downloading templateerror Installing pods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section. ✖ Downloading template info 💡 To enable automatic CocoaPods installation when building for iOS you can create react-native.config.js with automaticPodsInstallation field. For more details, see https://github.com/react-native-community/cli/blob/main/docs/projects.md#projectiosautomaticpodsinstallation Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "/Users/xxx/React-Native/MyProjectApp" && npx react-native run-android Run instructions for iOS: • cd "/Users/xxx/React-Native/MyProjectApp/ios" • Install Cocoapods • bundle install # you need to run this only once in your project. • bundle exec pod install • cd .. • npx react-native run-ios - or - • Open MyProjectApp/ios/MyProjectApp.xcodeproj in Xcode or run "xed -b ios" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. 코코아팟도 설치가 되어있어서pod --version 을 하면1.15.2라고 버전이 나옵니다.해당 프로젝트로 들어가서 npx pod-install을 실행하면 이상하게 MyProjectApp 과 같은 레벨의 경로에서 FoodDeliveryApp 이라는 폴더가 생성이 되고, 그 안에는 apps와 repos라는 폴더가 생성이 됩니다.안에는 아무것도 내용이 없어요.프로젝트를 만들고 xcode로 빌드하고, 클린하고, 안드로이드 스튜디오에서 열고 삭제하고 인텔리에서 프로젝트를 열고 지우고 하는것을 여러번 반복했었는데파일들이 깨끗하게 지워지지 않아서 기존에 만들었던 프로젝트가 생성이 되는지는 모르겠네요..그리고 해당 경로로 들어가면 아무런 파일도 생성이 안되어 있습니다.
- 미해결배달앱 클론코딩 [with React Native]
프로젝트 생성시 원하는 도매인으로 변경하는것고, 안드로이드를 자바로 시작할려면 어떻게 해야할까요?
강의를 보면서 Git 자료를 함께 참조해서 학습중입니다. README 파일을 보면 아래와 같이 프로젝트를 생성하게 되는데npx react-native init FoodDeliveryApp 안드로이드의 경로를 보면 android > app > src > main > java 하위 경로를 보면 com.fooddeliveryapp 이라고 생성이 되는데만약 회사의 도메인으로 생성을 원할경우 mycompany.co.kr 로 생성을 할려면 어떤식으로 생성을 해야하는지 문의드립니다.아니면 npx react-native init mycompany로 프로젝트를 생성한 후에 위의 안드로이드 경로를 com에서 co.kr로 변경해서kr.co.mycompany 로 프로젝트 경로를 임의로 변경을 해도 문제가 없을까요? 검색을 해서 정리를 해 본 내용으로는1. npx react-native init mycompany로 프로젝트를 만들고2. android에서 java 하위의 구조를 kr.co.mycompany로 변경3. 하위 파일의 소스중 패키지 경로를 kr.co.mycompany로 변경4. android/app안의 build.gradle 부분의 namespace와 applicationId를 변경.5. 터미널로 android 경로 안으로 들어가서 ./gradlew clean6. iOS의 경우에는 Xcode의 General부분에서 Bundle Identifier 부분 변경이렇게 하면 된다고 하는데 혹시 잘못된 부분이나 빠진 부분이 있을까요??(안드로이드는 변경할 파일들이 좀 있는데 iOS는 간단하네요) 참.. 그리고 하나 더 궁금한게 npx react-native init FoodDeliveryApp으로 프로젝트를 만들면 기본적으로 안드로이드는 코틀린 프로그램으로 되던데 이것을 자바로 만드는 방법이 따로 있을까요?
- 미해결배달앱 클론코딩 [with React Native]
버전 업그레이드 관련
안녕하세요 RN 버전이 0.74.x 까지 나왔던데...0.72.x 버전에서 업그레이드 하지않아도 문제가 없는지 문의드립니다.고맙습니다.
- 미해결배달앱 클론코딩 [with React Native]
readme
수업에서 보여주시는 리드미를 어디들어가야 하나요? 첫시작 으로 시작하는 거 입니다 ㅠㅠ 아래의주소로https://github.com/ZeroCho/react-native-naver-map들어가니 리드미가 달라서 어디 들어가야하는지 모르겠어요
- 미해결배달앱 클론코딩 [with React Native]
네이버맵 클러스터링 기능
안녕하세요네이버맵 클러스터링 기능 연동 방법 문의드립니다.
- 미해결배달앱 클론코딩 [with React Native]
This can also happen if there are multiple copies of '@react-navigation' packages installed.
Render Error Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? This can also happen if there are multiple copies of '@react-navigation' packages installed.이 에러가 발생해서 쭉 찾아봤는데요 처음에는 버전 충돌이 일어나는줄 알았으나 package.json 상에서 설치된 버전은 하나 뿐이라 아닌거로 확인했고 쭉 찾아보니 공식문서에서 https://reactnavigation.org/docs/navigation-container/ 이런 식으로 묶어주면 된다고해서 해보니 에러가 사라졌습니다!
- 미해결배달앱 클론코딩 [with React Native]
React Native 0.73 버전에서의 Flipper 대신 다른 디버거 사용에 대해서
안녕하세요 강사님. 리액트 네이티브 0.73 버전을 사용하고 있는데요.flipper가 현재 Podfile 에서 0.201.0 버전으로 나옵니다. 근데 도저히 flipper에서 연결이 되지 않아서 찾아보던 중에리액트 네이티브 0.73 부터 새로운 디버거의 사용이 가능하다고 하는데 이걸 사용해도 괜찮을까요? https://github.com/react-native-community/discussions-and-proposals/discussions/733
- 미해결배달앱 클론코딩 [with React Native]
네이버맵 사용자 위치 추적
안녕하세요네이버맵 연동 시 아래 사진과 같은 기능을 연동하려고 합니다method 확인 시setLocationTrackingMode <- 해당 method 인 것 같은데.. 연동 방식을 잘 모르겠습니다. 도움 부탁드립니다. 고맙습니다.
- 미해결배달앱 클론코딩 [with React Native]
NMAP 에서 onMapClick이벤트가 발생하도록 코드적으로 touch를 발생시킬 수 있는지 궁금합니다!
안녕하세요 nmap 예제에서 클릭시 onMapClick 함수가 호출되어 위도 , 경도를 받을 수 있었는데요.. 혹시 <NaverMapView> 컴포넌트에 코드적으로 touch를 발생시킬 수 있는지 궁금합니다.. 감사합니다!
- 미해결배달앱 클론코딩 [with React Native]
[iOS] Dbug vs release
안녕하세요. 강의를 보고 앱을 개발하고 이제 배포전 QA단계까지 왔습니다!QA를 하기위해서 Xcode에서 Edit Schemes -> Run에서 디버그 모드랑 릴리즈 모드로 선택을해서 빌드를 할 수가 있는데...디버그모드로 빌드를 하면 제가 수정한 코드가 잘 반영이 되어있는데 릴리즈 모드로 빌드를 하면 변한게 없습니다! 뭐가 다른 설정이 또 필요한 부분이 있나요? 혹시몰라서 깃 커밋과 푸시는 다 한 상태로 진행도 해보고 캐시도 삭 날려도 보고 했습니다.
- 미해결배달앱 클론코딩 [with React Native]
백엔드 질문
앱 어플에 대한 백엔드 서버는 그냥 웹과 동일하게 NestJS같은 것으로 만들면 되나요?
- 해결됨배달앱 클론코딩 [with React Native]
keyboardavoidingView 관련 질문 입니다.
안녕하세요 아래 코드의 bottomSheet 내부에 채팅 창을 넣고자 합니다.. 그리고 카톡에서 키보드가 올라오면 보던 내용이 키보드를 피해 올라가는 것을 구현하고자 하고 있습니다. 아래 코드에서 BottomSheet 내부를 KeyboardAvodingView로 감싸주었을 떄는 내부 scroll이 동작을 안 하였습니다.. FlatList만 KeyboardAvoidingView를 사용하였을 때는 .. FlatList의 내용이 가린채로 키보드가 올라왔습니다..KeyboardAwareScrollview또한 내부 스크롤이 동작안하고 있었습니다.. 혹시 아래처럼 bottomSheet를 사용해 내부 요소들을 보여줄 때 보던 내용이 키보드가 올라와도 보여질 수 있도록 자동으로 밀려올라가는(스크롤되는,,) 방법이 없을까요?감사합니다.. import React, { useCallback, useRef, useMemo } from "react"; import { StyleSheet, View, Text, Button, KeyboardAvoidingView } from "react-native"; import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet"; import { FlatList, ScrollView, TextInput } from "react-native-gesture-handler"; import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; const BottomExample = () => { // hooks const sheetRef = useRef<BottomSheet>(null); // variables const data = useMemo( () => Array(50) .fill(0) .map((_, index) => `index-${index}`), [] ); const snapPoints = useMemo(() => ["25%", "50%", "100%"], []); // callbacks const handleSheetChange = useCallback((index: any) => { console.log("handleSheetChange", index); }, []); const handleSnapPress = useCallback((index: any) => { sheetRef.current?.snapToIndex(index); }, []); const handleClosePress = useCallback(() => { sheetRef.current?.close(); }, []); // render const renderItem = useCallback( ( {item} : { item : string } ) => ( <View style={styles.itemContainer}> <Text>{item}</Text> </View> ), [] ); return ( <View style={styles.container}> <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} /> <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} /> <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} /> <Button title="Close" onPress={() => handleClosePress()} /> <BottomSheet ref={sheetRef} snapPoints={snapPoints} onChange={handleSheetChange} > <FlatList data={data} keyExtractor={(i) => i} renderItem={renderItem} contentContainerStyle={styles.contentContainer} /> < style ={{ backgroundColor : "blue"}}>all good all fine</TextInput> </BottomSheet> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 200, }, contentContainer: { backgroundColor: "white", }, itemContainer: { padding: 6, margin: 6, backgroundColor: "#eee", }, }); export default BottomExample;