feat: add examples to FabricExample

Author: WoLewicki

FabricExample/App.js

@@ -38,3 +38,5 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
 newArchEnabled=false
+
+disableMultipleInstancesCheck=true

FabricExample/android/gradle.properties

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src'
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

FabricExample/index.js

@@ -86,6 +86,7 @@
 		13B07FAE1A68108700A75B9A /* FabricExample */ = {
 			isa = PBXGroup;
 			children = (
+				236DEBB129377AED000A670D /* Fonts */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.mm */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
@@ -96,6 +97,13 @@
 			name = FabricExample;
 			sourceTree = "<group>";
 		};
+		236DEBB129377AED000A670D /* Fonts */ = {
+			isa = PBXGroup;
+			children = (
+			);
+			path = Fonts;
+			sourceTree = "<group>";
+		};
 		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (

FabricExample/ios/FabricExample.xcodeproj/project.pbxproj

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

FabricExample/ios/FabricExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,79 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import SectionFlex from './SectionFlex'
+import FastImage, { FastImageProps } from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import { useCacheBust } from './useCacheBust'
+
+const GIF_URL =
+    'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
+
+interface AutoSizingImageProps extends FastImageProps {
+    onLoad?: (event: any) => void
+    defaultHeight?: number
+    width: number
+    style?: any
+}
+
+const AutoSizingImage = (props: AutoSizingImageProps) => {
+    const [dimensions, setDimensions] = useState({
+        height: 0,
+        width: 0,
+    })
+
+    const propsOnLoad = props.onLoad
+    const onLoad = useCallback(
+        (e: any) => {
+            const {
+                nativeEvent: { width, height },
+            } = e
+            setDimensions({ width, height })
+            if (propsOnLoad) {
+                propsOnLoad(e)
+            }
+        },
+        [propsOnLoad],
+    )
+
+    const height = useMemo(() => {
+        if (!dimensions.height) {
+            return props.defaultHeight === undefined ? 300 : props.defaultHeight
+        }
+        const ratio = dimensions.height / dimensions.width
+        return props.width * ratio
+    }, [dimensions.height, dimensions.width, props.defaultHeight, props.width])
+    return (
+        <FastImage
+            {...props}
+            onLoad={onLoad}
+            style={[{ width: props.width, height }, props.style]}
+        />
+    )
+}
+
+export const AutoSizeExample = () => {
+    const { bust, url } = useCacheBust(GIF_URL)
+    return (
+        <View>
+            <Section>
+                <FeatureText text="• AutoSize." />
+            </Section>
+            <SectionFlex onPress={bust}>
+                <AutoSizingImage
+                    style={styles.image}
+                    width={200}
+                    source={{ uri: url }}
+                />
+            </SectionFlex>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: '#ddd',
+        margin: 20,
+        flex: 0,
+    },
+})

FabricExample/src/AutoSizeExample.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import SectionFlex from './SectionFlex'
+import FastImage from 'react-native-fast-image'
+import Section from './Section'
+import FeatureText from './FeatureText'
+import { useCacheBust } from './useCacheBust'
+
+const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
+
+export const BorderRadiusExample = () => {
+    const { query, bust } = useCacheBust('')
+    return (
+        <View>
+            <Section>
+                <FeatureText text="• Border radius." />
+            </Section>
+            <SectionFlex onPress={bust}>
+                <FastImage
+                    style={styles.imageSquare}
+                    source={{
+                        uri: IMAGE_URL + query,
+                    }}
+                />
+                <FastImage
+                    style={styles.imageRectangular}
+                    source={{
+                        uri: IMAGE_URL + query,
+                    }}
+                />
+            </SectionFlex>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    imageSquare: {
+        borderRadius: 50,
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        width: 100,
+        flex: 0,
+    },
+    imageRectangular: {
+        borderRadius: 50,
+        borderTopLeftRadius: 10,
+        borderBottomRightRadius: 10,
+        height: 100,
+        backgroundColor: '#ddd',
+        margin: 20,
+        flex: 1,
+    },
+    plus: {
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+    },
+})

FabricExample/src/BorderRadiusExample.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import FeatureText from './FeatureText'
+
+interface BulletTextProps {
+    text?: string
+    children?: any
+}
+
+const BulletText = ({ text, children }: BulletTextProps) => (
+    <FeatureText text={`• ${text || children} •`} />
+)
+
+export default BulletText

FabricExample/src/BulletText.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+interface ButtonProps {
+    text: string
+    onPress: () => void
+}
+
+const Button = ({ text, onPress }: ButtonProps) => (
+    <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+            <Text style={styles.text}>{text}</Text>
+        </View>
+    </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: 'black',
+        margin: 10,
+        height: 44,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: 'white',
+    },
+})
+
+export default Button

FabricExample/src/Button.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { Image } from 'react-native'
+import { ImageGrid } from './ImageGrid'
+
+const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
+
+export default DefaultImageGrid