Package Exports
- @hashiprobr/react-native-aspect-image
- @hashiprobr/react-native-aspect-image/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hashiprobr/react-native-aspect-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-aspect-image
A React Native Image that keeps the source aspect ratio
The AspectImage
React Component is an Image
that keeps the source aspect
ratio if one of its dimensions is unset.
Please note that one of its dimensions must be set, either explicitly by
width
, height
, or flexBasis
, or implicitly by a positive flexGrow
, an
alignSelf: 'stretch'
or an alignItens: 'stretch'
in the parent, otherwise
the image will be 0x0.
Peer dependencies
{
"@hashiprobr/react-use-mount-and-update": "1.0.5",
"react": "17.0.2",
"react-native": "0.68.2"
}
Install
With npm:
npm install @hashiprobr/react-native-aspect-image
With yarn:
yarn add @hashiprobr/react-native-aspect-image
If using Expo, add the module to webpack.config.js
:
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync({
...env,
babel: {
dangerouslyAddModulePathsToTranspile: [
'@hashiprobr/react-native-aspect-image',
],
},
}, argv);
return config;
};
If webpack.config.js
does not exist, create it with:
expo customize:web
Props
name | description |
---|---|
placeholder | the component shown while the source aspect ratio is being calculated (default null ) |
Example
import React from 'react';
import { Text } from 'react-native';
import AspectImage from '@hashiprobr/react-native-aspect-image';
export default function MyComponent() {
return (
<AspectImage
style={{ flexGrow: 1 }}
source={require('path/to/an/asset')}
placeholder={<Text>loading</Text>}
/>
);
}