I have created custom check boxes in my application. I have no issue with check box and it's label if the label text is small. If the label text is large (more than a one line) the alignment is not showing properly.
Look at the above screenshot: the first option label text is "Please select the 2 primary reasons rating the program testing the program" and second option label text is "Question2". If the text in first label is small that is which fits in one line then the UI looks good. But If text is more than one line I am facing the above issue.
My code is as follows,
View:
<Label class="standardType1">Please select the 2 primary reasons rating the program?</Label>
<View class="checkBoxContainerView">
<Widget id="box1" src="checkbox" value="true"/>
<Label class="question1">Please select the 2 primary reasons rating the program testing the program</Label>
</View>
<View class="checkBoxContainerView">
<Widget id="box2" src="checkbox" value="true"/>
<Label class="question1">Question2</Label>
</View>
Style:
"#box1":
{
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
left:10
}
"#box2":
{
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
left:10
}
".question1":
{
top: 3,
left: 13,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: '#fff',
font:{
fontSize: 16,
fontWeight: 'normal'
}
}
".checkBoxContainerView":
{
left: 15,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
layout: 'horizontal'
}
Can any one help me with that? Even if label text is more than one line the height of the view should automatically increase and option should be view. Please help me.
After thinking a lot about your problem I experimented a little bit. I did not use the checkBox but tried to receive a proper alignment if the label is a multi-line label.
Xml:
<View id="temp" layout="horizontal" top="0" left="0">
<Label id="headline"/>
<Label id="description"/>
</View>
And my .tss:
"#headline": {
top: "0",
left: "0",
width: "50%",
text: "Headline",
font: {
fontSize: 20
}
}
"#description": {
left: "0",
width: "50%",
text: "Your long text here",
font: {
fontSize: 16
}
}
As you can see I did not specify any height or width for my container (not defined in the .tss but in the xml) and only set a width parameter for my labels. You should consider to use 10-20% for your checkBoxes and the rest for your label. Do not specify any height parameters since the system will do this automatically.
Related
At this moment the library https://www.npmjs.com/package/#miblanchard/react-native-slider does not have a solution to be able to change the height of the left and right track of the thumb.
How to implement it?
I found a workaround:
The container in which the Slider is should have overflow style: "hidden"
I use renderThumbComponent to display the thumb left line to the left
renderThumbComponent={() => (
<>
<View style={styles.thickerLine} />
<View style={styles.thumb} />
</>
)}
I set the style for thickerLine to be as long as possible, so that it goes beyond the container.
thickerLine: {
position: "absolute",
top: 8,
right: 0,
backgroundColor: "blue",
height: 4,
width: window.width,
},
Yes, I know it's wild, but it works!
I am using FlatList for list of video tiles but somehow it is not scrollable can someone please give an input what is wrong in here ?
const TileList = styled(FlatList)({ overflow: 'hidden' }, variant({
prop: 'orientation',
variants: {
vertical: {
height: '100%',
width: '100%',
flexGrow: 0,
maxHeight: '40%',
},
horizontal: {
width: 250,
//height: '100%',
maxWidth: 250,
flex: 0,
}
}
}));
<TileList
testID="teams-other-list"
data={remainingTiles}
renderItem={renderItem}
contentContainerStyle={containerStyle}
horizontal={isHorizontal}
inverted
orientation={orientation}
initialScrollIndex={0}
/>
It's not scrollable because of overflow 'hidden' style option. It hides everything outside the component's frame. Remove it and the scroll will appear
If you want to use initialScrollIndex prop, getItemLayout prop is required. Or the flatlist is not scrolled.
Check this out:
https://reactnative.dev/docs/flatlist#getitemlayout
https://reactnative.dev/docs/flatlist#initialscrollindex
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.
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.
How can I automatically get size of backgroundImage and assign it to view width and height? In .tss file.
NOTE: In .tss file, not in .js file. (I know the code in .js file)
EDIT
view.xml
<View id="innerView">
<ImageView id="middleImage"/>
</View>
view.tss
"#innerView":{
zIndex: 2,
height: 'auto',
width: 'auto',
left: "10dp",
right: "10dp",
top: "10dp",
},"#middleImage":{
image: '/images/iconbg.png', // put your image path here
left: "10dp",
right: "10dp",
top: "10dp",
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
},
i want to get size of image (middleImage) and assign to the upper view (innerView) so that my view can adjust its size according to the image
I'm not sure if I understand your question but setting the width/height of #innerView to Ti.UI.SIZE would adjust the size to the #middleImage size. Make sure to remove left/right because you can't have both, either its the size of the middleImage or it will have the size of the screen width - 10dp*2
Well,I think there's no need for you to use two UI components solve your problem. Just one is enougth:
.xml
<View id='innerView'/>
.tss
"#innerView":{
top: '10dp',
width: 'Ti.UI.SIZE',
height: 'Ti.UI.SIZE',
zIndex: 2,
backgroundImage:'/images/iconbg.png' //put your image path here
}
Or try like this:
.xml
<ImageView id='middleImage'/>
.tss
"#middleImage":{
top: '10dp',
width: 'Ti.UI.SIZE',
height: 'Ti.UI.SIZE',
zIndex: 2,
image:'/images/iconbg.png' //put your image path here
}
If you really need two UI components, and set property Ti.UI.SIZE to both of them, there're maybe something looks strange. Because, you have to know that Ti.UI.SIZE is mean that the child-view like the ImageView you set in the father-view View should make it's width and height fill it's father; however, once you also set the property to the father View ,it's means the View should make it's width and height fill its father--maybe a Window, and then it's maybe will looks strange.
.xml
<View id="innerView">
<ImageView id="middleImage"/>
</View>
.tss
"#innerView":{
top: '10dp',
zIndex: 2,
width: 'Ti.UI.SIZE',
height: 'Ti.UI.SIZE'
}
"#middleImage":{
width: 'Ti.UI.SIZE',
height: 'Ti.UI.SIZE',
image: '/images/iconbg.png' //put your image path here
}