React Native Template TypeScript Plus

React Native TypeScript Template with Superpowers.

• Features
• Usage
  • Usage with older versions of React Native
    • React Native <=> Template Version
• Troubleshooting
  • IOS
    • fatal error: 'openssl/opensslv.h' file not found
      • Solution 1 - Create Symbolic Links
      • Solution 2 - Disable Flipper
• Contributing
• License
• Credits

Features

• Elegant usage directly within the React Native CLI
• TypeScript Configured for Type safety and great Developer experience.
• Built-in dark mode that follows system preference (Experimental) or in app preference.
• Persistent Global State Management with Mobx State Tree and Async Storage using MST Persistent Store
• Splash Screen Configured using React Native Bootsplash
• Preconfigured Navigation System using React Navigation
• Deep Linking and Universal Linking Enabled
• Absolute Import using ~/ prefix.
• React Native Paper & Vector Icons Installed & Pre-configured.
• Easy version management with React Native Version
• Integrated README on the generated project!

Usage

npx react-native init MyApp --template react-native-template-ts-plus

Or use custom App Name and/or directory

npx react-native init MyApp --title 'My App' --directory 'my-app' --template react-native-template-ts-plus

Usage with older versions of React Native

npx react-native init MyApp --template [email protected].*

See the below table to find out which version of the template to use.

React Native <=> Template Version

React Native	Template
0.70.7	5.1.*
0.70.5	5.0.*
0.69.5	4.1.*
0.69.2	4.0.*
0.68.2	3.1.*
0.68.1	3.0.*
0.66.3	2.0.*
0.64.2	1.1.*
0.64.1	1.0.*

Troubleshooting

IOS

fatal error: 'openssl/opensslv.h' file not found

This should no longer happen on RN 0.68.1 and up (Template Version 3.0.0+).

This seems to happen on APFS Case Sensitive Filesystems when Flipper is enabled.

Solution 1 - Create Symbolic Links

Thanks to felexx90 for providing this solution.

Edit ios/Podfile and add the following lines inside post_install.

post_install do |installer|
    react_native_post_install(installer)
    # Fix OpenSSL-Universal on APFS Case Sensitive Filesystem
    system('cd Pods/Headers/Public; ln -s Protobuf protobuf')
    system('cd Pods/OpenSSL-Universal/Frameworks/OpenSSL.xcframework/ios-arm64_arm64e_armv7_armv7s; ln -sfh OpenSSL.framework openssl.framework')
    system('cd Pods/OpenSSL-Universal/Frameworks/OpenSSL.xcframework/ios-arm64_i386_x86_64-simulator; ln -sfh OpenSSL.framework openssl.framework')
    system('cd Pods/OpenSSL-Universal/Frameworks/OpenSSL.xcframework/ios-arm64_x86_64-maccatalyst; ln -sfh OpenSSL.framework openssl.framework')
    system('cd Pods/OpenSSL-Universal/Frameworks/OpenSSL.xcframework/macos-arm64_arm64e_x86_64; ln -sfh OpenSSL.framework openssl.framework')
  end

Now, reinstall pods.

cd ios && pod install

Solution 2 - Disable Flipper

If you do not need flipper you can just disable it to fix this error.

Edit ios/Podfile and comment out use_flipper!().

  # use_flipper!()

Now, reinstall pods and update repo.

cd ios && pod install --repo-update

Contributing

Contributions are very welcome. Please check out the contributing document.

License

This project is MIT licensed.

Credits

This repository and template is soft-forked from react-native-template-typescript .

All integrated and pre-configured libraries are the hard work of their respective authors and contributors.

The Awesome React Native Community