DEV Community

Eric Samelson for Expo

Posted on

Expo SDK 38 is now available

Today, we're announcing our summer 2020 release, ☀️😎 Expo SDK 38 🍉☀️ ! SDK 38 continues both our focus on reliability and our investment in developer flexibility, as we work towards supporting fully customizable apps across Expo's entire suite of tools. Additionally, SDK 38 includes support for React Native 0.62, new and revamped templates, and a couple of useful new modules.

SDK 38 is the second of four quarterly SDKs we plan to release this year. Read on for more details about what's included!

⏰ New Notifications API in Managed workflow

Earlier this year, we embarked on a complete rewrite of the Expo Notifications module. We're excited that the revamped API is now more predictable, lets you control your notifications more easily, and is 100% compatible with both the Bare and Managed workflows! Check out the documentation for the new expo-notifications API here.

One change we especially love is how notifications are now handled consistently across platforms. Notification behavior now follows a simple rule of thumb:

If the notification is triggered while the app is in background,

  • it's presented immediately
  • the application is not informed of this

If the notification is triggered while the app is in foreground,

  • the application not only receives immediate information about this, but…
  • it can also decide at runtime whether to display a heads-up alert or play a sound! (For more information see the Notification Handler documentation.)

Unfortunately, in preparing this module within our 2020 commitment to time-based releases, we weren't able to include support for notification categories. We're working to land it ASAP in expo-notifications, and then it'll be available in the Bare workflow immediately, so sit tight!

Migrating from the legacy Notifications API

The legacy Notifications API (import { Notifications } from 'expo';) remains in SDK 38 for compatibility purposes, but it is deprecated and we expect to remove it in an upcoming release.

On Android, notifications can only be forwarded to one of the two APIs at a time, so you'll need to explicitly opt into the new API for now by setting android.useNextNotificationsApi to true in your app configuration. If the value is undefined or false, push notifications will only be forwarded to the legacy notifications API on Android. On iOS, you can use the new API with no extra configuration.

🦋 Build-time Updates in Bare workflow

With our last release, we introduced expo-updates, a brand-new library that lets you use over-the-air updates in any React Native app. Check out the documentation here.

We recently released an updated version of this library, expo-updates@0.2.x, which simplifies the workflow around updates in Bare workflow apps. Specifically, it introduces build-time updates, which means

  • release builds will create and embed a new update from the JavaScript source on disk at build-time, rather than embedding your latest published update; and
  • you no longer need to run expo publish before creating a release build for the first time.

For more detail, including how to upgrade from expo-updates@0.1.x, read this walkthrough.

⚡️ Faster Tooling, Better Performance

We're especially excited about some changes that have been in the works to make your development and bootstrapping experience even snappier!

First, we're bringing back the fastest way to create a React Native app. The new and improved create-react-native-app now has support for web along with iOS and Android, includes OTA updates out of the box, has 25+ templates you can choose from, and zero dependencies! Read more here.

Additionally, if you choose to use the more powerful features of expo-cli instead, you'll notice it's a lot faster to install; we've decreased the overall disk space usage by as much as 2.6x. And if you bootstrap a new SDK 38 project, the footprint of its node_modules will be 13% smaller than a comparable SDK 37 project.

The performance of these packages has been improved, too; we're shipping transpiled JS rather than JSX, and have dropped prop-types in favor of TypeScript, both of which bring faster compilation times.

💡 Revamped tabs template: simpler, dark mode support, TypeScript

We rebuilt the tabs template in TypeScript, removing all the fluff and focusing on the essentials needed to set developers out on a good path building their apps. We also built in dark mode support, because we've found that it's a lot easier if you think about it from the start rather than retrofitting it later on.

The new and improved tabs template on iOS

iOS is pictured above, but as always the template works just as well on the other platforms Expo supports: Android and Web.

✨ New Features

  • Authentication
  • Google Fonts
  • Screen Capture
  • Status Bar
  • Linking
  • Slider
  • Picker
  • Storage

Reimagined Authentication

We’ve completely rewritten expo-auth-session with primitives like Expo WebBrowser and Crypto. This reduces app size and decreases the need for native rebuilds since it can be used with many different providers. We can also update constantly between SDK releases with bug fixes and feature additions! You can check out our guides for 15+ different providers which we update frequently.

Google Fonts

https://raw.githubusercontent.com/expo/google-fonts/master/gifs/title.gif

The @expo-google-fonts packages for Expo allow you to easily use any of 991 fonts (and their variants) from fonts.google.com in your Expo app.

These packages and all these fonts work across web, iOS and Android, and are free to use and open source. Read more detail here and in the documentation.

New Screen Capture module

To give developers more power over the security of their apps, we added the expo-screen-capture module, which will allow you to hide your app's content when a user is screen recording or taking screen shots; this is particularly useful if a screen displays sensitive information. For references, examples, and limitations, check out the documentation.

New Status Bar module

We've also created an expo-status-bar module with a few important improvements over React Native's built-in StatusBar API. This new module sets the status bar to translucent by default on Android, and it also supports light and dark mode through the style="auto" and style="inverted" props. We have added expo-status-bar to every project template in expo-cli. Read the documentation and also check out the updated "Configuring the Status Bar" guide.

Improved Linking

The new expo-linking package makes it easier than ever to create deep links that work in both managed and bare workflow projects, and integrates smoothly with React Navigation v5 and our Auth Session APIs.

Third-Party Modules

Modules are extracted from React Native all the time to improve performance. To keep the runtime up to date, we've improved performance and added web support to some of the extracted packages to make them compatible with the Expo ecosystem.

The following packages are now available in the Expo client:

  • @react-native-community/slider
  • @react-native-community/picker
  • @react-native-community/async-storage
  • @react-native-community/segmented-control

Finally, you can now use @react-native-community/async-storage in Managed workflow apps. This change is backwards-compatible, so you don't need to update to SDK 38 to start using it. This doesn't add any new features or improvements, but it does help you integrate more easily with other libraries that assume you use @react-native-community/async-storage.

These packages are not fully maintained by Expo so test coverage, TypeScript support, and web compatibility may vary. We'll continue to use only the most stable versions of packages.

🛠 API improvements and additions

Background downloads and uploads with expo-file-system

Downloading external resources can be a difficult task with a lot of corner cases, such as handling when the application is moved to the background. To help with this, expo-file-system now supports background downloads, which won't be canceled when the user switches between different applications or when your device loses connection to the Internet. We've also added a new method that natively handles file uploads. For more information, check out the documentation.

New android.softwareKeyboardLayoutMode app.json key

One tricky part of building forms in mobile apps is that developers need to ensure that the on-screen "software keyboard" doesn't obscure the focused form element. Android lets you pick how you want this to be handled: you can resize the entire window so nothing will be drawn under the keyboard, or you can pan the window so the content is not underneath it. The native property that lets you control this is android:windowSoftInputMode .

In the past, all Expo apps have been configured to use the resize mode, but some developers have found this to be problematic for their apps because UI elements such as tab bars will be pushed up above the keyboard when it is enabled. If you would prefer to use the pan mode, you can now set the layout mode directly with android.softwareKeyboardLayoutMode in your app configuration. Find the key in the "android" section of "Configuration with app.json".

New android.allowBackup app.json key

Another security improvement we incorporated into this release is allowing developers to disable Android's Auto Backup feature. For Expo apps built with previous SDKs, your users' app data would be automatically backed up to their Google Drive. This will remain the default in SDK 38 (as it is in Android native apps), but if your app deals with sensitive information then you may want to set this field to false in your app configuration.

React Native 0.62

SDK 38 includes many of the new features and improvements that are part of React Native 0.62, including:

  • Dark mode support with the Appearance module and the useColorScheme hook (note that these APIs do not support web, so you may want to use react-native-appearance if that's important for your app);
  • Accessibility improvements, including new props like accessibilityValue and events like onSlidingComplete;
  • Significant improvements to React DevTools;
  • an optional new LogBox error and warning experience;

and lots more! Check out the React Native changelog for more details.

Flipper is currently unsupported in the Managed workflow. If you want to use Flipper, you'll need to use the Bare workflow for now (but you can still use all your favorite Expo modules in the Bare workflow!).

Other fixes and improvements

There are lots of other changes included in this release! Check out the full list on our changelog.

🧹 Dropping SDK 34; will drop SDK 35 next release

We routinely drop SDK versions that have low usage in order to reduce the number of versions that we need to support. This release sees the end of life for SDK 34. As usual, your standalone apps built with SDK 34 will continue to work; however, SDK 34 projects will no longer work within the latest version of the Expo client. If you want to re-run expo build, then you’ll need to upgrade from SDK 34, preferably to SDK 38 so you won’t need to update again for a while (and also because each Expo version is better than the last!).

Our next release is planned for September and we will be dropping support for SDK 35 at that time. If your project is running on SDK 35, consider upgrading to a newer version in the coming months.

AR removed

The AR module, which exposes the iOS ARKit library, has been experimental its entire lifetime and is not widely used. Rather than continue to maintain this library, we’ve decided to focus our limited resources elsewhere. Accordingly, the AR module has been removed from all SDK versions in the iOS Expo client version 2.16.0. Read more here.

🌟 ExpoKit → Bare workflow

In December, we shared our plans to spend 2020 making major investments to increasing your flexibility in customizing your apps with native code whenever and however you want. And in March, we announced that the Bare workflow now fully replaces ExpoKit. We’ve reached or exceeded feature parity between the Bare and ExpoKit workflows, and so we deprecated ExpoKit with SDK37, and we no longer support ejecting to ExpoKit in new projects.

As planned, SDK 38 will be the last release of ExpoKit. After SDK 38, your ExpoKit apps in the App Store and Play Store will continue to run indefinitely, but you'll need to migrate to the Bare or Managed workflows in order to get bugfixes and new features in Expo modules.

Read more details, including a guide for migrating ExpoKit projects to the Bare workflow, in this blog post.

⬆️ Upgrading your app

Here’s how to upgrade your app to Expo SDK 38.0.0 from 37.0.0:

  • Run expo upgrade in your project directory (requires the latest version of expo-cli, you can update with npm i -g expo-cli).
  • Make sure to check the changelog for other breaking changes!
  • Update the Expo app on your phones from the App Store / Google Play. expo-cli will automatically update your apps in simulators if you delete the existing apps, or you can run expo client:install:ios and expo client:install:android.
  • If you built a standalone app previously, remember that you'll need to create a new build in order to update the SDK version. Run expo build:ios and/or expo build:android when you are ready to do a new build for submission to stores.

Note: React Native 0.62 introduced a new warning when using the Animated API for animations. You’ll now need to specify useNativeDriver:true or useNativeDriver:false for all your Animated animations.

Updating ExpoKit to SDK 38

  • Follow the instructions given in the docs.
  • Please remember that SDK 38 will be the final update to ExpoKit. To read more, including our recommendations for migrating, see this blog post.

🗣 If you have general questions or comments, please share them in our community forums! We also welcome issue reports (and, of course, PRs) on Github.

Top comments (45)

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld • Edited

Missing in this post (for me):

  • It's now built against React 16.11 (React Native's update post also does a bad job at this)
  • Node 13 is no longer supported (expo-cli), upgrade to 14 (not that related, but important nonetheless)
  • It would be super helpful to have a list of updated native modules, as many of us were waiting for a specific fix to land. Here is the list as I use them (so not all of them) and I hope this helps someone:
module SDK 37 SDK 38
@react-native-community/masked-view 0.1.6 0.1.10
expo ~37.0.12 ^38.0.3
expo-linear-gradient ~8.1.0 ~8.2.1
expo-secure-store ~8.1.0 ~9.0.1
expo-splash-screen ^0.2.3 ~0.3.1
expo-web-browser ~8.2.1 ~8.3.1
react 16.9.0 16.11.0
react-dom 16.9.0 16.11.0
react-native-maps 0.26.1 0.27.1
react-native-reanimated ~1.7.1 ~1.9.0
react-native-safe-area-context 0.7.3 3.0.2
react-native-screens ~2.2.0 ~2.8.0
react-native-svg 11.0.1 12.1.0
react-native-webview 8.1.1 9.4.0

Additionally update your types:

module SDK 37 SDK 38
@types/react-native ~0.61.23 ~0.62.13
Collapse
 
brentvatne profile image
Brent Vatne

we started leaving this list out because the blog post becomes quite long, so we link to the changelog instead. also, we update everything automatically when you run expo upgrade, except for the types.. we should add that!

other points are useful too! thank you!

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld • Edited

Yep, expo upgrade finally worked smoothly (I had issues with 36 -> 37, 35 -> 36), so very happy with that. If this list was in the Changelog, that would work for me as well.

EDIT: expo upgrade upgraded react-native-screens to ~2.8.0, but it gave me a warning that it expected version range: ~2.9.0 - actual version installed: ~2.8.0. (expo install worked fine, just the upgrade).

The use case that's not covered if it's not listed anywhere is that quite a few times I've not added a module because there were issues with it (resolved upstream, waiting for next SDK) and I could then instantly see "ah it got bundled".

^^^

I'm just lazy ;)

Collapse
 
jineshshah36 profile image
Jinesh Shah

Why do you say node 13 is not suppprted? I looked in the repo and the engines field is set to > 6.x

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

Check out these lines in the expo-cli repo:

GitHub logo expo / expo-cli

Tools for creating, running, and deploying Universal Expo and React Native apps

Expo CLI

Tools for creating, running, and deploying Universal Expo and React Native apps

License: MIT Downloads
Circle CI

📚 Read the Documentation | Contributing to Expo CLI

Twitter: expo Medium: exposition


📚 Documentation

Learn about building and deploying universal apps in our official docs!

🗺 Project Layout

🏅 Badges

Let everyone know your app is universal with Expo!

runs with expo

runs with expo

[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

👏 Contributing

If you like the Expo CLI and want to help make it better then check out our contributing guide! Also check out the Expo repo to work on the Expo docs, modules, and components in the…

Thread Thread
 
jineshshah36 profile image
Jinesh Shah

Gotcha thanks, and good to know

Collapse
 
codingpen profile image
@coding_pen

As for now it is not, the most stable node is v12.18.1

Thread Thread
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

No, it won't be supported, because uneven node versions never become LTS. The "less stable" (current) version of 14.x works fine with expo :)

Collapse
 
brodanoel profile image
Broda Noel • Edited

Awesome job!!!
Glad to read that the in-app-payment is not done yet, because I would cry of happiness, and 2020 is already too much intense to bear more sentiments.
Thanks you a lot!

Collapse
 
ajinkabeer profile image
Ajin Kabeer • Edited

Just bumped to SDK 38, the upgrade ran successfully but got this weird warning while starting it up.

Any info on this?

Unrecognized event: {"type":"client_log","level":"log","data":["Running \"main\" with {\"initialProps\":{\"exp\":{\"lastErrors\":[{\"isFatal\":true,\"errorMessage\":\"Packager is not running at http://192.168.100.68:80\",\"exceptionId\":-253679629},{\"isFatal\":true,\"errorMessage\":\"Packager is not running at http://192.168.100.68:80\",\"exceptionId\":-931577078}],\"initialUri\":\"exp://192.168.100.68:19000\",\"manifest\":{\"iconUrl\":\"http://192.168.100.68:19001/assets/./assets/icon.png\",\"version\":\

Collapse
 
ajinkabeer profile image
Ajin Kabeer • Edited

Fixed this warning by bumping the expo-cli version

Collapse
 
fernandobonfimandrade profile image
Fernando Bonfim Andrade

How to do that?
I'm newbie

Collapse
 
rafesley profile image
wes

Hi, sorry to bother.
I tried upgrading from sdk 37 to 38 and it worked fine, but whenever I run expo start I get this error:

Failed building JavaScript bundle.
SyntaxError: /Users/Wesley/projects/app/node_modules/react-native-safe-area-context/src/SafeArea.types.ts: Unexpected token, expected ";" (42:19)

  40 |   children?: React.ReactNode;
  41 |   mode?: 'padding' | 'margin';
> 42 |   edges?: readonly Edge[];
     |                    ^
  43 | };
  44 |

I followed the tutorial and updated the expo-cli before running expo upgrade. I tried doing it again but got the same error. Tried deleting node modules because I thought it could be some conflict with an older version but it didn't work either. I'm not sure what's wrong since this safe-area module is a dependency from the expo package and I don't use it anywhere else.

Collapse
 
oneuptim profile image
oneuptim

Did you ever get this resolved? Running into the same issue as well.

Collapse
 
oneuptim profile image
oneuptim • Edited

Update: Seems like a week or so after sdk 38 was released with react-native-safe-area-context v3.0.3 and by the time of updating, it's now v3.0.7 which might be why this is happening, a dev added readonly to the type def is what it seems from the repo, see here -> github.com/th3rdwave/react-native-...

Updating my node version to latest v14.0.5 (at the time of this writing) seems to solve this for me. In addition, I deleted node_modules, yarn.lock, cleared expo cache (yarn cache clean or npm cache clean) and reinstalled everything a fresh. Even after all this, there were some dependancies that weren't added by expo and all I needed to do after was expo add <dependency_name>, hope this helps.

Thread Thread
 
rafesley profile image
wes

Thank you so much! It worked for me as well =)

Thread Thread
 
oneuptim profile image
oneuptim

Happy to hear that :)

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

New Status Bar module

Wooo. But not possible to update the Android Navigation Bar. Can't wait to have that parity so that they can be in sync, as opposed to only one updating.

Excited to upgrade tho!

Collapse
 
brentvatne profile image
Brent Vatne

can you elaborate on this and point me to a relevant issue?

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

On Android, there are three ways the bottom bar can show up:

Without any bar

In this case, the user can only navigate using gestures, and specifically edge-gestures.

Screenshot of an Android App without a bottom navigation bar

With a bar, without buttons

In this case, the user can navigate using gestures, as well as gestures on that navbar. This matches iOS for the most part. Expo's current app.json allows you to style this bar, but fails to allow you to use transparent values (system insets on that bottom bar don't seem to be set). There is no way to style this bar declaritively, or imperatively without ejecting and adding another native module.

Screenshot of an Android App with a bottom navigation bar, without buttons

With a bar, with buttons

In this case, the user can NOT navigate using gestures, and must use the soft buttons on the screen. Expo's current app.json allows you to style this bar. IIRC witht his mode transparent values are never allowed. There is no way to style this bar declaritively, or imperatively without ejecting and adding another native module.

Screenshot of an Android App with a bottom navigation bar, without buttons


Thread Thread
 
brentvatne profile image
Brent Vatne

we should definitely add a native module for this :)

Thread Thread
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

If I could get the expo/expo repo running on my (windows) machine, I'd write it -- but I had a pretty weird experience (both review wise as well as set-up wise) the last time I tried to contribute. Instead, I'll promise to report bugs once you'll got to it ❤️

Collapse
 
meatboy profile image
Meat Boy

<3 Love those changes.

Collapse
 
mtsprojects profile image
mtsprojects • Edited

Console.log( "Hello World! from server");
Through the following error after upgrade:

Unrecognized event: {"type":"client_log","level":"log","data":["{\"msg\": \"'Hello World!' from server\"}"]}

Collapse
 
ajinkabeer profile image
Ajin Kabeer

I got the same warning. Did you find why it's happening?

Collapse
 
mtsprojects profile image
mtsprojects

A new update just released a few hours ago solve the problem.

Thread Thread
 
ajinkabeer profile image
Ajin Kabeer

Oh really? I just upgraded to SDK 38 just five minutes ago :(

Thread Thread
 
mtsprojects profile image
mtsprojects

npm install -g expo-cli

Collapse
 
codingpen profile image
@coding_pen

For those guys who are using expo SDK<38 .0 you may have some troubles when trying to run your app ...to solve this just upgrade/update your current expo SDK e.g36, 35 to the current expo (38.0)......

Collapse
 
khnh88204010 profile image
Khánh

Thank you for guidance

dienmayvienthong.com/

Collapse
 
mtsprojects profile image
mtsprojects • Edited

It looks there is a problem with react native animation after upgrade form 37:
Animated: useNativeDriver was not specified.

Collapse
 
brentvatne profile image
Brent Vatne

thanks for reminding us of this, we'll update this post to provide more context for people. this is a change that came in react-native 0.62, see this issue: github.com/facebook/react-native/i...

Collapse
 
mtsprojects profile image
mtsprojects

I added useReactNative and it seems working for me

Collapse
 
faheem121 profile image
Faheem Ahmed

Hi, This is Faheem Ahmed. Video cropping is not available in the expo for Android.
Are you guys working on that?
we always use third party packages for that after ejecting from the expo.
kindly help this is frustrating to leave expo.

Collapse
 
sleeplessbyte profile image
Derk-Jan Karrenbeld

Check the Feature Requests to see if yours is listed, or create it.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.