mirror of
https://github.com/status-im/react-native-linear-gradient.git
synced 2025-02-03 03:14:53 +00:00
Android Support
This commit is contained in:
parent
5a208de0ef
commit
2027e9c820
8
.gitignore
vendored
8
.gitignore
vendored
@ -1,3 +1,11 @@
|
|||||||
node_modules/**/*
|
node_modules/**/*
|
||||||
|
build
|
||||||
BVLinearGradient.xcodeproj/xcuserdata/**/*
|
BVLinearGradient.xcodeproj/xcuserdata/**/*
|
||||||
BVLinearGradient.xcodeproj/project.xcworkspace/**/*
|
BVLinearGradient.xcodeproj/project.xcworkspace/**/*
|
||||||
|
.idea
|
||||||
|
.gradle/
|
||||||
|
gradlew
|
||||||
|
gradlew.bat
|
||||||
|
gradle/
|
||||||
|
*.properties
|
||||||
|
*.iml
|
||||||
|
@ -1,11 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
var warning = require('warning');
|
|
||||||
|
|
||||||
var LinearGradient = {
|
|
||||||
test: function() {
|
|
||||||
warning("Not yet implemented for Android.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = LinearGradient;
|
|
44
README.md
44
README.md
@ -5,6 +5,8 @@ A `<LinearGradient>` component for react-native, as seen in
|
|||||||
|
|
||||||
### Add it to your project
|
### Add it to your project
|
||||||
|
|
||||||
|
####iOS
|
||||||
|
|
||||||
1. Run `npm install react-native-linear-gradient --save`
|
1. Run `npm install react-native-linear-gradient --save`
|
||||||
2. Open your project in XCode, right click on `Libraries` and click `Add
|
2. Open your project in XCode, right click on `Libraries` and click `Add
|
||||||
Files to "Your Project Name" [(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
Files to "Your Project Name" [(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
||||||
@ -20,6 +22,48 @@ A `<LinearGradient>` component for react-native, as seen in
|
|||||||
5. Whenever you want to use it within React code now you can: `var LinearGradient =
|
5. Whenever you want to use it within React code now you can: `var LinearGradient =
|
||||||
require('react-native-linear-gradient');`
|
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
|
## Examples
|
||||||
|
|
||||||
|
|
||||||
|
34
android/build.gradle
Normal file
34
android/build.gradle
Normal file
@ -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.+'
|
||||||
|
}
|
11
android/local.properties
Normal file
11
android/local.properties
Normal file
@ -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
|
3
android/src/main/AndroidManifest.xml
Normal file
3
android/src/main/AndroidManifest.xml
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
package="com.BV.LinearGradient">
|
||||||
|
</manifest>
|
@ -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<FrameLayout> {
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
@ -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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
|
||||||
|
return Collections.emptyList();
|
||||||
|
}
|
||||||
|
|
||||||
|
public List<Class<? extends JavaScriptModule>> createJSModules() {
|
||||||
|
return Collections.emptyList();
|
||||||
|
}
|
||||||
|
|
||||||
|
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
|
||||||
|
List<ViewManager> modules = new ArrayList<>();
|
||||||
|
modules.add(new LinearGradientManager());
|
||||||
|
return modules;
|
||||||
|
}
|
||||||
|
}
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
27
index.android.js
Normal file
27
index.android.js
Normal file
@ -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 (
|
||||||
|
<View style={style}>
|
||||||
|
<NativeLinearGradient
|
||||||
|
style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
|
||||||
|
colors={colors.map(processColor)}
|
||||||
|
positions={positions} />
|
||||||
|
{ children }
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', LinearGradient);
|
||||||
|
|
||||||
|
module.exports = LinearGradient;
|
@ -2,7 +2,6 @@
|
|||||||
"name": "react-native-linear-gradient",
|
"name": "react-native-linear-gradient",
|
||||||
"version": "0.3.2",
|
"version": "0.3.2",
|
||||||
"description": "A <LinearGradient> element for react-native",
|
"description": "A <LinearGradient> element for react-native",
|
||||||
"main": "LinearGradient.ios.js",
|
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Brent Vatne",
|
"name": "Brent Vatne",
|
||||||
"email": "brentvatne@gmail.com",
|
"email": "brentvatne@gmail.com",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user