├── .npmignore ├── windows ├── .npmignore ├── LinearGradientWPF │ ├── packages.config │ ├── Properties │ │ └── AssemblyInfo.cs │ └── LinearGradientWPF.csproj ├── LinearGradient │ ├── project.json │ ├── LinearGradientPackage.cs │ ├── Properties │ │ ├── AssemblyInfo.cs │ │ └── LinearGradient.rd.xml │ ├── LinearGradientManager.cs │ └── LinearGradient.csproj ├── LinearGradient.Shared │ ├── LinearGradient.Shared.projitems │ ├── LinearGradientPackage.cs │ ├── LinearGradient.Shared.shproj │ └── LinearGradientManager.cs ├── .gitignore └── LinearGradient.sln ├── .gitattributes ├── Examples ├── AnimatedGradient │ ├── .watchmanconfig │ ├── .gitattributes │ ├── app.json │ ├── .eslintrc.js │ ├── babel.config.js │ ├── android │ │ ├── app │ │ │ ├── src │ │ │ │ ├── main │ │ │ │ │ ├── res │ │ │ │ │ │ ├── values │ │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ │ └── styles.xml │ │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── java │ │ │ │ │ │ └── com │ │ │ │ │ │ │ └── animatedgradient │ │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ │ └── MainApplication.java │ │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── debug │ │ │ │ │ └── AndroidManifest.xml │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ ├── build_defs.bzl │ │ │ └── BUCK │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── settings.gradle │ │ ├── gradle.properties │ │ ├── build.gradle │ │ ├── gradlew.bat │ │ └── gradlew │ ├── ios │ │ ├── AnimatedGradient │ │ │ ├── Images.xcassets │ │ │ │ ├── Contents.json │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── AppDelegate.h │ │ │ ├── main.m │ │ │ ├── AppDelegate.m │ │ │ ├── Info.plist │ │ │ └── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ ├── AnimatedGradient.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── AnimatedGradientTests │ │ │ ├── Info.plist │ │ │ └── AnimatedGradientTests.m │ │ ├── AnimatedGradient-tvOSTests │ │ │ └── Info.plist │ │ ├── AnimatedGradient-tvOS │ │ │ └── Info.plist │ │ ├── Podfile │ │ └── AnimatedGradient.xcodeproj │ │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── AnimatedGradient.xcscheme │ │ │ └── AnimatedGradient-tvOS.xcscheme │ ├── .buckconfig │ ├── .prettierrc.js │ ├── index.js │ ├── __tests__ │ │ └── App-test.js │ ├── metro.config.js │ ├── package.json │ ├── .gitignore │ ├── App.js │ └── .flowconfig └── AnimatedGradientTransition │ ├── .watchmanconfig │ ├── .gitattributes │ ├── .eslintrc.js │ ├── babel.config.js │ ├── app.json │ ├── android │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── animatedgradienttransition │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ │ └── debug │ │ │ │ └── AndroidManifest.xml │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ ├── build_defs.bzl │ │ └── BUCK │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── gradle.properties │ ├── build.gradle │ ├── gradlew.bat │ └── gradlew │ ├── ios │ ├── AnimatedGradientTransition │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── AnimatedGradientTransition.xcworkspace │ │ ├── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ │ └── contents.xcworkspacedata │ ├── AnimatedGradientTransitionTests │ │ ├── Info.plist │ │ └── AnimatedGradientTransitionTests.m │ ├── AnimatedGradientTransition-tvOSTests │ │ └── Info.plist │ ├── AnimatedGradientTransition-tvOS │ │ └── Info.plist │ ├── Podfile │ └── AnimatedGradientTransition.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ ├── AnimatedGradientTransition.xcscheme │ │ └── AnimatedGradientTransition-tvOS.xcscheme │ ├── .buckconfig │ ├── .prettierrc.js │ ├── index.js │ ├── __tests__ │ └── App-test.js │ ├── metro.config.js │ ├── package.json │ ├── .gitignore │ ├── App.js │ ├── .flowconfig │ └── src │ └── AnimatedGradientTransition.js ├── ios ├── .npmignore ├── BVLinearGradientManager.h ├── BVLinearGradient.h ├── BVLinearGradientLayer.h ├── BVLinearGradientManager.m ├── BVLinearGradient.m └── BVLinearGradientLayer.m ├── images ├── example.png ├── example-animated.gif └── example-other-props.png ├── android ├── .npmignore ├── src │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── BV │ │ └── LinearGradient │ │ ├── LinearGradientPackage.java │ │ ├── LinearGradientManager.java │ │ └── LinearGradientView.java └── build.gradle ├── index.js ├── index.d.ts ├── common.js ├── BVLinearGradient.podspec ├── CHANGELOG.md ├── LICENSE ├── .gitignore ├── index.windows.js ├── package.json ├── index.ios.js ├── index.android.js ├── .flowconfig └── scripts └── examples_postinstall.js /.npmignore: -------------------------------------------------------------------------------- 1 | Examples/ 2 | -------------------------------------------------------------------------------- /windows/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /ios/.npmignore: -------------------------------------------------------------------------------- 1 | */project.xcworkspace/ 2 | */xcuserdata/ 3 | .DS_Store 4 | .npmignore 5 | Pods/ 6 | build/ 7 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AnimatedGradient", 3 | "displayName": "AnimatedGradient" 4 | } -------------------------------------------------------------------------------- /images/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/images/example.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /images/example-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/images/example-animated.gif -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /images/example-other-props.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/images/example-other-props.png -------------------------------------------------------------------------------- /ios/BVLinearGradientManager.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface BVLinearGradientManager : RCTViewManager 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AnimatedGradientTransition", 3 | "displayName": "AnimatedGradientTransition" 4 | } 5 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | AnimatedGradient 3 | 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /android/.npmignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .DS_Store 3 | .gradle/ 4 | .idea/ 5 | .npmignore 6 | build/ 7 | gradle/ 8 | gradlew 9 | gradlew.bat 10 | local.properties 11 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | AnimatedGradientTransition 3 | 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/debug.keystore -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /windows/LinearGradientWPF/packages.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/debug.keystore -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradient/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'AnimatedGradient' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wordpress-mobile/react-native-linear-gradient/trunk/Examples/AnimatedGradientTransition/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'AnimatedGradientTransition' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { Platform } from "react-native"; 2 | import LinearGradientIos from "./index.ios.js"; 3 | import LinearGradientAndroid from "./index.android.js"; 4 | 5 | const LinearGradient = Platform.OS === "ios" 6 | ? LinearGradientIos 7 | : LinearGradientAndroid; 8 | 9 | export default LinearGradient; 10 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /windows/LinearGradient/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2", 4 | "Newtonsoft.Json": "9.0.1" 5 | }, 6 | "frameworks": { 7 | "uap10.0": {} 8 | }, 9 | "runtimes": { 10 | "win10-arm": {}, 11 | "win10-arm-aot": {}, 12 | "win10-x86": {}, 13 | "win10-x86-aot": {}, 14 | "win10-x64": {}, 15 | "win10-x64-aot": {} 16 | } 17 | } -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/BVLinearGradient.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface BVLinearGradient : RCTView 4 | 5 | @property (nullable, nonatomic, copy) NSArray *colors; 6 | @property (nullable, nonatomic, copy) NSArray *locations; 7 | @property (nonatomic) CGPoint startPoint; 8 | @property (nonatomic) CGPoint endPoint; 9 | @property (nonatomic) BOOL useAngle; 10 | @property (nonatomic) CGPoint angleCenter; 11 | @property (nonatomic) CGFloat angle; 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/java/com/animatedgradient/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.animatedgradient; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "AnimatedGradient"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/java/com/animatedgradienttransition/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.animatedgradienttransition; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "AnimatedGradientTransition"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /ios/BVLinearGradientLayer.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @class UIColor; 5 | 6 | @interface BVLinearGradientLayer : CALayer 7 | 8 | @property (nullable, nonatomic, copy) NSArray *colors; 9 | @property (nullable, nonatomic, copy) NSArray *locations; 10 | @property (nonatomic) CGPoint startPoint; 11 | @property (nonatomic) CGPoint endPoint; 12 | @property (nonatomic) BOOL useAngle; 13 | @property (nonatomic) CGPoint angleCenter; 14 | @property (nonatomic) CGFloat angle; 15 | 16 | @end 17 | 18 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-native-linear-gradient' { 2 | import * as React from 'react'; 3 | import * as ReactNative from 'react-native'; 4 | 5 | export interface LinearGradientProps extends ReactNative.ViewProps { 6 | colors: (string | number)[]; 7 | start?: { x: number; y: number }; 8 | end?: { x: number; y: number }; 9 | locations?: number[]; 10 | useAngle?: boolean; 11 | angleCenter?: {x: number, y: number}; 12 | angle?: number; 13 | } 14 | 15 | export class LinearGradient extends React.Component {} 16 | 17 | export default LinearGradient; 18 | } 19 | -------------------------------------------------------------------------------- /common.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import type { ElementConfig } from 'react'; 4 | import { requireNativeComponent, typeof View } from 'react-native'; 5 | 6 | export default requireNativeComponent('BVLinearGradient'); 7 | 8 | export type Point = $ReadOnly<{| x: number, y: number |}>; 9 | 10 | type LinearGradientProps = $ReadOnly<{| 11 | start?: Point; 12 | end?: Point; 13 | colors: $ReadOnlyArray; 14 | locations?: $ReadOnlyArray; 15 | useAngle?: boolean; 16 | angleCenter?: Point; 17 | angle?: number; 18 | |}>; 19 | 20 | type ViewProps = ElementConfig; 21 | 22 | export type Props = {| ...LinearGradientProps, ...ViewProps |} 23 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /windows/LinearGradient.Shared/LinearGradient.Shared.projitems: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | $(MSBuildAllProjects);$(MSBuildThisFileFullPath) 5 | true 6 | 1336dbfa-5503-4e97-82ef-f0508b9318ab 7 | 8 | 9 | LinearGradient.Shared 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ios/BVLinearGradientManager.m: -------------------------------------------------------------------------------- 1 | #import "BVLinearGradientManager.h" 2 | #import "BVLinearGradient.h" 3 | #import 4 | 5 | @implementation BVLinearGradientManager 6 | 7 | RCT_EXPORT_MODULE(); 8 | 9 | @synthesize bridge = _bridge; 10 | 11 | - (UIView *)view 12 | { 13 | return [[BVLinearGradient alloc] init]; 14 | } 15 | 16 | - (dispatch_queue_t)methodQueue 17 | { 18 | return dispatch_get_main_queue(); 19 | } 20 | 21 | RCT_EXPORT_VIEW_PROPERTY(colors, NSArray); 22 | RCT_EXPORT_VIEW_PROPERTY(startPoint, CGPoint); 23 | RCT_EXPORT_VIEW_PROPERTY(endPoint, CGPoint); 24 | RCT_EXPORT_VIEW_PROPERTY(locations, NSArray); 25 | RCT_EXPORT_VIEW_PROPERTY(useAngle, BOOL); 26 | RCT_EXPORT_VIEW_PROPERTY(angleCenter, CGPoint); 27 | RCT_EXPORT_VIEW_PROPERTY(angle, CGFloat); 28 | 29 | @end 30 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | const path = require('path'); 9 | const blacklist = require('metro-config/src/defaults/blacklist'); 10 | 11 | const reactNativeLib = path.resolve(__dirname, '../..'); 12 | 13 | module.exports = { 14 | watchFolders: [path.resolve(__dirname, 'node_modules'), reactNativeLib], 15 | resolver: { 16 | blacklistRE: blacklist([ 17 | new RegExp(`${reactNativeLib}/node_modules/react-native/.*`), 18 | ]), 19 | }, 20 | transformer: { 21 | getTransformOptions: async () => ({ 22 | transform: { 23 | experimentalImportSupport: false, 24 | inlineRequires: false, 25 | }, 26 | }), 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /BVLinearGradient.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | version = JSON.parse(File.read('package.json'))["version"] 3 | 4 | Pod::Spec.new do |s| 5 | 6 | s.name = "BVLinearGradient" 7 | s.version = version 8 | s.homepage = "https://github.com/brentvatne/react-native-linear-gradient" 9 | s.summary = "A component for react-native" 10 | s.license = "MIT" 11 | s.author = { "Brent Vatne" => "brentvatne@gmail.com" } 12 | s.ios.deployment_target = '9.0' 13 | s.tvos.deployment_target = '9.0' 14 | s.source = { :git => "https://github.com/brentvatne/react-native-linear-gradient.git", :tag => "v#{s.version}" } 15 | s.source_files = 'ios/*.{h,m}' 16 | s.preserve_paths = "**/*.js" 17 | s.frameworks = 'UIKit', 'QuartzCore', 'Foundation' 18 | 19 | s.dependency 'React-Core' 20 | 21 | end 22 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AnimatedGradient", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-native start", 7 | "test": "jest", 8 | "lint": "eslint .", 9 | "postinstall": "node ../../scripts/examples_postinstall.js" 10 | }, 11 | "dependencies": { 12 | "react": "16.8.6", 13 | "react-native": "0.60.5", 14 | "react-native-linear-gradient": "file:../.." 15 | }, 16 | "devDependencies": { 17 | "@babel/core": "^7.5.5", 18 | "@babel/runtime": "^7.5.5", 19 | "@react-native-community/eslint-config": "^0.0.5", 20 | "babel-jest": "^24.9.0", 21 | "eslint": "^6.2.1", 22 | "jest": "^24.9.0", 23 | "metro-react-native-babel-preset": "^0.56.0", 24 | "react-test-renderer": "16.8.6" 25 | }, 26 | "jest": { 27 | "preset": "react-native" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradientTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransitionTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /windows/LinearGradient/LinearGradientPackage.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using ReactNative.Bridge; 4 | using ReactNative.Modules.Core; 5 | using ReactNative.UIManager; 6 | 7 | namespace LinearGradient 8 | { 9 | public class LinearGradientPackage : IReactPackage 10 | { 11 | public IReadOnlyList CreateNativeModules(ReactContext reactContext) 12 | { 13 | return new List(0); 14 | } 15 | 16 | public IReadOnlyList CreateJavaScriptModulesConfig() 17 | { 18 | return new List(0); 19 | } 20 | 21 | public IReadOnlyList CreateViewManagers(ReactContext reactContext) 22 | { 23 | return new List 24 | { 25 | new LinearGradientManager() 26 | }; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /windows/LinearGradient.Shared/LinearGradientPackage.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using ReactNative.Bridge; 4 | using ReactNative.Modules.Core; 5 | using ReactNative.UIManager; 6 | 7 | namespace LinearGradient 8 | { 9 | public class LinearGradientPackage : IReactPackage 10 | { 11 | public IReadOnlyList CreateNativeModules(ReactContext reactContext) 12 | { 13 | return new List(0); 14 | } 15 | 16 | public IReadOnlyList CreateJavaScriptModulesConfig() 17 | { 18 | return new List(0); 19 | } 20 | 21 | public IReadOnlyList CreateViewManagers(ReactContext reactContext) 22 | { 23 | return new List 24 | { 25 | new LinearGradientManager() 26 | }; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/ios/AnimatedGradient-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AnimatedGradientTransition", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-native start", 7 | "test": "jest", 8 | "lint": "eslint .", 9 | "postinstall": "node ../../scripts/examples_postinstall.js" 10 | }, 11 | "dependencies": { 12 | "lodash": "^4.17.15", 13 | "react": "16.8.6", 14 | "react-native": "0.60.5", 15 | "react-native-linear-gradient": "file:../.." 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.5.5", 19 | "@babel/runtime": "^7.5.5", 20 | "@react-native-community/eslint-config": "^0.0.5", 21 | "babel-jest": "^24.9.0", 22 | "eslint": "^6.2.1", 23 | "jest": "^24.9.0", 24 | "metro-react-native-babel-preset": "^0.56.0", 25 | "react-test-renderer": "16.8.6" 26 | }, 27 | "jest": { 28 | "preset": "react-native" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/ios/AnimatedGradientTransition-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # ChangeLog 2 | 3 | ## 2.5.5 4 | 5 | - Change Flow types to work with newer versions of Flow. 6 | 7 | ## 2.5.4 - 2019-03-18 8 | 9 | - Fix flow definition for LinearGradient prop types 10 | - Fix tvOS 11 | 12 | ## 2.5.3 - 2018-12-03 13 | 14 | - Fix angled gradient on Android 15 | - fix podspec 16 | - Fixed tvOS Target Membership for BVLinearGradientLayer.m 17 | 18 | ## 2.5.2 - 2018-11-26 19 | 20 | - Remove PropTypes + update Flow types 21 | 22 | ## 2.4.4 - 2018-11-16 23 | 24 | - Added support for angled gradient (iOS and Android) 25 | 26 | ## 2.4.3 - 2018-10-30 27 | 28 | - Rename start & end properties to fix conflict with RN 51 29 | - Check for ext property on Android gradle module 30 | - Setup dynamic version for Android SDK 31 | - Bump Android build tools and SDK version 32 | - Added TypeScript Typings 33 | - Bump target sdk 34 | - Use react native version that parent specifies 35 | - fixed lint 36 | - bump Android libs 37 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /android/src/main/java/com/BV/LinearGradient/LinearGradientPackage.java: -------------------------------------------------------------------------------- 1 | package com.BV.LinearGradient; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.Arrays; 10 | import java.util.Collections; 11 | import java.util.List; 12 | 13 | public class LinearGradientPackage implements ReactPackage { 14 | 15 | @Override 16 | public List createNativeModules(ReactApplicationContext reactContext) { 17 | return Collections.emptyList(); 18 | } 19 | 20 | // Deprecated RN 0.47 21 | public List> createJSModules() { 22 | return Collections.emptyList(); 23 | } 24 | 25 | @Override 26 | public List createViewManagers(ReactApplicationContext reactContext) { 27 | return Arrays.asList( 28 | new LinearGradientManager()); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | !debug.keystore 44 | 45 | # fastlane 46 | # 47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 48 | # screenshots whenever they are needed. 49 | # For more information about the recommended setup visit: 50 | # https://docs.fastlane.tools/best-practices/source-control/ 51 | 52 | */fastlane/report.xml 53 | */fastlane/Preview.html 54 | */fastlane/screenshots 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # CocoaPods 60 | /ios/Pods/ 61 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | !debug.keystore 44 | 45 | # fastlane 46 | # 47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 48 | # screenshots whenever they are needed. 49 | # For more information about the recommended setup visit: 50 | # https://docs.fastlane.tools/best-practices/source-control/ 51 | 52 | */fastlane/report.xml 53 | */fastlane/Preview.html 54 | */fastlane/screenshots 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # CocoaPods 60 | /ios/Pods/ 61 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 React Native Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /windows/LinearGradient.Shared/LinearGradient.Shared.shproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 1336dbfa-5503-4e97-82ef-f0508b9318ab 5 | 14.0 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | android/gradle/ 33 | android/gradlew 34 | android/gradlew.bat 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # fastlane 49 | # 50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 51 | # screenshots whenever they are needed. 52 | # For more information about the recommended setup visit: 53 | # https://docs.fastlane.tools/best-practices/source-control/ 54 | 55 | */fastlane/report.xml 56 | */fastlane/Preview.html 57 | */fastlane/screenshots 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # CocoaPods 63 | /ios/Pods/ 64 | -------------------------------------------------------------------------------- /Examples/AnimatedGradient/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:3.4.1") 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:3.4.1") 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /windows/LinearGradient/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("LinearGradient")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("BlueJeans Network")] 12 | [assembly: AssemblyProduct("LinearGradient")] 13 | [assembly: AssemblyCopyright("Copyright © BlueJeans Network 2017")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Version information for an assembly consists of the following four values: 18 | // 19 | // Major Version 20 | // Minor Version 21 | // Build Number 22 | // Revision 23 | // 24 | // You can specify all the values or you can default the Build and Revision Numbers 25 | // by using the '*' as shown below: 26 | // [assembly: AssemblyVersion("1.0.*")] 27 | [assembly: AssemblyVersion("1.0.0.0")] 28 | [assembly: AssemblyFileVersion("1.0.0.0")] 29 | [assembly: ComVisible(false)] -------------------------------------------------------------------------------- /index.windows.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @providesModule LinearGradient 3 | * @flow 4 | */ 5 | import React, { Component } from 'react'; 6 | import { processColor, View } from 'react-native'; 7 | 8 | import NativeLinearGradient from './common'; 9 | 10 | // TODO: Update Windows native code + update Props to share the same API with iOS/android 11 | type Props = { 12 | start?: number[]; 13 | end?: number[]; 14 | colors: string[]; 15 | locations?: number[]; 16 | } & typeof(View); 17 | 18 | export default class LinearGradient extends Component { 19 | props: Props; 20 | gradientRef: any; 21 | 22 | setNativeProps(props: Props) { 23 | this.gradientRef.setNativeProps(props); 24 | } 25 | 26 | render() { 27 | const { 28 | colors, 29 | locations, 30 | ...otherProps 31 | } = this.props; 32 | if ((colors && locations) && (colors.length !== locations.length)) { 33 | console.warn('LinearGradient colors and locations props should be arrays of the same length'); 34 | } 35 | 36 | return ( 37 | { this.gradientRef = component; }} 39 | {...otherProps} 40 | colors={colors.map(processColor)} 41 | locations={locations ? locations.slice(0, colors.length) : null} 42 | /> 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /windows/.gitignore: -------------------------------------------------------------------------------- 1 | #Visual Studio files 2 | *.[Oo]bj 3 | *.user 4 | *.aps 5 | *.pch 6 | *.vspscc 7 | *.vssscc 8 | *_i.c 9 | *_p.c 10 | *.ncb 11 | *.suo 12 | *.tlb 13 | *.tlh 14 | *.tlog 15 | *.bak 16 | *.[Cc]ache 17 | *.ilk 18 | *.log 19 | *.lib 20 | *.sbr 21 | *.sdf 22 | *.opensdf 23 | *.opendb 24 | *.unsuccessfulbuild 25 | *.lastbuildstate 26 | ipch/ 27 | [Oo]bj/ 28 | [Bb]in 29 | [Dd]ebug*/ 30 | [Rr]elease*/ 31 | *.tlog/ 32 | Ankh.NoLoad 33 | UpgradeLog.htm 34 | 35 | #MonoDevelop 36 | *.pidb 37 | *.userprefs 38 | 39 | #Tooling 40 | _ReSharper*/ 41 | *.resharper 42 | [Tt]est[Rr]esult* 43 | *.sass-cache 44 | 45 | #Project files 46 | [Bb]uild/ 47 | 48 | #Subversion files 49 | .svn 50 | 51 | # Office Temp Files 52 | ~$* 53 | 54 | # vim Temp Files 55 | *~ 56 | 57 | #NuGet 58 | packages/ 59 | *.nupkg 60 | 61 | #ncrunch 62 | *ncrunch* 63 | *crunch*.local.xml 64 | 65 | # visual studio database projects 66 | *.dbmdl 67 | 68 | #Test files 69 | *.testsettings 70 | 71 | #Other files 72 | *.DotSettings 73 | .vs/ 74 | .vscode/ 75 | *project.lock.json 76 | 77 | #JavaScript files 78 | *.jsbundle 79 | 80 | # Visual C++ cache files 81 | ipch/ 82 | *.aps 83 | *.ncb 84 | *.opendb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | *.VC.db 89 | *.VC.VC.opendb 90 | 91 | # Build results 92 | [Dd]ebugPublic/ 93 | [Rr]eleases/ 94 | x64/ 95 | x86/ 96 | bld/ 97 | [Ll]og/ 98 | -------------------------------------------------------------------------------- /Examples/AnimatedGradientTransition/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | * @flow 7 | */ 8 | 9 | import React, {Component} from 'react'; 10 | import {Button, StyleSheet, View, Text} from 'react-native'; 11 | 12 | import AnimatedGradientTransition from './src/AnimatedGradientTransition'; 13 | 14 | const styles = StyleSheet.create({ 15 | container: { 16 | flex: 1, 17 | justifyContent: 'center', 18 | alignItems: 'center', 19 | backgroundColor: '#F5FCFF', 20 | }, 21 | title: { 22 | fontSize: 20, 23 | textAlign: 'center', 24 | }, 25 | gradient: { 26 | width: 200, 27 | height: 200, 28 | margin: 20, 29 | }, 30 | }); 31 | 32 | export default class App extends Component<{}, {clicked: boolean}> { 33 | constructor() { 34 | super(); 35 | 36 | this.state = { 37 | clicked: false, 38 | }; 39 | } 40 | 41 | handleBtnPress = () => { 42 | this.setState({ 43 | clicked: !this.state.clicked, 44 | }); 45 | }; 46 | 47 | render() { 48 | const {clicked} = this.state; 49 | 50 | return ( 51 | 52 | Animated Gradient Transition 53 | 57 |