yarn add @kanzitelli/if-component
import {If} from '@kanzitelli/if-component'; class OrdersScreen = () => { return ( <> <If _={loading} _then={<LoadingIndicator />} _else={<SomethingElse />} /> </> ) }
Since if-component uses Reanimated 2, we need its babel plugin to be applied. Expo Web doesn't transpile modules by default, so we'll need to tell it to transpile the library.
- Install
@expo/webpack-config:
yarn add -D @expo/webpack-config
- Create
webpack.config.jsin the root of your project:
const createExpoWebpackConfigAsync = require('@expo/webpack-config')
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
babel: { dangerouslyAddModulePathsToTranspile: ['@kanzitelli/if-component'] },
},
argv
)
return config
}
Don't forget to add webpack.config.js into tsconfig.json under exclude section, if needed.
> git clone https://github.com/kanzitelli/if-component rn-lib > cd rn-lib && rm -rf .git > yarn
Don't forget to change your lib's name in package.json and check other scripts.