The following code is written in React Native, and is completely functional. It displays a 'picker' for the user to select a value and then assigns the selected value to a 'state' variable for display in the interface:
import {Picker} from '#react-native-community/picker';
export default class Info extends Component {
constructor(props) {
super(props);
this.state = {
typeValues: [{"name": "Business Type", "id": 0}, {"name": "franchise", "id": 1}, {"name": "corporate", "id": 2}, {"name": "independent", "id": 3}],
typeItem: ''
};
}
typeChange = (index) => {
this.state.typeValues.map((v,i) => {
if (index === i ) {
this.setState({ typeItem: this.state.typeValues[index].name }) //setState
} //index EQUALS 'i'...
}) //map
}
...
render() {
return (
<>
<Text style={{ padding: 10, color: "#000000", textAlign: 'center', fontSize: 32, fontWeight: 'bold' }}>
{this.state.typeItem}
</Text>
<Picker
selectedValue={this.state.typeItem}
style={{width: deviceWidth, height: 40 }}
onValueChange={(itemValue, itemIndex) => this.typeChange(itemIndex)}>
{ this.state.typeValues.map( (v, key)=>{
return <Picker.Item label={v.name} value={v.id} key={key} />
}) }
</Picker>
</>
)
} //render
...
} //class Info
My issue is what should be done if I have many 'picker' controls. Presently the 'OnValueChange' handler ("typeChange") handles the 1 'picker' control I have. However if there are more, say 5 or 10 more 'picker' controls...I would have to write/copy an 'OnValueChange' handler for each. That is ugly and I am sure there must be a better way, perhaps a single function that could handle 'OnValueChange' from ANY 'picker' control.
For example if I added more arrays for additional 'picker' controls:
this.state = {
typeValues: [{"name": "Business Type", "id": 0}, {"name": "franchise", "id": 1}, {"name": "corporate", "id": 2}, {"name": "independent", "id": 3}],
smokingValues: [{"name": "Smoking Allowed", "id": 0}, {"name": "Yes", "id": 1}, {"name": "No", "id": 2}, {"name": "Unknown", "id": 3}],
takeoutValues: [{"name": "Takeout Available", "id": 0}, {"name": "Yes", "id": 1}, {"name": "No", "id": 2}, {"name": "Unknown", "id": 3}],
typeItem: '',
smokingItem: '',
takeoutItem: '',
etc...
};
Is there a way to handle the 'OnValueChange' function for each and every 'picker' that is created...within a single 'universal' function? It seems difficult to believe it would be necessary to write a function for each 'picker' to store the selected value into the appropriate 'state' variable. Any suggestions greatly appreciated. I thank you in advance.
Im using react-native-flexi-radio-button for RadioGroup
I have a design like multiple options.
[
{
"option": {
"id": 4,
"name": "Size"
},
"values": [
{
"products_attributes_id": 243,
"id": 18,
"value": "XL",
"price": "0.00",
"price_prefix": "+"
},
{
"products_attributes_id": 245,
"id": 19,
"value": "L",
"price": "0.00",
"price_prefix": "+"
},
{
"products_attributes_id": 246,
"id": 20,
"value": "M",
"price": "0.00",
"price_prefix": "+"
},
{
"products_attributes_id": 247,
"id": 21,
"value": "S",
"price": "0.00",
"price_prefix": "+"
},
{
"products_attributes_id": 248,
"id": 22,
"value": "XXL",
"price": "20.00",
"price_prefix": "+"
}
]
},
[![\]
My Coding to show RadioGroup -
<RadioGroup
style={{flexDirection: 'row'}}
size={20}
thickness={2}
color="#144693"
selectedIndex={0}
// onSelect={(item) => onSelect(item, i++)}
>
{item.values.map((c, i) => (
<RadioButton value={c}>
<Text>{c.value}</Text>
</RadioButton>
))}
</RadioGroup>
Showing like this.
Now there are two attributes Size and Color, there may by n- numbers of attributes.
How to get the values of each group ?
Something like - Array ( [0] => 001 [1] => 101 )
I don't know if I understood perfectly, but from what I understand you can get value on onSelect callback, it is called with two arguments, index and value when you click in an option.
<RadioGroup
style={{flexDirection: 'row'}}
size={20}
thickness={2}
color="#144693"
selectedIndex={0}
onSelect={(index, value) => console.log(index, value)} // --> here
>
{item.values.map((c, i) => (
<RadioButton value={c}>
<Text>{c.value}</Text>
</RadioButton>
))}
</RadioGroup>
That lib don't have a method o property get all the values. You can look here.
As a workaround if you are using map in each group to render the items maybe you can add a new property in your object schema to keep track of the selected items or creating an state to track the values.
I created a json using google maps styling wizard. I then set that to a const under render and set that const to my MapView style but it renderers nothing when I do.
I am not sure the issue, Ideally I would like to have the style in a separate file but I was trying to start small.
How can I fix the current issue I am having as well as import and use the style from a separate file?
Here is a snack of my code that reproduces my exact error as well as the code below.
export default class Map extends React.Component {
render() {
const mapStyle = [
{
"featureType": "landscape.man_made",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.government",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
}
]
return (
<View style={{...StyleSheet.absoluteFillObject}}>
<MapView
style={mapStyle}
provider={PROVIDER_GOOGLE}>
</MapView>
</View>
);
}
}
The custom google maps styling must be passed to the customMapStyle prop and you need to set a specific width and height in the normal style prop of the MapView. Setting absoluteFillObject does something different than you might have thought and according to the react-native documentation there is
Currently, there is no difference between using absoluteFill vs. absoluteFillObject.
Thus, absoluteFill is for the following use case.
A very common pattern is to create overlays with position absolute and zero positioning (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), so absoluteFill can be used for convenience and to reduce duplication of these repeated styles.
This will not set a height and a width! We need to do this manually which is documented here.
The following solves your problem.
const styles = ScaledSheet.create({
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
...
The JSX component.
return (
<View style={{...StyleSheet.absoluteFillObject}}>
<MapView
style={styles.map}
customMapStyle={mapStyle}
provider={PROVIDER_GOOGLE}>
</MapView>
</View>
);
Here is the full solution.
export default class Map extends React.Component {
render() {
const mapStyle = [
{
"featureType": "landscape.man_made",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.government",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
}
]
return (
<View style={{...StyleSheet.absoluteFillObject}}>
<MapView
style={styles.map}
customMapStyle={mapStyle}
provider={PROVIDER_GOOGLE}>
</MapView>
</View>
);
}
}
const styles = ScaledSheet.create({
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
bubble: {
justifyContent: 'center',
alignItems: 'center',
padding: 15,
},
carousel: {
position: 'absolute',
top: scale(625)
},
cardContainer: {
backgroundColor: '#d1cfcf',
height: scale(40),
width: scale(300),
borderRadius: 10,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
},
name: {
color: 'black',
fontSize: 22,
}
});
Defining the customMapStyle in a separate file is plain JS and can be done as follows.
Define a new file, named CustomMapStyle.js and add the following content.
export const CustomMapStyle = [
{
"featureType": "landscape.man_made",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.government",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
}
]
Then use it as follows.
import {CustomMapStyle} from './CustomMapStyle'
...
render() {
return (
<View style={{...StyleSheet.absoluteFillObject}}>
<MapView
style={styles.map}
customMapStyle={CustomMapStyle}
provider={PROVIDER_GOOGLE}>
</MapView>
</View>
);
}
I have updated your snack here.
The final result.
I'm trying to replicate this chart http://jsfiddle.net/edzk8Loe/ using vue js.
To be honest, I'm learning vuejs and so I'm trying to replicate already ready projects to get confident quickly.
The issue I'm facing at the moment I guess is a logic one. The functions have to create new series as drilldown when click on a column, seams not triggered at all. I'm not getting any error in the console and I'm
Not having yet a totally clear idea about the structure, I think I'm messing up the code. Hereunder you'll find the code I'm using in VUE.
<template>
<div class="chartElem">
<div class="row">
<highcharts class="chart" :constructor-type="'chart'" :options="chartOptions"></highcharts>
</div>
</div>
</template>
<script>
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
import drilldown from "highcharts/modules/drilldown";
drilldown( Highcharts );
dataModule( Highcharts );
let drilldownChart, drilldownEvent, drilldownLevel = 0;
const chartOptions = {
chart: {
"type": "column",
},
credits: {
"enabled": false
},
plotOptions: {
column: {
stacking: "normal",
events: {
click: function ( event ) {
return false;
}
}
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"style": {
"textShadow": false,
"fontSize": "10px"
}
}
}
},
"legend": {
"enabled": false,
},
"yAxis": {
"stackLabels": {
"enabled": false,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"title": {
"text": "Stacked Column Drilldown Chart",
"fontWeight": "bold"
},
"xAxis": {
"title": {},
"type": "category"
},
"yAxis": [ {
"title": {
"text": "Number of Students"
},
"min": 0,
"allowDecimals": false
} ],
"series": [ {
"name": "Outstanding",
"color": "rgb(102, 168, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Very Good",
"color": "rgb(128, 183, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Satisfactory",
"color": "rgb(179, 212, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Needs Improvement",
"color": "rgb(204, 226, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Not Performing",
"color": "rgb(230, 242, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
} ]
};
export default {
data: () => ( {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
} ),
methods: {},
computed:{
drilldown: function ( e ) {
if ( !e.seriesOptions ) {
updateGraph( true, this, e );
}
},
drillup: function ( e ) {
if ( !e.seriesOptions.flag ) {
drilldownLevel = e.seriesOptions._levelNumber;
updateGraph( false );
}
}
},
mounted() {
function updateGraph( isDrilldown, chart, e ) {
if ( isDrilldown ) {
drilldownLevel++;
drilldownChart = chart;
drilldownEvent = e;
if ( drilldownLevel === 1 ) {
var drilldowns = {
'Social Science': {
name: 'Outstanding',
color: 'rgb(102, 168, 255)',
data: [ {
name: 'Geography',
y: 7,
drilldown: true
}, {
name: 'History',
y: 4
}, {
name: 'Civics',
y: 9
} ]
}
},
drilldowns2 = {
'Social Science': {
name: 'Very Good',
color: 'rgb(128, 183, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 8
}, {
name: 'Civics',
y: 2
} ],
},
},
drilldowns3 = {
'Social Science': {
name: 'Satisfactory',
color: 'rgb(179, 212, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 1
} ],
}
},
drilldowns4 = {
'Social Science': {
name: 'Needs Improvement',
color: 'rgb(204, 226, 255)',
data: [ {
name: 'Geography',
y: 2,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 2
} ]
}
},
drilldowns5 = {
'Social Science': {
name: 'Not Performing',
color: 'rgb(230, 242, 255)',
data: [ {
name: 'Geography',
y: 6,
drilldown: true
}, {
name: 'History',
y: 3
}, {
name: 'Civics',
y: 0
} ],
}
},
series = drilldowns[ e.point.name ],
series2 = drilldowns2[ e.point.name ],
series3 = drilldowns3[ e.point.name ],
series4 = drilldowns4[ e.point.name ],
series5 = drilldowns5[ e.point.name ];
chart.addSingleSeriesAsDrilldown( e.point, series );
chart.addSingleSeriesAsDrilldown( e.point, series2 );
chart.addSingleSeriesAsDrilldown( e.point, series3 );
chart.addSingleSeriesAsDrilldown( e.point, series4 );
chart.addSingleSeriesAsDrilldown( e.point, series5 );
chart.applyDrilldown();
} else if ( drilldownLevel === 2 ) {
var drilldown1 = {
"Geography": {
"name": "Yes",
stacking: 'percent',
color: 'red',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown2 = {
"Geography": {
"name": "No",
stacking: 'percent',
color: 'green',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown3 = {
"exampleDrilldown": {
type: 'line',
"name": "Example",
color: 'black',
"data": [ {
"name": "Q1",
"y": 10
}, {
"name": "Q2",
"y": 20
}, {
"name": "Q3",
"y": 30
}, {
"name": "Q4",
"y": 40
} ]
}
}
chart.addSingleSeriesAsDrilldown( e.point, drilldown1[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown2[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown3[ 'exampleDrilldown' ] );
console.log( e );
chart.applyDrilldown();
}
}
}
}
}
</script>
I'm not looking for someone is doing the task instead of me, I won't learn anything. Ideas and tips are super welcomed.
Cheers
You've made several simple mistakes in your code.
1) Add updateGraph function to chart methods - that way you can invoke this method in drilldown callback
2) Save chart component reference in the chart object to be able to use updateGraph method from drilldown callback function. You can make it using mounted() hook:
mounted() {
this.$children[0].chart.vueRef = this;
}
3) Data should be a function that returns an object with properties:
data() {
return {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
}
}
4) Add drilldown and drillup callbacks to chart.events object. There you can invoke updateGraph method from the chart component reference saved in mounted hook:
chart: {
"type": "column",
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
this.vueRef.updateGraph(true, this, e);
}
},
drillup: function(e) {
if (!e.seriesOptions.flag) {
this.vueRef.drilldownLevel = e.seriesOptions._levelNumber;
this.vueRef.updateGraph(false);
}
}
}
}
Demo:
https://codesandbox.io/s/2w513lwpw0
I have a problem with FlatList, I can't scroll my list ...
It's block, and my list is enough fat for scrolling
const tab_ad = [
{"id": 0, "Price": 100000, "key": 0},
{"id": 1, "Price": 100000, "key": 1},
{"id": 2, "Price": 100000, "key": 2},
{"id": 3, "Price": 100000, "key": 0},
{"id": 4, "Price": 100000, "key": 1},
{"id": 5, "Price": 100000, "key": 2},
{"id": 6, "Price": 100000, "key": 0},
{"id": 7, "Price": 100000, "key": 1},
{"id": 8, "Price": 100000, "key": 2},
]
export default class Event extends Component {
renderItem(item) {
return (
<Image source={path_default_picture} style={{width: 50, height: 50, margin: 5}}/>
);
}
render() {
return (
<View style={{flex: 1}}>
<FlatList
horizontal
data={tab_ad}
renderItem={(item) => this.renderItem(item)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
react-native-cli: 2.0.1
react-native: 0.49.3
SomeOne can help me ?
FlatList ignores the values that have the same key. I found that after playing a little bit. Most likely the issue is not that the scroll is not enabled but that you have similar values.
Could you please try making sure the key is unique across all the list?
If not, please make a snack with the issue