https://reactnative.dev/docs/components-and-apis
npm run ios -- --simulator="iPhone SE (1st generation)"
yarn start --reset-cache
rm -fr ios/build ios/Pods node_modules && yarn install && (cd ios; pod install) && yarn start --reset-cache
<FlatList
data={array}
keyExtractor={item => item.id}
renderItem={({ item }) => ...}
/>
transformIgnorePatterns
is actually specifying which NPM packages you should transform, since their sources aren’t transpiled:
https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization
This does not work for me in Flipper or React Native Debugger; they give an error about an incorrect react-devtools
version.
Fix is to install and run react-devtools
instead of Flipper or React Native Debugger, using the version they specify:
$ npm i -g react-devtools@"<4.11.0"
$ react-devtools
(notice the quotes; Flipper says the wrong thing)
https://github.com/software-mansion/react-native-svg#installation https://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration
// package.json
{
//...
"jest": {
//...
"moduleNameMapper": {
"\\.svg": "<rootDir>/__mocks__/svgMock.js"
}
}
}
// __mocks__/svgMock.js
module.exports = 'SvgMock';
module.exports.ReactComponent = 'SvgMock';
$ yarn add react-native-svg
$ npx pod-install
$ yarn add --dev react-native-svg-transformer
// metro.config.js
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
$ expo install react-native-svg
$ yarn add --dev react-native-svg-transformer
// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer"),
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"],
};
return config;
})();