React native navigation + expo modules support

[Yasir5247]

Hi, this is not an issue, rather a question. i had the main branch cloned into my computer. now the issues is i want to use an expo module in my project. went back to expo documentation and try to install the packages. got me errors which lead me to some articles saying expo and rnn-navigation doesn't work together. up on further research i noticed there's a expo integration branch in the repo. so if i am not wrong there two options for me. 1- make another project from the rnn-starter and merge the expo branch and copy all the stuff from my project to the new one. 2- integrate expo in my existing project. is there any documentation or guide for the integration?

[kanzitelli]

Hi @Yasir5247!

I'd recommend to try the second option. The fastest way would be to follow this comparison between two branches - https://github.com/kanzitelli/rnn-starter/compare/expo-modules and apply necessary changes to your existing project.

Let me know how it goes :)

[Yasir5247]

will do, thank you as always. :)

[Yasir5247]

Hi, i have a quick question, so i have this pincode screen, goal is to add a pincode screen to protect the app. and this screen pop's when the screen comes from background. so if i had two layouts root and tabscreens. the pincode screen logic will go to the first screen of the tab screen right?

[kanzitelli]

@Yasir5247 I have released version 12.0 with the full support of Expo Modules, so now if you want, you can just clone it again and replace with your code, as the project's structure has not been changed :)

About PinCode screen. I'd recommend maybe to do it using an Overlay? Once the app comes from background, you could just show it and it will cover the whole screen.

[Yasir5247]

here is what i did. i cloned the project. and added new libraries from the old project. but my project is getting failed due to this error. i came from a web background and i have good understanding of javascript and react. my goal here is to create a react native app with rn-navigation (native navigation feel) and expo modules. since i my app requires access to some native side functionalities like contacts etc. so far this starter kit has been the best option for me.

BUILD FAILED

The following build commands failed: CompileC /Users/drgrey/Library/Developer/Xcode/DerivedData/RNNStarter-edawyxwbjiabttfmrjufaeqrzjyw/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/react-native-date-picker.build/Objects-normal/x86_64/DatePicker.o /Users/drgrey/Documents/Aiminaabee/bee-mobile-TS-expo/aiminaabee/node_modules/react-native-date-picker/ios/RNDatePicker/DatePicker.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'react-native-date-picker' from project 'Pods') (1 failure)

also the package documenation says i have to use expo install @react-native-community/datetimepicker if i am using expo support. but expo command wouldn't run. please guide me.

[Yasir5247]

My pod file

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '12.0'

target 'RNNStarter' do

  permissions_path = '../node_modules/react-native-permissions/ios'
  rn_maps_path = '../node_modules/react-native-maps'

  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"

  # pod 'react-native-onesignal', :path => '../node_modules/react-native-onesignal'

  pod 'react-native-google-maps', :path => rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'

  use_expo_modules!
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => true
  )

  target 'RNNStarterTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    # fix_deployment_target(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

# target 'OneSignalNotificationServiceExtension' do
#   pod 'OneSignal', '>= 3.0', '< 4.0'
# end

# def fix_deployment_target(installer)
#   return if !installer
#   project = installer.pods_project
#   project_deployment_target = project.build_configurations.first.build_settings['IPHONEOS_DEPLOYMENT_TARGET']

#   puts "Make sure all pods deployment target is #{project_deployment_target.green}"
#   project.targets.each do |target|
#     puts "  #{target.name}".blue
#     target.build_configurations.each do |config|
#       old_target = config.build_settings['IPHONEOS_DEPLOYMENT_TARGET']
#       new_target = project_deployment_target
#       next if old_target == new_target
#       puts "    #{config.name}: #{old_target.yellow} -> #{new_target.green}"
#       config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = new_target
#     end
#   end
# end

[kanzitelli]

@Yasir5247 It seems like you need to clean DerivedData of the project. Go to /Users/drgrey/Library/Developer/Xcode/DerivedData and find the one you developed before and now, and delete those folders. Then open Xcode again and try to build.

Otherwise, everything looks good.

[Yasir5247]

great. quick question.

if i want to install contacts from 'expo-contacts',

i have to install expo cli globally and run expo install expo-contacts in the project folder right.

[kanzitelli]

I usually use yarn add expo-... and it works well :)

[Yasir5247]

i have this script i run every-time i install a new library or want to clean the project.

const exec = require('shell-utils').exec;

run();

function run() { exec.killPort(8081); exec.execSync(watchman watch-del-all || true); exec.execSync(adb reverse tcp:8081 tcp:8081 || true); exec.execSync(rm -rf lib/ios/DerivedData); exec.execSync(rm -rf %appdata%\Temp\react-native-*); exec.execSync(rm -rf $TMPDIR/react*); exec.execSync(npm cache clean --force); exec.execSync(cd ios && xcodebuild clean && cd ..); exec.execSync(pod cache clean --all); exec.execSync(rm -rf ios/Pods); exec.execSync(rm -rf Podfile.lock); exec.execSync(cd ios && pod install --repo-update && cd ..); // exec.execSync(cd ios && pod install && cd ..); exec.execSync(react-native link); }

so the DerivedData folder is removed when i want to build the app. but the error still exists for the datepicker library

this is how installed the library.

expo install @react-native-community/datetimepicker

[kanzitelli]

From the script I can see that you remove lib/ios/DerivedData library, I've never seen it before. So I recommend to check this path as I mentioned before: /Users/drgrey/Library/Developer/Xcode/DerivedData.

If it doesn't help, try to downgrade the library.

I have removed @react-native-community/datetimepicker from the starter as it's an optional dependency for RN UI Lib, but before it was working. I don't think that Expo Modules started causing any issues.

[Yasir5247]

@kanzitelli somehow, its works fine now with the clean script i had. but you are right in that case :) Thank u for the help. i tested out one expo library and it works fine. date picker works fine too.

Thank you as always for the help. : )

[kanzitelli]

@Yasir5247 that's great news! Glad I could help :)

Then, I'm closing the issue.