Skip to content

Commit

Permalink
fix: merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
rajat693 committed Sep 10, 2024
2 parents 2b0393d + 6c6be0d commit f91d58a
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 12 deletions.
1 change: 1 addition & 0 deletions example/storybook-nativewind/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"@react-stately/collections": "^3.6.0",
"@react-stately/tree": "^3.5.0",
"@unitools/link": "^0.0.4",
"@unitools/image": "^0.0.5",
"expo": "^47.0.0",
"expo-linear-gradient": "^12.3.0",
"expo-status-bar": "~1.4.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { Meta } from '@storybook/addon-docs';
import { Image } from '../../core-components/nativewind';
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';
import UnitoolsImageEg from '../../extra-components/nativewind/UnitoolsImage';

import {
AppProvider,
Expand All @@ -28,6 +29,7 @@ import {
Tabs
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';
import UnitoolsImage from '@unitools/image';

This is an illustration of **Image** component.

Expand Down Expand Up @@ -136,17 +138,42 @@ It inherits all the properties of React Native's [Image](https://reactnative.dev

Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props).

<!--
## Spec Doc
### Example

Explore the comprehensive details of the Image in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
The Examples section offers visual previews of the component, letting you quickly identify the best fit for your needs. Just copy the code and use it in your project.

<iframe
style={{
borderRadius: '8px',
border: ' 1px solid rgba(0, 0, 0, 0.1)',
aspectRatio: 736 / 585,
}}
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6429-37300%26t%3Dh37ERUrDzeh1Zy7x-1%26scaling%3Dscale-down%26page-id%3D6429%253A35399%26starting-point-node-id%3D6429%253A37300%26mode%3Ddesign"
allowFullScreen
/> -->
#### Basic Unitools Image

The below example will run for both Expo and Next.js projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/image/) section of ```@unitools/image```.

```jsx
import Image from '@unitools/image';
```

<UnitoolsImageEg/>

<Wrapper>
<CodePreview
showComponentRenderer={false}
showArgsController={false}
metaData={{
code: `
<Image
source={require("@/assets/mountains.png")}
alt="Logo"
width={208}
height={320}
/>
`,
transformCode: (code) => {
return transformedCode(code);
},
scope: {
Wrapper,
UnitoolsImage:Image,
},
argsType: {
},
}}
/>
</Wrapper>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import { Image, Center } from '../../core-components/nativewind';

const UnitoolsImage = () => {
return (
<Center>
<Image
source={{
uri: 'https://images.unsplash.com/photo-1725476479171-4728f92dfa9c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D',
}}
alt="unitools-image"
className="h-52 w-80 mb-6"
/>
</Center>
);
};
export default UnitoolsImage;
4 changes: 4 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7231,6 +7231,10 @@
version "0.0.4"
resolved "https://registry.yarnpkg.com/@unitools/link/-/link-0.0.4.tgz#5587c95b25c2f71b81e5a3ddd81653d61f047b43"
integrity sha512-2vDHzcryiYGuMn+OFa/PvSLXn09pKgL+Tai1jN88MLsg/Pp5BVwc55rqe8juFbQCDcH4uHDT5TMq+IRynuIvVw==
"@unitools/image@^0.0.5":
version "0.0.5"
resolved "https://registry.yarnpkg.com/@unitools/image/-/image-0.0.5.tgz#3a41cff525b2eb4f925f9203486e5a8998ddd0b2"
integrity sha512-w34iTSvim5jqBunAJONMddyGOpKMyhd6lAD6mzqGyK9PV1qekMY3ajvpl9rvK8bE5cX3g5l07+QDEuT1ZWIQ2w==

"@urql/[email protected]":
version "2.3.6"
Expand Down

0 comments on commit f91d58a

Please sign in to comment.