Android Support

This commit is contained in:
Nick Hudkins 2015-09-30 13:06:36 -04:00
parent 5a208de0ef
commit 2027e9c820
12 changed files with 303 additions and 12 deletions

8
.gitignore vendored
View File

@ -1,3 +1,11 @@
node_modules/**/*
build
BVLinearGradient.xcodeproj/xcuserdata/**/*
BVLinearGradient.xcodeproj/project.xcworkspace/**/*
.idea
.gradle/
gradlew
gradlew.bat
gradle/
*.properties
*.iml

View File

@ -1,11 +0,0 @@
'use strict';
var warning = require('warning');
var LinearGradient = {
test: function() {
warning("Not yet implemented for Android.");
}
};
module.exports = LinearGradient;

View File

@ -5,6 +5,8 @@ A `<LinearGradient>` 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 `<LinearGradient>` 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

34
android/build.gradle Normal file
View 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
View 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

View File

@ -0,0 +1,3 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.BV.LinearGradient">
</manifest>

View File

@ -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);
}
}

View File

@ -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;
}
}

View File

@ -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
View 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;

View File

@ -2,7 +2,6 @@
"name": "react-native-linear-gradient",
"version": "0.3.2",
"description": "A <LinearGradient> element for react-native",
"main": "LinearGradient.ios.js",
"author": {
"name": "Brent Vatne",
"email": "brentvatne@gmail.com",