How to place image instead of default Line in cursorComponent of VictoryCursorContainer
Trying to achieve cursorComponent with image instead of default line provided by VictoryChart.
But if I replace default Line with Image like this
cursorComponent={
<Image
style={styles.logo}
source={require('path.png')}
/>
}
it's not moving on cursor change.
Present design with below code: enter link description herehttps://i.stack.imgur.com/JLftl.png
<VictoryChart
standalone={true}
height={setHeight(161)}
width={setWidth(320)}
domainPadding={{ y: 10 }}
containerComponent={
<VictoryCursorContainer
cursorDimension="x"
cursorComponent={
<Line
style={{
stroke: "gray",
strokeWidth: 2,
}}
/>
}
onCursorChange={this.handleCursorChange.bind(this)}
/>
}
>
<VictoryAxis
standalone={false}
style={{
axis: {
stroke: '#00000014'
},
tickLabels: {
fill: '#00000066', fontSize: 12
},
}}
/>
<VictoryAxis
tickFormat={t => `${t}k`}
dependentAxis
domain={[0, 50]}
orientation="left"
standalone={false}
style={styles.axisOne}
/>
<VictoryLine
style={{
data: {
stroke: "#0A68CC",
strokeWidth: 2
}
}}
interpolation="natural"
data={lineA}
/>
<VictoryLine
style={{
data: {
stroke: "#F2BD49",
strokeWidth: 2
}
}}
interpolation="natural"
data={lineB}
/>
</VictoryChart>
Expected design with custom image: https://i.stack.imgur.com/Sn3kg.png
Related
I am using react-native-phone-input for phone number input . Its working fine on android and IOS but on IOS its not showing the confirm button instead show the Cross Icon which erase the inputed value.
[![<View>
<PhoneInput
ref={phoneRef}
style={\[
styles.phoneInput,
{
borderWidth: isValid ? 0 : responsiveWidth(0.2),
borderColor: colors.appColor.buttons.danger,
},
\]}
value={phoneNumber}
autoFormat={true}
offset={5}
textProps={{
placeholder: 'Phone number',
}}
textStyle={\[styles.inputTitle, {height: '100%'}\]}
onChangePhoneNumber={phoneNumberChange}
buttonTextStyle={{
height: responsiveHeight(6),
width: responsiveWidth(6),
}}
pickerButtonColor={colors.appColor.primary}
initialCountry={'pk'}
allowZeroAfterCountryCode={false}
renderFlag={({imageSource}) => {
return (
<View style={styles.flagView}>
<Image source={imageSource} style={styles.flagStyle} />
<Image source={images.chevron} style={styles.iconImage} />
</View>
);
}}
/>
</View>][1]][1]
`
tThis is my code in the navigator:
<Tab.Screen
name="Profile"
component={Profile}
options={{
title: username,
headerStyle: {
backgroundColor: '#fff',
headerTitleAlign: 'left',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
We want to mimic instagram's header on iOS where the username is on the top left corner of the header.
We currently getting a console warning message stating headertitleAlign was given a value of left, this has no effect on headerstyle.
Thank you in advance!
headerTitleAlign is not a valid style property. That shouldn't be given inside the headerStyle. Simply move headerTitleAlign:'left' outside of the headerStyle property and it should work.
<Tab.Screen
name="Profile"
component={Profile}
options={{
title: username,
headerTitleAlign: 'left', //moved this from headerStyle property
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
You do indeed want headerTitleAlign: 'left' in the main body of the options object, as #nithinpp mentioned. Note, however, that this setting won't do anything on iOS, as the documentation disappointingly notes.
If you'd like it to work on iOS as well, you'll need to provide your own headerTitle component:
<Tab.Screen
name="Profile"
component={Profile}
options={{
title: username,
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitle: props => (
<View style={{ flex: 1, flexDirection: "row" }}>
<Text>
{props.children}
</Text>
</View>
),
}}
/>
Note in this case that I'm just proposing you use a flexDirection: "row" on a View in order to left-justify. You can alternatively do whatever you want within headerTitle to get the effect you want.
I am creating a Login and Register screen and I want the use to have an option to choose to register with email or phone number.
I am using a radio button for this, and for some reason the function does not change its render when I change the state(the state is for sure changed, I checked it with console.log).
Code:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
//login
email: "",
password: "",
//register
firstName: "",
lastName: "",
date: new Date(),
checked: "Use Email Address",
...
}
}
componentDidMount() {
...
Register = Register.bind(this);
RadioButton = RadioButton.bind(this);
}
onRadioChange(label) {
if (label === "Use Email Address") {
this.setState({ checked: "Use Email Address"})
console.log('test2')
} else {
this.setState({ checked: "Use Phone Number" })
console.log('test')
console.log(this.state.checked)
}
}
render() {
return (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
</Stack.Navigator>
)
}
}
function RadioButton(label) {
return (
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 5 }}>
<TouchableOpacity
onPress={() => { this.onRadioChange(label) }}
style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#FF9C09',
alignItems: 'center',
justifyContent: 'center',
}}>
{
this.state.checked === label ?
<View style={{
height: 10,
width: 10,
borderRadius: 5,
backgroundColor: '#FF9C09',
}} />
: null
}
</TouchableOpacity>
<Text style={{ marginLeft: 10, fontFamily: 'open-sans-regular' }}>{label}</Text>
</View>
);
}
function Register({navigation}) {
...
return(
...
{RadioButton("Use Email Address")}
{RadioButton("Use Phone Number")}
...
)
}
I guess this has something to do with the lifecycles? I mean I am updating the state and I binded this with function RadioButton.
Note: When it's first loaded it shows "Use Email Address" as checked correctly. It just does not change when I check "Use Phone Number".
Any help would be very much appreciated.
I have a picker in my react-native ios app and want to set the height but the example won't honor flex, a style height or a height attribute.
<Picker
style={[styles.testbox, {borderColor: '#00F', flex:1, height: 100}]}
selectedValue={this.state.language}
height={100}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
There's no height prop per the docs, so you can remove that.
From playing around with the styling, it looks like the most important part is to set the itemStyle prop and define the height value there. You'll probably also want to style the Picker component itself and set the height value to be the same for the best looking results, but you don't need to do that.
Minimal Example:
<Picker style={{width: 200, height: 44}} itemStyle={{height: 44}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
Here's a Snack showing a full example for varying heights (code copy pasted below):
import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
language: 'haxe',
firstLanguage: 'java',
secondLanguage: 'js',
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Unstyled:</Text>
<Picker
style={[styles.picker]} itemStyle={styles.pickerItem}
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows one row:</Text>
<Picker
style={[styles.onePicker]} itemStyle={styles.onePickerItem}
selectedValue={this.state.firstLanguage}
onValueChange={(itemValue) => this.setState({firstLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows above and below values:</Text>
<Picker
style={[styles.twoPickers]} itemStyle={styles.twoPickerItems}
selectedValue={this.state.secondLanguage}
onValueChange={(itemValue) => this.setState({secondLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
padding: 20,
backgroundColor: 'white',
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 10,
},
picker: {
width: 200,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
pickerItem: {
color: 'red'
},
onePicker: {
width: 200,
height: 44,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
onePickerItem: {
height: 44,
color: 'red'
},
twoPickers: {
width: 200,
height: 88,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
twoPickerItems: {
height: 88,
color: 'red'
},
});
While rendering a set of row components in ListView, my uri images seem not to be showing up at all. I have included Image in the react module. My custom component is the following:
var url = rowData.mediaGroups[0].contents[0].url;
if (url.indexOf('w=150') > -1)
{
url.replace("w=150", "w=500");
}
return <ArticlePreview
category={rowData.categories[0]}
key={sectionID}
heartText={'2.9k'}
categoryPress={this.onCategoryDetailsPress}
selected={false}
source={{ uri: url }}
text={rowData.title.toLowerCase().replace(' ','')}
onPress={this.onArticleDetailsPress} />
The component has multiple properties and is used throughout my app (and works there with link images). But for some reason the component just stopped working in the app for uri images. Not sure what to do. Here is the code for the component itself:
//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
View,
StyleSheet,
Text,
Image,
TouchableHighlight,
} = React;
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');
//additional libraries
module.exports = React.createClass({
//onPress function that triggers when button pressed
//this.props.text is property that can be dynamically filled within button
/* following props:
- source={this.props.source}
- onPress={this.props.onPress}
- {this.props.text}
- {this.props.heartText}
- key={this.props.key}
- text={this.props.category}
- this.props.selected
*/
render: function() {
return (
<TouchableHighlight
underlayColor={'transparent'}
onPress={this.props.onPress} >
<Image source={this.props.source} style={[styles.articlePreview, this.border('red')]}>
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={[styles.heartRow, this.border('black')]}>
<ImageButton
style={[styles.heartBtn, , this.border('red')]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={require('../../img/heart_btn.png')} />
<Text style={[styles.heartText]}>{this.props.heartText} favorites</Text>
</View>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</Image>
</TouchableHighlight>
);
},
onHeartPress: function() {
//will move this function to a general module
},
border: function(color) {
return {
//borderColor: color,
//borderWidth: 4,
}
},
});
var styles = StyleSheet.create({
heartText: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
alignSelf: 'center',
marginLeft: 5,
},
heartRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
justifyContent: 'center',
},
heartBtn: {
height: (92/97)*(window.width/13),
width: window.width/13,
alignSelf:'center',
},
category: {
fontFamily: 'Bebas Neue',
fontSize: 10,
fontWeight: 'bold'
},
header: {
flex: 3,
alignItems: 'center',
justifyContent: 'space-around',
marginTop: window.height/30,
},
footer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: window.height/50,
},
container: {
flex: 1,
backgroundColor: 'black',
opacity: 0.6,
},
articlePreview: {
flex: 1,
height: window.height/3.2,
width: window.width,
flexDirection: 'column'
},
previewText: {
fontFamily: 'Bebas Neue',
fontSize: 23,
color: 'white',
alignSelf: 'center',
textAlign: 'center',
margin: 5,
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
},
});
The UI currently looks like this with not images (has black background):
Checked my rss feeds - some were unreliable resulting in messing with the way the images were being shown