-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Parse NativeWind styles in custom Image & Link
- Loading branch information
Showing
11 changed files
with
90 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,37 @@ | ||
| import React from 'react' | ||
| import { StyleSheet, Text, View } from 'react-native' | ||
| import { Link } from '../navigation/Link' | ||
| import { Image } from '../components/Image' | ||
| import { View, Text, Image, Link } from '../components/styled' | ||
|
|
||
| /* --- <ImagesScreen/> --------------------------------------------------------------------------- */ | ||
|
|
||
| const ImagesScreen = () => { | ||
| return ( | ||
| <View style={styles.container}> | ||
| <View className="flex flex-1 justify-center items-center"> | ||
| <Link | ||
| href="/" | ||
| style={{ ...styles.backButton, ...styles.link, textDecorationLine: 'none' }} | ||
| className="text-blue-500 absolute top-8 web:top-0 left-0 p-4" | ||
| > | ||
| {`< Back`} | ||
| </Link> | ||
| {/* - 1 - */} | ||
| <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} /> | ||
| <Text style={styles.subtitle}>src=static-require | width: 60 | height: 60</Text> | ||
| <Text className="mt-2 mb-4 text-center text-base">src=static-require | width: 60 | height: 60</Text> | ||
| {/* - 2 - */} | ||
| <Image src="https://codinsonn.dev/_next/image?url=%2Fimg%2FCodelyFansLogoPic160x160.jpeg&w=256&q=75" width={60} height={60} /> | ||
| <Text style={styles.subtitle}>src=external-url | width: 60 | height: 60</Text> | ||
| <Text className="mt-2 mb-4 text-center text-base">src=external-url | width: 60 | height: 60</Text> | ||
| {/* - 3 - */} | ||
| <View style={{ width: 60, height: 80, position: 'relative', borderColor: 'black', borderStyle: 'dashed', borderWidth: 1 }}> | ||
| <View className="w-[60px] h-[80px] relative border-[1px] border-dashed border-black"> | ||
| <Image src={require('../assets/aetherspaceLogo.png')} fill /> | ||
| </View> | ||
| <Text style={styles.subtitle}>wrapper=50x80, relative | fill=true</Text> | ||
| <Text className="mt-2 mb-4 text-center text-base">wrapper=50x80, relative | fill=true</Text> | ||
| {/* - 4 - */} | ||
| <View style={{ width: 80, height: 60, position: 'relative', borderColor: 'black', borderStyle: 'dashed', borderWidth: 1 }}> | ||
| <View className="w-[80px] h-[60px] relative border-[1px] border-dashed border-black"> | ||
| <Image src={require('../assets/aetherspaceLogo.png')} fill contentFit="contain" /> | ||
| </View> | ||
| <Text style={styles.subtitle}>wrapper=80x60, relative | fill | contentFit=contain</Text> | ||
| <Text className="mt-2 mb-4 text-center text-base">wrapper=80x60, relative | fill | contentFit=contain</Text> | ||
| </View> | ||
| ) | ||
| } | ||
|
|
||
| /* --- Styles ---------------------------------------------------------------------------------- */ | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| backButton: { | ||
| position: 'absolute', | ||
| top: 16, | ||
| left: 16, | ||
| }, | ||
| subtitle: { | ||
| marginTop: 8, | ||
| marginBottom: 16, | ||
| fontSize: 16, | ||
| textAlign: 'center', | ||
| }, | ||
| link: { | ||
| marginTop: 16, | ||
| fontSize: 16, | ||
| color: 'blue', | ||
| textAlign: 'center', | ||
| textDecorationLine: 'underline', | ||
| }, | ||
| }) | ||
|
|
||
| /* --- Exports --------------------------------------------------------------------------------- */ | ||
|
|
||
| export default ImagesScreen |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
|
|
||
| /** --- parseNativeWindStyles() ---------------------------------------------------------------- */ | ||
| /** -i- Util to extract Nativewind's style and/or className from a styled() components style prop */ | ||
| export const parseNativeWindStyles = (style: any) => { | ||
| return Object.entries(style || {}).reduce( | ||
| (acc, [key, value]) => { | ||
| // If the key is unsupported, ignore it | ||
| if (['mask', 'childClassNames'].includes(key)) return acc | ||
| // If the key is a number, it's a Nativewind style | ||
| if (Number.isInteger(Number(key))) { | ||
| const isCSS = !!(value as Record<string, unknown>)['$$css'] | ||
| if (isCSS) { | ||
| // If it's a CSS object, add as a Nativewind className | ||
| const { '$$css': _, ...classNameObjects } = value as Record<string, unknown> | ||
| const className = [acc.nativeWindClassName, ...Object.values(classNameObjects)].filter(Boolean).join(' ') // prettier-ignore | ||
| return { ...acc, nativeWindClassName: className } | ||
| } else if (Array.isArray(value)) { | ||
| // If it's an array, we should merge the arrays | ||
| const flattenedStyles = value.reduce((acc, val) => ({ ...acc, ...val }), {}) | ||
| return { ...acc, nativeWindStyles: { ...acc.nativeWindStyles, ...flattenedStyles } } // prettier-ignore | ||
| } else { | ||
| // If it's a React-Native style object, check if we should merge arrays or objects | ||
| return { ...acc, nativeWindStyles: { ...acc.nativeWindStyles, ...(value as Record<string, unknown>) } } // prettier-ignore | ||
| } | ||
| } | ||
| // If the key is a string, it's a regular style | ||
| return { ...acc, restStyle: { ...acc.restStyle, [key]: value } } | ||
| }, | ||
| { nativeWindStyles: {}, nativeWindClassName: '', restStyle: {} } | ||
| ) | ||
| } |