diff --git a/.gitignore b/.gitignore index 4382bbd..28ec8f2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,11 @@ node_modules/**/* +build BVLinearGradient.xcodeproj/xcuserdata/**/* BVLinearGradient.xcodeproj/project.xcworkspace/**/* +.idea +.gradle/ +gradlew +gradlew.bat +gradle/ +*.properties +*.iml diff --git a/LinearGradient.android.js b/LinearGradient.android.js deleted file mode 100644 index 23e8086..0000000 --- a/LinearGradient.android.js +++ /dev/null @@ -1,11 +0,0 @@ -'use strict'; - -var warning = require('warning'); - -var LinearGradient = { - test: function() { - warning("Not yet implemented for Android."); - } -}; - -module.exports = LinearGradient; diff --git a/README.md b/README.md index 1c28f44..b79a389 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ A `` component for react-native, as seen in ### Add it to your project +####iOS + 1. Run `npm install react-native-linear-gradient --save` 2. Open your project in XCode, right click on `Libraries` and click `Add Files to "Your Project Name" [(Screenshot)](http://url.brentvatne.ca/g9Wp). @@ -20,6 +22,48 @@ A `` component for react-native, as seen in 5. Whenever you want to use it within React code now you can: `var LinearGradient = require('react-native-linear-gradient');` +#####Android + +1. in `android/settings.gradle` +``` + include ':app', ':react-native-linear-gradient' + project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') +``` + +2. in `android/app/build.gradle` add: +``` +dependencies { + ... + compile project(':react-native-linear-gradient') +} +``` + +3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` add: +``` +... +import com.BV.LinearGradient.LinearGradientPackage; // <--- This! +... +@Override +protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + mReactRootView = new ReactRootView(this); + + mReactInstanceManager = ReactInstanceManager.builder() + .setApplication(getApplication()) + .setBundleAssetName("index.android.bundle") + .setJSMainModuleName("index.android") + .addPackage(new MainReactPackage()) + .addPackage(new LinearGradientPackage()) // <---- and This! + .setUseDeveloperSupport(BuildConfig.DEBUG) + .setInitialLifecycleState(LifecycleState.RESUMED) + .build(); + + mReactRootView.startReactApplication(mReactInstanceManager, "SillyGoose", null); + + setContentView(mReactRootView); +} +``` + ## Examples diff --git a/android/build.gradle b/android/build.gradle new file mode 100644 index 0000000..20de8d6 --- /dev/null +++ b/android/build.gradle @@ -0,0 +1,34 @@ +buildscript { + repositories { + jcenter() + } + + dependencies { + classpath 'com.android.tools.build:gradle:1.3.0' + } +} + +apply plugin: 'com.android.library' + +android { + compileSdkVersion 23 + buildToolsVersion "23.0.1" + + defaultConfig { + minSdkVersion 16 + targetSdkVersion 22 + versionCode 1 + versionName "1.0" + } + lintOptions { + abortOnError false + } +} + +repositories { + mavenCentral() +} + +dependencies { + compile 'com.facebook.react:react-native:0.12.+' +} diff --git a/android/local.properties b/android/local.properties new file mode 100644 index 0000000..5b625e2 --- /dev/null +++ b/android/local.properties @@ -0,0 +1,11 @@ +## This file is automatically generated by Android Studio. +# Do not modify this file -- YOUR CHANGES WILL BE ERASED! +# +# This file must *NOT* be checked into Version Control Systems, +# as it contains information specific to your local configuration. +# +# Location of the SDK. This is only used by Gradle. +# For customization when using a Version Control System, please read the +# header note. +#Wed Sep 30 10:34:59 EDT 2015 +sdk.dir=/Users/nickhudkins/Library/Android/sdk diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml new file mode 100644 index 0000000..857da03 --- /dev/null +++ b/android/src/main/AndroidManifest.xml @@ -0,0 +1,3 @@ + + diff --git a/android/src/main/java/com/BV/LinearGradient/LinearGradientManager.java b/android/src/main/java/com/BV/LinearGradient/LinearGradientManager.java new file mode 100644 index 0000000..7ba0841 --- /dev/null +++ b/android/src/main/java/com/BV/LinearGradient/LinearGradientManager.java @@ -0,0 +1,58 @@ +package com.BV.LinearGradient; + +import android.view.View; +import android.widget.FrameLayout; + +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.uimanager.BaseViewPropertyApplicator; +import com.facebook.react.uimanager.CatalystStylesDiffMap; +import com.facebook.react.uimanager.ReactProp; +import com.facebook.react.uimanager.SimpleViewManager; +import com.facebook.react.uimanager.ThemedReactContext; + +public class LinearGradientManager extends SimpleViewManager { + + public static final String REACT_CLASS = "BVLinearGradient"; + public static final String PROP_COLORS = "colors"; + public static final String PROP_POSITIONS = "positions"; + + public LinearGradientView mGradientView; + + + @Override + public String getName() { + return REACT_CLASS; + } + + @Override + protected FrameLayout createViewInstance(ThemedReactContext context) { + return new FrameLayout(context); + } + + @ReactProp(name=PROP_COLORS) + public void updateColors(FrameLayout frame, ReadableArray colors){ + if(mGradientView != null) { + mGradientView.updateColors(colors); + } + } + + @ReactProp(name=PROP_POSITIONS) + public void updatePositions(FrameLayout frame, ReadableArray positions){ + if(mGradientView != null) { + mGradientView.updatePositions(positions); + } + } + + //I'd like to not do this this way. + @Override + public void updateView(FrameLayout frame, CatalystStylesDiffMap props) { + BaseViewPropertyApplicator.applyCommonViewProperties(frame, props); + + frame.removeAllViews(); + + mGradientView = new LinearGradientView(frame.getContext(), props); + mGradientView.setId(View.generateViewId()); + + frame.addView(mGradientView); + } +} diff --git a/android/src/main/java/com/BV/LinearGradient/LinearGradientPackage.java b/android/src/main/java/com/BV/LinearGradient/LinearGradientPackage.java new file mode 100644 index 0000000..32099d0 --- /dev/null +++ b/android/src/main/java/com/BV/LinearGradient/LinearGradientPackage.java @@ -0,0 +1,29 @@ +package com.BV.LinearGradient; + +import com.facebook.react.ReactPackage; +import com.facebook.react.bridge.JavaScriptModule; +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.uimanager.ViewManager; + +import java.util.ArrayList; +import java.util.Collections; +import java.util.List; + +public class LinearGradientPackage implements ReactPackage { + + @Override + public List createNativeModules(ReactApplicationContext reactContext) { + return Collections.emptyList(); + } + + public List> createJSModules() { + return Collections.emptyList(); + } + + public List createViewManagers(ReactApplicationContext reactContext) { + List modules = new ArrayList<>(); + modules.add(new LinearGradientManager()); + return modules; + } +} diff --git a/android/src/main/java/com/BV/LinearGradient/LinearGradientView.java b/android/src/main/java/com/BV/LinearGradient/LinearGradientView.java new file mode 100644 index 0000000..919514e --- /dev/null +++ b/android/src/main/java/com/BV/LinearGradient/LinearGradientView.java @@ -0,0 +1,89 @@ +package com.BV.LinearGradient; + +import android.content.Context; +import android.graphics.Canvas; +import android.graphics.LinearGradient; +import android.graphics.Paint; +import android.graphics.Shader; +import android.view.View; + +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.uimanager.CatalystStylesDiffMap; + + +public class LinearGradientView extends View { + + public static Paint mPaint; + public static LinearGradient mShader; + public static float[] mPositions; + public static int[] mColors; + + public LinearGradientView(Context context, CatalystStylesDiffMap props) { + super(context, null); + ReadableArray colors = props.getArray("colors"); + + try{ + ReadableArray positions = props.getArray("positions"); + mPositions= new float[positions.size()]; + for (int i=0; i < mPositions.length; i++) + { + mPositions[i] = (float) positions.getDouble(i); + } + } catch (Exception e) { + mPositions = null; + } + + + assert colors != null; + mColors = new int[colors.size()]; + for (int i=0; i < mColors.length; i++) + { + mColors[i] = colors.getInt(i); + } + + + mPaint = new Paint(); + updateGradient(getMeasuredHeight(), mColors, mPositions); + } + + + public void updateColors(ReadableArray colors){ + mColors = new int[colors.size()]; + for (int i=0; i < mColors.length; i++) + { + mColors[i] = colors.getInt(i); + } + updateGradient(getMeasuredHeight(), mColors, mPositions); + } + + public void updatePositions(ReadableArray positions){ + try { + assert positions != null; + mPositions= new float[positions.size()]; + for (int i=0; i < mPositions.length; i++) + { + mPositions[i] = (float) positions.getDouble(i); + } + } catch (Exception e) { + mPositions = null; + } + updateGradient(getMeasuredHeight(), mColors, mPositions); + } + + @Override + protected void onSizeChanged(int w, int h, int oldw, int oldh){ + updateGradient(h, mColors, mPositions); + } + + private void updateGradient(int height, int[] colors, float[] positions) { + mShader = new LinearGradient(0, 0, 0, height, colors, positions, Shader.TileMode.MIRROR); + mPaint.setShader(mShader); + invalidate(); + } + + @Override + protected void onDraw(Canvas canvas) { + super.onDraw(canvas); + canvas.drawPaint(mPaint); + } +} diff --git a/index.android.js b/index.android.js new file mode 100644 index 0000000..246e9c7 --- /dev/null +++ b/index.android.js @@ -0,0 +1,27 @@ +var React = require('react-native'); +var { requireNativeComponent, PropTypes, View, processColor } = React; + + +var LinearGradient = React.createClass({ + propTypes: { + colors: PropTypes.array.isRequired, + positions: PropTypes.array + }, + + render: function() { + var {style, children, colors, positions, ...otherProps} = this.props; + return ( + + + { children } + + ); + } +}) + + var NativeLinearGradient = requireNativeComponent('BVLinearGradient', LinearGradient); + + module.exports = LinearGradient; diff --git a/LinearGradient.ios.js b/index.ios.js similarity index 100% rename from LinearGradient.ios.js rename to index.ios.js diff --git a/package.json b/package.json index f2fb13a..00ccbc8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "react-native-linear-gradient", "version": "0.3.2", "description": "A element for react-native", - "main": "LinearGradient.ios.js", "author": { "name": "Brent Vatne", "email": "brentvatne@gmail.com",