How to add Controls programatically in titanium alloy - titanium

I am trying to add controls programmatically in titanium alloy.
I did the fallowing code but it not working i don't know why??
XML
<Alloy>
<Window class="container">
<View id="TextOrders">
<ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" >
</ScrollView>
</View>
</Window>
</Alloy>
Controller
var args = arguments[0] || {};
var TextOrders = Ti.UI.createView({
backgroundColor:'white'
});
function createRow(i) {
var row = Ti.UI.createView({
backgroundColor: 'white',
borderColor: '#bbb',
borderWidth: 1,
width:'100%', height: 70,
top: 0, left: 0
});
var inputTextField = Ti.UI.createTextField({
hintText: 'Enter value ' + i,
keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
top: 10, left: '10%',
width: '80%', height: 60
});
row.add(inputTextField);
return row;
}
var scrollView = Ti.UI.createScrollView({
bottom:120,
contentHeight: 'auto',
layout: 'vertical',
backgroundColor: 'red',
height:'58%'
});
for(var i = 0; i <= 20; i++){
var row = createRow(i);
scrollView.add(row);
}
TextOrders.add(scrollView);
tss
".container" : {
backgroundColor:"white"
}
"#TextOrders":{
width:'100%',
height:'57%',
borderColor:'red',
borderWidth:'1px',
top:'0px',
}
"#scrollView":{
width:'80%',
borderColor:'blue',
borderWidth:'1px',
top:'0px',
height:'80%',
}
It does not giving me any error but controls is not getting added.

TextOrders.add(scrollView);
should be:
$.TextOrders.add(scrollView);

Related

React Native Image component with "{width: 100%, height: auto}" gets dislocated when using margin

I have an Image component that has width from Dimensions.get('window').width,
and height that is calculated using this formula:
{ //not the real code, but it works exactly like this.
width: Dimensions.get('window').width,
height: actualImageHeight*(Dimensions.get('window').width/actualImageWidth)
}
It basically closely emulates how width: 100%, height: auto works in css.
and it works well until i added margins to it, which causes the image to get dislocated
like this:
Dislocated Bear
I have also tried to use PixelRatio.getPixelSizeForLayoutSize(margin*2) to try taking account the margin, which makes the new formula look like this:
{ //not the real code, but it works exactly like this.
width: Dimensions.get('window').width-PixelRatio.getPixelSizeForLayoutSize(margin*2),
height: actualImageHeight*((Dimensions.get('window').width-PixelRatio.getPixelSizeForLayoutSize(margin*2))/actualImageWidth)
}
and the result is almost, there, but still slightly dislocated: Slightly Dislocated Bear
Which makes me think that Dimensions isn't a good reference for width.
So how do I emulate width: 100%, height: auto that doesn't use Dimensions?
Is it possible to use width: 100% as a reference to use in the formula?
import React from 'react';
import {SafeAreaView,View,Dimensions,Image,} from 'react-native';
const {width, height} = Dimensions.get('window');
const actualImageHeight = 200;
const actualImageWidth = 300;
const Test = props => {
return (
<SafeAreaView style={{flex: 1}}>
<View
style={{
width: width,
height: actualImageHeight * (width / actualImageWidth),
borderRadius: 6,
borderWidth: 1,
borderColor: '#f1f1f1',
overflow: 'hidden',
backgroundColor: 'red',
padding: 12,
}}>
<Image
style={{flex: 1, width: null, height: null}}
source={{uri: 'https://picsum.photos/200/300'}}
/>
</View>
</SafeAreaView>
);
};
when you place calculated width and height to any view if you place margin in styles it will dislocated the view because while rendering the view margin also considered. Better to wrap image with view.
I still continued the idea of subtracting the width with the margins, and I managed to make it work. Simply by doing Dimensions.get('window').width-(margin*2) will make it work. So final code is:
{
width: Dimensions.get('window').width-(margin*2),
height: actualImageHeight*(Dimensions.get('window').width-(margin*2)/actualImageWidth)
}
The result: Bears
Full code of the component:
import React, { useState, useEffect } from "react";
import { Dimensions, Image } from "react-native";
interface AnotherCardProps {
thumbnail: string;
margin?: number;
column?: number;
maxHeight?: number;
minHeight?: number;
}
const AnotherCard: React.FC<AnotherCardProps> = (props) => {
const [imageSize, setImageSize] = useState({ width: 0, height: 0, ratio: 0 });
const margin = props.margin || 0;
const column = props.column || 1;
const newWidth = Dimensions.get("window").width / column - margin * 2;
const maxHeight = props.maxHeight || newWidth * 1.5;
const minHeight = props.minHeight || newWidth;
useEffect(() => {
Image.getSize(props.thumbnail, (w, h) =>
setImageSize({
width: w,
height: h,
ratio: newWidth / w,
})
);
});
return (
<Image
style={{
borderRadius: 20,
margin: margin,
flex: 1,
width: newWidth,
height:
imageSize.height * imageSize.ratio < minHeight
? minHeight
: imageSize.height * imageSize.ratio > maxHeight
? maxHeight
: imageSize.height * imageSize.ratio,
resizeMode: "cover",
}}
source={{
uri: props.thumbnail,
}}
/>
);
};
export default AnotherCard;

PanGestureHandler with functional component react native

I am trying to use a Gesture handler with a functional component. The problem is when I drag for the second time it's dragging from initial position again
This is my code below
let translateXRef = useRef(new Animated.Value(0)).current;
const onGestureEvent = useCallback(
Animated.event(
[
{
nativeEvent: {
translationX: translateXRef,
},
},
],
{ useNativeDriver: true }
),
[]
);
<View
style={{
backgroundColor: '#FFFFFF80',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: 100,
}}
>
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}
>
<Animated.View
// eslint-disable-next-line react-native/no-inline-styles
style={{
height: '100%',
width: 10,
backgroundColor: AppColors.buttonColor,
transform: [{ translateX: translateXRef }],
}}
/>
</PanGestureHandler>
</View>
You need to use the context in addition to the event in your callback.
I'm not sure why you're using the Animated.event. You should generate your callbacks using the useAnimatedGestureHandler.
Each of those callbacks onStart, onActive, onEnd, etc... take an event and context argument.
The context argument is an object that would let you set your previous position so that then next click would not reset the position.
Here's more info:
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/events/#using-context
Also, a pretty good video that explains it:
https://youtu.be/4HUreYYoE6U

How to change the background color of the bars in a barchart using react-native-chart-kit

I am using react-native-chart-kit and I am trying to have a cbar chart with any color filling up the bars, as of now it is gray but I am trying to change it but i have tried adding color: {} within the datasets part, as well as svg. But to no success. Any suggestions will be greatly appreciated.
render() {
return (
<View>
<BarChart
data={{
labels: [
'1',
'2',
'3',
'4',
'5',
'6',
'7'
],
datasets: [
{
data: this.props.data,
},
],
}}
svg={{ fill: 'green' }}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: "0",
strokeWidth: "2",
stroke: "#fff"
},
propsForBackgroundLines: {
strokeWidth: 0
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
}
You can set fillShadowGradient and fillShadowGradientOpacity in your chartConfig.
More info here: https://github.com/indiespirit/react-native-chart-kit#chart-style-object
You can add below lines in the
chartConfig:{{
fillShadowGradient:'skyblue',
fillShadowGradientOpacity:1,
}}
Its works fine
<BarChart
data={{
labels: this.state.bLabel,
datasets: [
{
data: this.state.bData,
}
]
}}
width={(Dimensions.get("window").width/100)*98}
height={300}
yAxisLabel=""
chartConfig={this.state.chartConfig}
verticalLabelRotation={0}
showValuesOnTopOfBars={true}
fromZero={true}
withCustomBarColorFromData={true}//FOR CUSTOM BAR COLORS
withHorizontalLabels ={false}
style={{alignSelf:"flex-start"}}
/>
//Go to
//node_modules->react-native-chart-kit->dist->BarChart.js
//Change this-> from line no-38 to 50
_this.renderBars = function (_a) {
var colorC=["#8000FF80","#0000ff80","#00FFFF80","#00ff0080","#ffff0080","#FFA50080","#ff000080","#2e000080","#00000080","#000000dd"];/////////AYUSH KHADE
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, barRadius = _a.barRadius, withCustomBarColorFromData = _a.withCustomBarColorFromData;
var baseHeight = _this.calcBaseHeight(data, height);
return data.map(function (x, i) {
var barHeight = _this.calcHeight(x, data, height);
var barWidth = 32 * _this.getBarPercentage();
return (<Rect key={Math.random()} x={0 +
(i * (width - 0)) / data.length +
barWidth / 2} y={((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
paddingTop} rx={barRadius} width={barWidth} height={(Math.abs(barHeight) / 4) * 3} fill={colorC[i]}/>);//AYUSH KHADE
});
};

Make a chart clickable when placed under another SVG <View>

I am having trouble working with some SVG in React Native.
I have a chart that is clickable and works well, I then needed to place another SVG on top of the chart in order to draw a line that would represent a limit score value. The problem that I am now facing is that I cannot click on the chart anymore since the view of the SVG is placed on top of it.
I made the background color of the SVG to be transparent so that I can at least see the chart behind it but, I do not know how to make it clickable again.
Is there any work around where I can maybe make the chart clickable trough a transparent view that is place on top?
It might be a stupid question but I am pretty new to both react and JS in general, so I could really use any type of help. :)
Here is the picture of the chart:
Polar Chart and Svg circle
And here the same Svg with a non-transparent background that, as you can see, covers almost the hole chart.
Svg covering the chart
Here's the Svg code:
export class NutritionChartSvg extends Component {
render() {
return (
<View style={styles.container} >
<Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 100 100">
<Svg.Circle
id="circle"
cx="50"
cy="13"
r="40"
stroke="gray"
strokeWidth="0.6"
fill="none"
/>
<Text fill="black" fontSize="8" dy="-2">
<TextPath href="#circle" startOffset='181'>
100
</TextPath>
</Text>
</Svg>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
justifyContent: 'center' ,
position: 'absolute',
left: '25%',
height: 'auto',
width: 'auto',
},
});'
This is the chart form chartjs:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy', 'Immune
Defense'],
datasets: [
{
label: '# of Votes',
data: [
50,
140,
90,
120,
100,
],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
legend: {
display: false,
fullWidth: false,
labels: {
fontSize: options.legend.labels.fontSize,
boxWidth: options.legend.labels.boxWidth,
padding: options.legend.labels.padding,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};
and they are together in a view :
<View style={styles.nutritionChart} key={3}>
<NutritionChart/>
<NutritionChartSvg/>
</View>
Either:
Move the limit line into the chart SVG, instead of laying it separately on top, or
Set pointer-events: none on the top SVG. This will make clicks pass right through it.

change label text from another controller in titanium alloy

I want to change text of label and make its visiblity true from another controller.
win_drawer_governmentNotification.xml
<Label id="filterCount" text="2"></Label>
win_drawer_governmentNotification.tss
"#filterCount":{
borderRadius: 100,
borderWidth: 1,
borderColor: "#f26418",
left: 46,
color: "#fff",
backgroundColor: "#f26418",
top: 15,
width: "8%",
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
visible : false,
font: {
fontSize: Alloy.CFG.fonts.f_10,
fontFamily: Alloy.CFG.font_family.calibri
}
},
Now I want to change text of label filterCount from another controller in a function
I tried below code.
win_drawer_governmentNotification_filter.js
function applyFilter(e) {
var controller = Alloy.createController('win_drawer_governmentNotification');
Ti.API.info('controller = ' + controller);
var filterLabel = controller.filterCount;
Ti.API.info('filter label = ' + filterLabel);
Ti.App.fireEvent("win_drawer_governmentNotification:filterCount", {
text : "1",
visible : true
});
win_drawer_governmentNotification_filter.xml
<View id="view_apply_main" onClick="applyFilter">
<View id="view_apply">
<Label id="lbl_apply" text="APPLY FILTERS"/>
</View>
</View>
I tried different solutions from stackoverflow still haven't found solution like in
win_drawer_governmentNotification_filter.js
controller.filterCount.text = "1";
controller.filterCount.visible = true;
Can someone please help me what I am doing wrong? I am new to titanium.
Thanks in advance.