render() {
const source = resolveAssetSource(this.props.source);
if (source && source.uri){
const props = {...this.props, src: source.uri };
return <ZoomImage {...props} />;
}
return null
}
annotations = annotations && annotations.map((annotation: Object) => {
let {
id,
image,
tintColor,
view,
leftCalloutView,
rightCalloutView,
} = annotation;
if (!view && image && tintColor) {
view = <Image
style={{
tintColor: processColor(tintColor),
}}
source={image}
/>;
image = undefined;
}
if (view) {
if (image) {
console.warn('`image` and `view` both set on annotation. Image will be ignored.');
}
var viewIndex = children.length;
children.push(React.cloneElement(view, {
style: [styles.annotationView, view.props.style || {}]
}));
}
if (leftCalloutView) {
var leftCalloutViewIndex = children.length;
children.push(React.cloneElement(leftCalloutView, {
style: [styles.calloutView, leftCalloutView.props.style || {}]
}));
}
if (rightCalloutView) {
var rightCalloutViewIndex = children.length;
children.push(React.cloneElement(rightCalloutView, {
style: [styles.calloutView, rightCalloutView.props.style || {}]
}));
}
let result = {
...annotation,
tintColor: tintColor && processColor(tintColor),
image,
viewIndex,
leftCalloutViewIndex,
rightCalloutViewIndex,
view: undefined,
leftCalloutView: undefined,
rightCalloutView: undefined,
};
result.id = id || encodeURIComponent(JSON.stringify(result));
result.image = image && resolveAssetSource(image);
return result;
});
render: function() {
var otherView = null;
if (this.state.viewState === WebViewBridgeState.LOADING) {
otherView = this.props.renderLoading && this.props.renderLoading();
} else if (this.state.viewState === WebViewBridgeState.ERROR) {
var errorEvent = this.state.lastErrorEvent;
otherView = this.props.renderError && this.props.renderError(
errorEvent.domain,
errorEvent.code,
errorEvent.description);
} else if (this.state.viewState !== WebViewBridgeState.IDLE) {
console.error('RCTWebViewBridge invalid state encountered: ' + this.state.loading);
}
var webViewStyles = [styles.container, this.props.style];
if (this.state.viewState === WebViewBridgeState.LOADING ||
this.state.viewState === WebViewBridgeState.ERROR) {
// if we're in either LOADING or ERROR states, don't show the webView
webViewStyles.push(styles.hidden);
}
var {javaScriptEnabled, domStorageEnabled} = this.props;
if (this.props.javaScriptEnabledAndroid) {
console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead');
javaScriptEnabled = this.props.javaScriptEnabledAndroid;
}
if (this.props.domStorageEnabledAndroid) {
console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead');
domStorageEnabled = this.props.domStorageEnabledAndroid;
}
let {source, ...props} = {...this.props};
var webView =
<RCTWebViewBridge
ref={RCT_WEBVIEWBRIDGE_REF}
key="webViewKey"
{...props}
source={resolveAssetSource(source)}
style={webViewStyles}
onLoadingStart={this.onLoadingStart}
onLoadingFinish={this.onLoadingFinish}
onLoadingError={this.onLoadingError}
/>;
return (
<View style={styles.container}>
{webView}
{otherView}
</View>
);
},
function _processProperties(properties) {
for (var property in properties) {
if (properties.hasOwnProperty(property)) {
if (property === 'icon' || property.endsWith('Icon')) {
properties[property] = resolveAssetSource(properties[property]);
}
if (property === 'color' || property.endsWith('Color')) {
properties[property] = processColor(properties[property]);
}
if (property === 'buttons' || property.endsWith('Buttons')) {
_processButtons(properties[property]);
}
}
}
}
function getFab(screen) {
let fab = screen.fab;
if (screen.navigatorButtons && screen.navigatorButtons.fab) {
fab = screen.navigatorButtons.fab;
}
if (fab === null || fab === undefined) {
return;
}
if (Object.keys(fab).length === 0 ) {
return {};
}
const collapsedIconUri = resolveAssetSource(fab.collapsedIcon);
if (!collapsedIconUri) {
return;
}
fab.collapsedIcon = collapsedIconUri.uri;
if (fab.expendedIcon) {
const expendedIconUri = resolveAssetSource(fab.expendedIcon);
if (expendedIconUri) {
fab.expendedIcon = expendedIconUri.uri;
}
}
if (fab.backgroundColor) {
fab.backgroundColor = processColor(fab.backgroundColor);
}
if (fab.actions) {
_.forEach(fab.actions, (action) => {
action.icon = resolveAssetSource(action.icon).uri;
return action;
});
}
return fab;
}
render() {
let image;
if (this.props.image) {
image = resolveAssetSource(this.props.image) || {};
image = image.uri;
}
return (
<AIRMapMarker
ref={ref => { this.marker = ref; }}
{...this.props}
image={image}
style={[styles.marker, this.props.style]}
/>
);
}
rightButtons.forEach(function(button) {
button.enabled = !button.disabled;
if (button.icon) {
const icon = resolveAssetSource(button.icon);
if (icon) {
button.icon = icon.uri;
}
}
if (button.buttonColor) {
button.color = processColor(button.buttonColor);
}
if (button.component) {
const passPropsKey = _.uniqueId('customButtonComponent');
PropRegistry.save(passPropsKey, button.passProps);
button.passProps = {passPropsKey};
}
});
render: function() {
var image = undefined;
if (this.props.image) {
image = resolveAssetSource(this.props.image) || {};
image = image.uri;
}
return (
<AIRMapMarker
ref="marker"
{...this.props}
image={image}
style={[styles.marker, this.props.style]}
onPress={this._onPress}
/>
);
},
render() {
let {props} = this;
let modes = props.preserveAspectRatio.trim().split(spacesRegExp);
let meetOrSlice = meetOrSliceTypes[modes[1]] || 0;
let align = alignEnum[modes[0]] || 'xMidYMid';
return <RNSVGImage
ref={ele => {this.root = ele;}}
{...this.extractProps({...props, x: null, y: null}, {responder: true, transform: true})}
x={props.x.toString()}
y={props.y.toString()}
width={props.width.toString()}
height={props.height.toString()}
meetOrSlice={meetOrSlice}
align={align}
src={resolveAssetSource(props.href)}
/>;
}
function addNavigatorButtons(screen, sideMenuParams) {
const Screen = Navigation.getRegisteredScreen(screen.screen);
if (screen.navigatorButtons == null) {
screen.navigatorButtons = _.cloneDeep(Screen.navigatorButtons);
}
// Get image uri from image id
const rightButtons = getRightButtons(screen);
if (rightButtons) {
rightButtons.forEach(function(button) {
button.enabled = !button.disabled;
if (button.icon) {
const icon = resolveAssetSource(button.icon);
if (icon) {
button.icon = icon.uri;
}
}
});
}
let leftButton = getLeftButton(screen);
if (leftButton) {
if (leftButton.icon) {
const icon = resolveAssetSource(leftButton.icon);
if (icon) {
leftButton.icon = icon.uri;
}
}
}
const fab = getFab(screen);
if (fab) {
screen.fab = fab;
}
if (rightButtons) {
screen.rightButtons = rightButtons;
}
if (leftButton) {
screen.leftButton = leftButton;
}
}
render() {
let image;
if (this.props.image) {
image = resolveAssetSource(this.props.image) || {};
image = image.uri || this.props.image;
}
const AIRMapMarker = this.getAirComponent();
return (
<AIRMapMarker
ref={ref => {
this.marker = ref;
}}
{...this.props}
image={image}
style={[styles.marker, this.props.style]}
/>
);
}
function navigatorSetButtons(navigator, navigatorEventID, _params) {
const params = _.cloneDeep(_params);
if (params.rightButtons) {
params.rightButtons.forEach(function(button) {
button.enabled = !button.disabled;
if (button.icon) {
const icon = resolveAssetSource(button.icon);
if (icon) {
button.icon = icon.uri;
}
}
if (button.buttonColor) {
button.color = processColor(button.buttonColor);
}
if (button.component) {
const passPropsKey = _.uniqueId('customButtonComponent');
PropRegistry.save(passPropsKey, button.passProps);
button.passProps = {passPropsKey};
}
});
}
let leftButton = getLeftButton(params);
if (leftButton) {
if (leftButton.icon) {
const icon = resolveAssetSource(leftButton.icon);
if (icon) {
leftButton.icon = icon.uri;
}
}
if (leftButton.buttonColor) {
leftButton.color = processColor(leftButton.buttonColor);
}
} else if (shouldRemoveLeftButton(params)) {
leftButton = {};
}
const fab = getFab(params);
newPlatformSpecific.setScreenButtons(navigator.screenInstanceID, navigatorEventID, params.rightButtons, leftButton, fab);
}
React.Children.forEach(section.props.children, function (child, itemIndex) {
var el = {};
extend(el, section.props);
extend(el, child.props);
if (el.children) {
el.label = el.children;
}
if (el.image && typeof el.image === 'number') {
el.image = resolveAssetSource(el.image);
}
count++;
items.push(el);
if (child.type==TableView.Cell){
customCells = true;
count++;
var element = React.cloneElement(child, {key: index+" "+itemIndex, section: index, row: itemIndex});
children.push(element);
}
});
function navigatorSetButtons(navigator, navigatorEventID, params) {
if (params.rightButtons) {
params.rightButtons.forEach(function(button) {
button.enabled = !button.disabled;
if (button.icon) {
const icon = resolveAssetSource(button.icon);
if (icon) {
button.icon = icon.uri;
}
}
});
}
const leftButton = getLeftButton(params);
if (leftButton) {
if (leftButton.icon) {
const icon = resolveAssetSource(leftButton.icon);
if (icon) {
leftButton.icon = icon.uri;
}
}
}
newPlatformSpecific.setScreenTitleBarButtons(navigator.screenInstanceID, navigatorEventID, params.rightButtons, leftButton);
}
push: function (params) {
var unsubscribes = [];
if (params['style']) {
params['style'] = Object.assign({}, params['style']);
_processProperties(params['style']);
}
if (params['titleImage']) {
params['titleImage'] = resolveAssetSource(params['titleImage']);
}
if (params['leftButtons']) {
var unsubscribe = _processButtons(params['leftButtons']);
unsubscribes.push(unsubscribe);
}
if (params['rightButtons']) {
var unsubscribe = _processButtons(params['rightButtons']);
unsubscribes.push(unsubscribe);
}
RCCManager.NavigationControllerIOS(id, "push", params);
return function() {
for (var i = 0 ; i < unsubscribes.length ; i++) {
if (unsubscribes[i]) { unsubscribes[i](); }
}
};
},
import React, {Component} from 'react';
import GL from "gl-react"
// Washed out colour with gradient
// Inspiration: https://github.com/danielgindi/Instagram-Filters/blob/master/InstaFilters/Resources_for_FiltersViewController/DSFilterTileHudson%402x.png
const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource");
const inputImageTexture2 = resolveAssetSource(require('../../assets/filters/brannanBlowout.png'))
const inputImageTexture3 = resolveAssetSource(require('../../assets/filters/hudsonBackground.png'))
const inputImageTexture4 = resolveAssetSource(require('../../assets/filters/hudsonMap.png'))
const shaders = GL.Shaders.create({
hudson: {
frag: `
precision lowp float;
varying highp vec2 uv;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2; //blowout background ;
uniform sampler2D inputImageTexture3; //overlay soft light;
uniform sampler2D inputImageTexture4; //map gradient
void main()
{
vec4 texel = texture2D(inputImageTexture, uv);
vec4 a = texture2D(inputImageTexture, uv);
vec4 b = texture2D(inputImageTexture2, uv);
vec4 c = texture2D(inputImageTexture3, uv);
vec4 d = texture2D(inputImageTexture4, uv);
function showFAB(params) {
params.icon = resolveAssetSource(params.icon).uri;
RctActivity.showFAB(params);
}
_.forEach(fab.actions, (action) => {
action.icon = resolveAssetSource(action.icon).uri;
return action;
});
function convertStyleParams(originalStyleObject) {
if (!originalStyleObject) {
return null;
}
let ret = {
orientation: originalStyleObject.orientation,
statusBarColor: processColor(originalStyleObject.statusBarColor),
topBarColor: processColor(originalStyleObject.navBarBackgroundColor),
topBarTransparent: originalStyleObject.navBarTransparent,
topBarTranslucent: originalStyleObject.navBarTranslucent,
topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
collapsingToolBarCollapsedColor: processColor(originalStyleObject.collapsingToolBarCollapsedColor),
collapsingToolBarExpendedColor: processColor(originalStyleObject.collapsingToolBarExpendedColor),
showTitleWhenExpended: originalStyleObject.showTitleWhenExpended,
expendCollapsingToolBarOnTopTabChange: originalStyleObject.expendCollapsingToolBarOnTopTabChange,
titleBarHidden: originalStyleObject.navBarHidden,
titleBarHideOnScroll: originalStyleObject.navBarHideOnScroll,
titleBarTitleColor: processColor(originalStyleObject.navBarTextColor),
titleBarSubtitleColor: processColor(originalStyleObject.navBarSubtitleColor),
titleBarButtonColor: processColor(originalStyleObject.navBarButtonColor),
titleBarDisabledButtonColor: processColor(originalStyleObject.titleBarDisabledButtonColor),
backButtonHidden: originalStyleObject.backButtonHidden,
topTabsHidden: originalStyleObject.topTabsHidden,
contextualMenuStatusBarColor: processColor(originalStyleObject.contextualMenuStatusBarColor),
contextualMenuBackgroundColor: processColor(originalStyleObject.contextualMenuBackgroundColor),
contextualMenuButtonsColor: processColor(originalStyleObject.contextualMenuButtonsColor),
drawBelowTopBar: !originalStyleObject.drawUnderNavBar,
topTabTextColor: processColor(originalStyleObject.topTabTextColor),
topTabIconColor: processColor(originalStyleObject.topTabIconColor),
selectedTopTabIconColor: processColor(originalStyleObject.selectedTopTabIconColor),
selectedTopTabTextColor: processColor(originalStyleObject.selectedTopTabTextColor),
selectedTopTabIndicatorHeight: originalStyleObject.selectedTopTabIndicatorHeight,
selectedTopTabIndicatorColor: processColor(originalStyleObject.selectedTopTabIndicatorColor),
topTabScrollable: originalStyleObject.topTabScollable,
screenBackgroundColor: processColor(originalStyleObject.screenBackgroundColor),
drawScreenAboveBottomTabs: !originalStyleObject.drawUnderTabBar,
bottomTabsColor: processColor(originalStyleObject.tabBarBackgroundColor),
bottomTabsButtonColor: processColor(originalStyleObject.tabBarButtonColor),
bottomTabsSelectedButtonColor: processColor(originalStyleObject.tabBarSelectedButtonColor),
bottomTabsHidden: originalStyleObject.tabBarHidden,
bottomTabsHiddenOnScroll: originalStyleObject.bottomTabsHiddenOnScroll,
forceTitlesDisplay: originalStyleObject.forceTitlesDisplay,
bottomTabBadgeTextColor: processColor(originalStyleObject.bottomTabBadgeTextColor),
bottomTabBadgeBackgroundColor: processColor(originalStyleObject.bottomTabBadgeBackgroundColor),
navigationBarColor: processColor(originalStyleObject.navigationBarColor)
}
if (originalStyleObject.collapsingToolBarImage) {
if (_.isString(originalStyleObject.collapsingToolBarImage)) {
ret.collapsingToolBarImage = originalStyleObject.collapsingToolBarImage;
}
const collapsingToolBarImage = resolveAssetSource(originalStyleObject.collapsingToolBarImage)
if (collapsingToolBarImage) {
ret.collapsingToolBarImage = collapsingToolBarImage.uri;
}
}
if (_.isUndefined(ret.expendCollapsingToolBarOnTopTabChange)) {
ret.expendCollapsingToolBarOnTopTabChange = true;
}
return ret;
}
render: function() {
let children = [], {annotations, overlays, followUserLocation, userLocationViewParams, showsZoomControl} = this.props;
annotations = annotations && annotations.map((annotation: Object) => {
let {
id,
image,
tintColor,
view,
leftCalloutView,
rightCalloutView,
} = annotation;
if (!view && image && tintColor) {
view = <Image
style={{
tintColor: processColor(tintColor),
}}
source={image}
/>;
image = undefined;
}
if (view) {
if (image) {
console.warn('`image` and `view` both set on annotation. Image will be ignored.');
}
var viewIndex = children.length;
children.push(React.cloneElement(view, {
style: [styles.annotationView, view.props.style || {}]
}));
}
if (leftCalloutView) {
var leftCalloutViewIndex = children.length;
children.push(React.cloneElement(leftCalloutView, {
style: [styles.calloutView, leftCalloutView.props.style || {}]
}));
}
if (rightCalloutView) {
var rightCalloutViewIndex = children.length;
children.push(React.cloneElement(rightCalloutView, {
style: [styles.calloutView, rightCalloutView.props.style || {}]
}));
}
let result = {
...annotation,
tintColor: tintColor && processColor(tintColor),
image,
viewIndex,
leftCalloutViewIndex,
rightCalloutViewIndex,
view: undefined,
leftCalloutView: undefined,
rightCalloutView: undefined,
};
result.id = id || encodeURIComponent(JSON.stringify(result));
result.image = image && resolveAssetSource(image);
return result;
});
overlays = overlays && overlays.map((overlay: Object) => {
let {id, fillColor, strokeColor} = overlay;
let result = {
...overlay,
strokeColor: strokeColor && processColor(strokeColor),
fillColor: fillColor && processColor(fillColor),
};
result.id = id || encodeURIComponent(JSON.stringify(result));
return result;
});
const findByAnnotationId = (annotationId: string) => {
if (!annotations) {
return null;
}
for (let i = 0, l = annotations.length; i < l; i++) {
if (annotations[i].id === annotationId) {
return annotations[i];
}
}
return null;
};
// TODO: these should be separate events, to reduce bridge traffic
let onPress, onAnnotationDragStateChange, onAnnotationFocus, onAnnotationBlur;
if (annotations) {
onPress = (event: Event) => {
if (event.nativeEvent.action === 'annotation-click') {
// TODO: Remove deprecated onAnnotationPress API call later.
this.props.onAnnotationPress &&
this.props.onAnnotationPress(event.nativeEvent.annotation);
} else if (event.nativeEvent.action === 'callout-click') {
const annotation = findByAnnotationId(event.nativeEvent.annotationId);
if (annotation) {
// Pass the right function
if (event.nativeEvent.side === 'left' && annotation.onLeftCalloutPress) {
annotation.onLeftCalloutPress(event.nativeEvent);
} else if (event.nativeEvent.side === 'right' && annotation.onRightCalloutPress) {
annotation.onRightCalloutPress(event.nativeEvent);
}
}
}
};
onAnnotationDragStateChange = (event: Event) => {
const annotation = findByAnnotationId(event.nativeEvent.annotationId);
if (annotation) {
// Update location
annotation.latitude = event.nativeEvent.latitude;
annotation.longitude = event.nativeEvent.longitude;
// Call callback
annotation.onDragStateChange &&
annotation.onDragStateChange(event.nativeEvent);
}
};
onAnnotationFocus = (event: Event) => {
const annotation = findByAnnotationId(event.nativeEvent.annotationId);
if (annotation && annotation.onFocus) {
annotation.onFocus(event.nativeEvent);
}
};
onAnnotationBlur = (event: Event) => {
const annotation = findByAnnotationId(event.nativeEvent.annotationId);
if (annotation && annotation.onBlur) {
annotation.onBlur(event.nativeEvent);
}
};
}
// TODO: these should be separate events, to reduce bridge traffic
if (this.props.onRegionChange || this.props.onRegionChangeComplete) {
var onChange = (event: Event) => {
if (event.nativeEvent.continuous) {
this.props.onRegionChange &&
this.props.onRegionChange(event.nativeEvent.region);
} else {
this.props.onRegionChangeComplete &&
this.props.onRegionChangeComplete(event.nativeEvent.region);
}
};
}
// followUserLocation defaults to true if showUserLocation is set
if (followUserLocation === undefined) {
followUserLocation = this.props.showUserLocation;
}
if (!!userLocationViewParams) {
let {accuracyCircleFillColor, accuracyCircleStrokeColor, image} = userLocationViewParams;
accuracyCircleFillColor = accuracyCircleFillColor && processColor(accuracyCircleFillColor);
accuracyCircleStrokeColor = accuracyCircleStrokeColor && processColor(accuracyCircleStrokeColor);
userLocationViewParams.accuracyCircleFillColor = accuracyCircleFillColor;
userLocationViewParams.accuracyCircleStrokeColor = accuracyCircleStrokeColor;
image = image && resolveAssetSource(image);
userLocationViewParams.image = image;
}
if (showsZoomControl === undefined) {
showsZoomControl = false;
}
return (
<RCTBaiduMap
{...this.props}
ref="baiduMap"
annotations={annotations}
children={children}
followUserLocation={followUserLocation}
showsZoomControl={showsZoomControl}
overlays={overlays}
onPress={onPress}
onChange={onChange}
onAnnotationDragStateChange={onAnnotationDragStateChange}
onAnnotationFocus={onAnnotationFocus}
onAnnotationBlur={onAnnotationBlur}
userLocationViewParams={userLocationViewParams}
/>
);
},
_.update(transformedProps, 'fileTypeSupport.unsupportedImage', (image) => resolveAssetSource(image).uri);
_.update(transformedProps, 'customButtonStyle.image', (image) => resolveAssetSource(image).uri);
render: function() {
var otherView = null;
if (this.state.viewState === WebViewBridgeState.LOADING) {
otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewBridgeState.ERROR) {
var errorEvent = this.state.lastErrorEvent;
invariant(
errorEvent != null,
'lastErrorEvent expected to be non-null'
);
otherView = (this.props.renderError || defaultRenderError)(
errorEvent.domain,
errorEvent.code,
errorEvent.description
);
} else if (this.state.viewState !== WebViewBridgeState.IDLE) {
console.error(
'RCTWebViewBridge invalid state encountered: ' + this.state.loading
);
}
var webViewStyles = [styles.container, styles.webView, this.props.style];
if (this.state.viewState === WebViewBridgeState.LOADING ||
this.state.viewState === WebViewBridgeState.ERROR) {
// if we're in either LOADING or ERROR states, don't show the webView
webViewStyles.push(styles.hidden);
}
var onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => {
var shouldStart = this.props.onShouldStartLoadWithRequest &&
this.props.onShouldStartLoadWithRequest(event.nativeEvent);
RCTWebViewBridgeManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier);
});
var {javaScriptEnabled, domStorageEnabled} = this.props;
if (this.props.javaScriptEnabledAndroid) {
console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead');
javaScriptEnabled = this.props.javaScriptEnabledAndroid;
}
if (this.props.domStorageEnabledAndroid) {
console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead');
domStorageEnabled = this.props.domStorageEnabledAndroid;
}
var onBridgeMessage = (event: Event) => {
const onBridgeMessageCallback = this.props.onBridgeMessage;
if (onBridgeMessageCallback) {
const messages = event.nativeEvent.messages;
messages.forEach((message) => {
onBridgeMessageCallback(message);
});
}
};
let {source, ...props} = {...this.props};
delete props.onBridgeMessage;
delete props.onShouldStartLoadWithRequest;
var webView =
<RCTWebViewBridge
ref={RCT_WEBVIEWBRIDGE_REF}
key="webViewKey"
{...props}
source={resolveAssetSource(source)}
style={webViewStyles}
onLoadingStart={this.onLoadingStart}
onLoadingFinish={this.onLoadingFinish}
onLoadingError={this.onLoadingError}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
onBridgeMessage={onBridgeMessage}
/>;
return (
<View style={styles.container}>
{webView}
{otherView}
</View>
);
},
_.update(transformedProps, 'selection.unselectedImage', (image) => resolveAssetSource(image).uri);
import GL from 'gl-react'
import React,{PropTypes} from 'react'
const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource");
const inputImageTexture2 = resolveAssetSource(require('../../assets/filters/brannanProcess.png'))
const inputImageTexture3 = resolveAssetSource(require('../../assets/filters/brannanBlowout.png'))
const inputImageTexture4 = resolveAssetSource(require('../../assets/filters/brannanContrast.png'))
const inputImageTexture5 = resolveAssetSource(require('../../assets/filters/brannanLuma.png'))
const inputImageTexture6 = resolveAssetSource(require('../../assets/filters/brannanScreen.png'))
const shaders = GL.Shaders.create({
Brannan: {
frag: `
precision highp float;
varying vec2 uv;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
uniform sampler2D inputImageTexture3;
uniform sampler2D inputImageTexture4;
uniform sampler2D inputImageTexture5;
uniform sampler2D inputImageTexture6;
mat3 saturateMatrix = mat3(
1.105150,
-0.044850,
-0.046000,
-0.088050,
1.061950,
-0.089200,
-0.017100,
function convertStyleParams(originalStyleObject) {
if (!originalStyleObject) {
return null;
}
let ret = {
orientation: originalStyleObject.orientation,
screenAnimationType: originalStyleObject.screenAnimationType,
statusBarColor: processColor(originalStyleObject.statusBarColor),
statusBarHidden: originalStyleObject.statusBarHidden,
statusBarTextColorScheme: originalStyleObject.statusBarTextColorScheme,
drawUnderStatusBar: originalStyleObject.drawUnderStatusBar,
topBarReactView: originalStyleObject.navBarCustomView,
topBarReactViewAlignment: originalStyleObject.navBarComponentAlignment,
topBarReactViewInitialProps: originalStyleObject.navBarCustomViewInitialProps,
topBarColor: processColor(originalStyleObject.navBarBackgroundColor),
topBarTransparent: originalStyleObject.navBarTransparent,
topBarTranslucent: originalStyleObject.navBarTranslucent,
topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
topBarBorderColor: processColor(originalStyleObject.topBarBorderColor),
topBarBorderWidth: originalStyleObject.topBarBorderWidth && `${originalStyleObject.topBarBorderWidth}`,
collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
collapsingToolBarCollapsedColor: processColor(originalStyleObject.collapsingToolBarCollapsedColor),
collapsingToolBarExpendedColor: processColor(originalStyleObject.collapsingToolBarExpendedColor),
showTitleWhenExpended: originalStyleObject.showTitleWhenExpended,
expendCollapsingToolBarOnTopTabChange: originalStyleObject.expendCollapsingToolBarOnTopTabChange,
titleBarHidden: originalStyleObject.navBarHidden,
titleBarHideOnScroll: originalStyleObject.navBarHideOnScroll,
titleBarTitleColor: processColor(originalStyleObject.navBarTextColor),
titleBarSubtitleColor: processColor(originalStyleObject.navBarSubtitleColor),
titleBarSubtitleFontSize: originalStyleObject.navBarSubtitleFontSize,
titleBarSubtitleFontFamily: originalStyleObject.navBarSubtitleFontFamily,
titleBarButtonColor: processColor(originalStyleObject.navBarButtonColor),
titleBarButtonFontFamily: originalStyleObject.navBarButtonFontFamily,
titleBarDisabledButtonColor: processColor(originalStyleObject.titleBarDisabledButtonColor),
titleBarTitleFontFamily: originalStyleObject.navBarTextFontFamily,
titleBarTitleFontSize: originalStyleObject.navBarTextFontSize,
titleBarTitleFontBold: originalStyleObject.navBarTextFontBold,
titleBarTitleTextCentered: originalStyleObject.navBarTitleTextCentered,
titleBarHeight: originalStyleObject.navBarHeight,
titleBarTopPadding: originalStyleObject.navBarTopPadding,
backButtonHidden: originalStyleObject.backButtonHidden,
topTabsHidden: originalStyleObject.topTabsHidden,
contextualMenuStatusBarColor: processColor(originalStyleObject.contextualMenuStatusBarColor),
contextualMenuBackgroundColor: processColor(originalStyleObject.contextualMenuBackgroundColor),
contextualMenuButtonsColor: processColor(originalStyleObject.contextualMenuButtonsColor),
drawBelowTopBar: !originalStyleObject.drawUnderNavBar,
topTabTextColor: processColor(originalStyleObject.topTabTextColor),
topTabTextFontFamily: originalStyleObject.topTabTextFontFamily,
topTabIconColor: processColor(originalStyleObject.topTabIconColor),
selectedTopTabIconColor: processColor(originalStyleObject.selectedTopTabIconColor),
selectedTopTabTextColor: processColor(originalStyleObject.selectedTopTabTextColor),
selectedTopTabIndicatorHeight: originalStyleObject.selectedTopTabIndicatorHeight,
selectedTopTabIndicatorColor: processColor(originalStyleObject.selectedTopTabIndicatorColor),
topTabsScrollable: originalStyleObject.topTabsScrollable,
topTabsHeight: originalStyleObject.topTabsHeight,
screenBackgroundColor: processColor(originalStyleObject.screenBackgroundColor),
drawScreenAboveBottomTabs: !originalStyleObject.drawUnderTabBar,
initialTabIndex: originalStyleObject.initialTabIndex,
bottomTabsColor: processColor(originalStyleObject.tabBarBackgroundColor),
bottomTabsButtonColor: processColor(originalStyleObject.tabBarButtonColor),
bottomTabsSelectedButtonColor: processColor(originalStyleObject.tabBarSelectedButtonColor),
bottomTabsHidden: originalStyleObject.tabBarHidden,
bottomTabsHiddenOnScroll: originalStyleObject.bottomTabsHiddenOnScroll,
forceTitlesDisplay: originalStyleObject.forceTitlesDisplay,
bottomTabBadgeTextColor: processColor(originalStyleObject.bottomTabBadgeTextColor),
bottomTabBadgeBackgroundColor: processColor(originalStyleObject.bottomTabBadgeBackgroundColor),
bottomTabFontFamily: originalStyleObject.tabFontFamily,
navigationBarColor: processColor(originalStyleObject.navigationBarColor)
};
if (originalStyleObject.disabledButtonColor) {
ret.titleBarDisabledButtonColor = processColor(originalStyleObject.disabledButtonColor);
}
if (originalStyleObject.collapsingToolBarImage) {
if (_.isString(originalStyleObject.collapsingToolBarImage)) {
ret.collapsingToolBarImage = originalStyleObject.collapsingToolBarImage;
}
const collapsingToolBarImage = resolveAssetSource(originalStyleObject.collapsingToolBarImage)
if (collapsingToolBarImage) {
ret.collapsingToolBarImage = collapsingToolBarImage.uri;
}
}
if (_.isUndefined(ret.expendCollapsingToolBarOnTopTabChange)) {
ret.expendCollapsingToolBarOnTopTabChange = true;
}
if (ret.topBarReactViewInitialProps) {
const passPropsKey = _.uniqueId('customNavBarComponent');
PropRegistry.save(passPropsKey, ret.topBarReactViewInitialProps);
ret.topBarReactViewInitialProps = {passPropsKey};
}
return ret;
}
render() {
let otherView = null;
if (this.state.viewState === WebViewState.LOADING) {
otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) {
const errorEvent = this.state.lastErrorEvent;
invariant(
errorEvent != null,
'lastErrorEvent expected to be non-null'
);
otherView = (this.props.renderError || defaultRenderError)(
errorEvent.domain,
errorEvent.code,
errorEvent.description
);
} else if (this.state.viewState !== WebViewState.IDLE) {
console.error(
'CRAWKWebView invalid state encountered: ' + this.state.loading
);
}
const webViewStyles = [styles.container, styles.webView, this.props.style];
if (this.state.viewState === WebViewState.LOADING ||
this.state.viewState === WebViewState.ERROR) {
// if we're in either LOADING or ERROR states, don't show the webView
webViewStyles.push(styles.hidden);
}
const onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => {
const shouldStart = this.props.onShouldStartLoadWithRequest &&
this.props.onShouldStartLoadWithRequest(event.nativeEvent);
WKWebViewManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier);
});
let source = this.props.source;
if (this.props.source && typeof this.props.source === 'object') {
source = Object.assign({}, this.props.source, {
sendCookies: this.props.sendCookies,
customUserAgent: this.props.customUserAgent || this.props.userAgent
});
if (this.props.html) {
source.html = this.props.html;
} else if (this.props.url) {
source.uri = this.props.url;
}
}
const messagingEnabled = typeof this.props.onMessage === 'function';
const webView =
<CRAWKWebView
ref={ref => { this.webview = ref; }}
key="webViewKey"
style={webViewStyles}
contentInsetAdjustmentBehavior={this.props.contentInsetAdjustmentBehavior}
source={resolveAssetSource(source)}
injectJavaScriptForMainFrameOnly={this.props.injectJavaScriptForMainFrameOnly}
injectedJavaScriptForMainFrameOnly={this.props.injectedJavaScriptForMainFrameOnly}
injectJavaScript={this.props.injectJavaScript}
injectedJavaScript={this.props.injectedJavaScript}
bounces={this.props.bounces}
scrollEnabled={this.props.scrollEnabled}
contentInset={this.props.contentInset}
allowsBackForwardNavigationGestures={this.props.allowsBackForwardNavigationGestures}
automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
openNewWindowInWebView={this.props.openNewWindowInWebView}
hideKeyboardAccessoryView={this.props.hideKeyboardAccessoryView}
keyboardDisplayRequiresUserAction={this.props.keyboardDisplayRequiresUserAction}
allowsLinkPreview={this.props.allowsLinkPreview}
onLoadingStart={this._onLoadingStart}
onLoadingFinish={this._onLoadingFinish}
onLoadingError={this._onLoadingError}
messagingEnabled={messagingEnabled}
onProgress={this._onProgress}
onMessage={this._onMessage}
onScroll={this._onScroll}
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
pagingEnabled={this.props.pagingEnabled}
directionalLockEnabled={this.props.directionalLockEnabled}
onNavigationResponse={this._onNavigationResponse}
keyboardDismissMode={this.props.keyboardDismissMode}
/>;
return (
<View style={styles.container}>
{webView}
{otherView}
</View>
);
}
},
getDefaultProps () {
return {
localhost: false
};
},
render () {
var source = this.props.source || {};
if (this.props.url) {
source.uri = this.props.url;
}
return (
<NativeCrosswalkWebView
{ ...this.props }
ref={ WEBVIEW_REF }
source={resolveAssetSource(source)}
onNavigationStateChange={ this.onNavigationStateChange }
onError={ this.onError } />
);
},
getWebViewHandle () {
return React.findNodeHandle(this.refs[WEBVIEW_REF]);
},
onNavigationStateChange (event) {
var { onNavigationStateChange } = this.props;
if (onNavigationStateChange) {
onNavigationStateChange(event.nativeEvent);
}
},
onError (event) {
var { onError } = this.props;
render() {
const resizeMode = this.props.resizeMode;
const source = resolveAssetSource(this.props.source) || {};
let uri = source.uri || '';
if (uri && uri.match(/^\//)) {
uri = `file://${uri}`;
}
const isNetwork = !!(uri && uri.match(/^https?:/));
const isAsset = !!(uri && uri.match(/^(assets-library|file|content|ms-appx|ms-appdata):/));
let nativeResizeMode;
if (resizeMode === VideoResizeMode.stretch) {
nativeResizeMode = NativeModules.UIManager.RCTVideo.Constants.ScaleToFill;
} else if (resizeMode === VideoResizeMode.contain) {
nativeResizeMode = NativeModules.UIManager.RCTVideo.Constants.ScaleAspectFit;
} else if (resizeMode === VideoResizeMode.cover) {
nativeResizeMode = NativeModules.UIManager.RCTVideo.Constants.ScaleAspectFill;
} else {
nativeResizeMode = NativeModules.UIManager.RCTVideo.Constants.ScaleNone;
}
const nativeProps = Object.assign({}, this.props);
Object.assign(nativeProps, {
style: [styles.base, nativeProps.style],
resizeMode: nativeResizeMode,
src: {
uri,
isNetwork,
isAsset,
type: source.type || '',
mainVer: source.mainVer || 0,
patchVer: source.patchVer || 0,
},
onVideoLoadStart: this._onLoadStart,
onVideoLoad: this._onLoad,
onVideoError: this._onError,
onVideoProgress: this._onProgress,
onVideoSeek: this._onSeek,
onVideoEnd: this._onEnd,
onVideoBuffer: this._onBuffer,
onTimedMetadata: this._onTimedMetadata,
onVideoFullscreenPlayerWillPresent: this._onFullscreenPlayerWillPresent,
onVideoFullscreenPlayerDidPresent: this._onFullscreenPlayerDidPresent,
onVideoFullscreenPlayerWillDismiss: this._onFullscreenPlayerWillDismiss,
onVideoFullscreenPlayerDidDismiss: this._onFullscreenPlayerDidDismiss,
onReadyForDisplay: this._onReadyForDisplay,
onPlaybackStalled: this._onPlaybackStalled,
onPlaybackResume: this._onPlaybackResume,
onPlaybackRateChange: this._onPlaybackRateChange,
onAudioFocusChanged: this._onAudioFocusChanged,
onAudioBecomingNoisy: this._onAudioBecomingNoisy,
});
if (this.props.poster && this.state.showPoster) {
const posterStyle = {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
resizeMode: this.props.posterResizeMode || 'contain'
};
return (
<View style={nativeProps.style}>
<RCTVideo
ref={this._assignRoot}
{...nativeProps}
/>
<Image
style={posterStyle}
source={{uri: this.props.poster}}
/>
</View>
);
}
return (
<RCTVideo
ref={this._assignRoot}
{...nativeProps}
/>
);
}
import React, { Component } from 'react';
import GL from "gl-react"
const resolveAssetSource = require("react-native/Libraries/Image/resolveAssetSource");
const inputImageTexture2 = resolveAssetSource(require('../../assets/filters/1977map.png'))
const shaders = GL.Shaders.create({
s1977: {
frag: `
precision lowp float;
varying highp vec2 uv;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2; // blowout
void main()
{
vec3 texel = texture2D(inputImageTexture, uv).rgb;
texel = vec3(
texture2D(inputImageTexture2, vec2(texel.r, .16666)).r,
texture2D(inputImageTexture2, vec2(texel.g, .5)).g,
texture2D(inputImageTexture2, vec2(texel.b, .83333)).b
);
gl_FragColor = vec4(texel, 1.0);
}
`
}
});
export default GL.createComponent(
({ inputImageTexture, ...rest }) =>