3.0

yarn add solito

🌈 New Features

Example apps

• Upgraded all examples to Expo SDK 48
• Upgraded expo-router to v1

SolitoImage

Solito now uses expo-image. Please refer to the breaking changes below to migrate.

blurDataURL

SolitoImage now supports the blurDataURL on Native when you set placeholder="blur".

<SolitoImage 
  placeholder='blur'
  blurDataURL='|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj['
  {...props}
/>

contentPosition

You can use contentPosition to mirror the objectPosition behavior from Web.

<SolitoImage 
  contentPosition="top center"
/>

Note that you can use strings like center or top center. But if you want percentage values, you should pass them as an object, since this is the syntax supported by expo-image

<SolitoImage 
  // objectPosition="25% 50%" <- CSS equivalent
  contentPosition={{ top: '25%', left: '50%' }}
/>

👻 Breaking Changes

📸 SolitoImage now uses expo-image on iOS & Android

Previously, SolitoImage usedreact-native-fast-image on iOS & Android, and had a fallback for Expo. This behavior has changed in Solito v3.

Here's how to migrate from Solito v2:

If you're using Expo

• Upgrade to SDK 48+ with expo upgrade
• Install Expo Image in the Expo folder
  • cd apps/expo
  • expo install expo-image
  • yarn remove react-native-fast-image (this is important)
  • cd ../.. && yarn
  • Remember to rebuild your native dependencies: cd apps/expo && expo run:ios
• Expo Go users: If you previously used the alias in your babel.config.js that pointed solito/image to solito/image/expo, you should remove that, and then run expo start -c to clear the cache. If you didn't, have an alias in your Babel config, then you're all set.

If you aren't using Expo, click here

While SolitoImage uses expo-image on native, you can still use react-native-fast-image under the hood for SolitoImage for v3.

cd apps/expo
yarn add -D babel-plugin-module-resolver
cd ../..
yarn

Next, edit your apps/expo/babel.config.js file to add a resolution from solito/image to solito/image/react-native-fast-image.

// babel.config.js
module.exports = function (api) {
  api.cache(true)

  return {
    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
    plugins: [
      'react-native-reanimated/plugin',
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            'solito/image': 'solito/image/react-native-fast-image',
          },
        },
      ],
    ],
  }
}

next/image is still used under the hood for Web, no breaking changes there.