Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update docs for extra info for react native web compatibility #336

Merged
merged 1 commit into from
Jul 25, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/sdk/client-side-sdks/react-native/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ This SDK is not compatible with React Native Expo.

:::

:::caution

Extra steps are required to get DevCycle working with React Native Web. See the [React Native Web](#react-native-web) section below for more information.

:::

:::info

Currently, DevCycle for React Native only supports access via functional component hooks.
Expand All @@ -31,3 +37,27 @@ The SDK is available as a package on npm. It is also open source and can be view
## Requirements:

This SDK is compatible with _React Native_ version 0.64.0 and above.

## React Native Web

To get your React Native Web working with DevCycle, you will need to change one of the rules in the webpack config to include `.cjs` files as one of the file types to be transpiled, e.g.:
jsalaber marked this conversation as resolved.
Show resolved Hide resolved

```js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);

config.module.rules = config.module.rules.map(rule => {
if (rule.oneOf instanceof Array) {
// add "cjs" as an exclusion to this rule to prevent it from being regarded as an asset
rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
}
return rule;
});

return config;
};
```

For more information, see [this](https://github.com/facebook/create-react-app/pull/12021#issuecomment-1108426483) Github issue.