I need to align this long text and it should start from left. As shown in the following image the end of the text is nicely displayed and start is hidden.
How to start the text from left,
alignText: 'left'
didnt work.
Geocoder.geocodePosition({
lat: origin.latitude,
lng: origin.longitude
}).then(res => {
console.log(res[0]);
this._destination.setAddressText(res[0].formattedAddress);
});
Here the formattedAddress is very long, I need to show it from the begining.
By default this is working in iOS.
try maxLength. assign value for maxlength according to visible text size. Otherwise use multiline=true if you want to show the full text.
ex:
<TextInput maxLength={50} />
Read more about it:
https://reactnative.dev/docs/textinput.html#maxlength
https://reactnative.dev/docs/textinput.html#multiline
You need to learn about flex box system in react native :
flexDirection : 'row' -> used to set the text in row direction.
alignSelf : 'flex-start' -> used to set the start from the left.
Also please read it from there React Native Basics flexbox
Related
I m currently using the slider from react-native-community and i am having trouble doing more than one thing while using onValueChange.
now the value taken from onValueChange is set to control the strokeDashOffset (sdo) of an SVG element. It is working just fine but i need to add some more rendering depending on the slider value. That's to say for example when the value reaches 340 i need to setState something, then when it reaches 650 i need to set some other state etc...
here is the code of my slider :
<Slider style={styles.slider}
minimumValue={0}
maximumValue={1570}
value={sdo}
step={1}
onValueChange = {value => setSdo(value)}
/>
(in my svg component the strokeDashOffset is set to this sdo value but i don't feel like putting my svg code is relevant here, I guess i have to add some stuff in the onValueChange but i cannot use if statements and i have no idea how to proceed)
How can i conditionally render things based on the slider value (while stille having the slider value attached to strokeDashOffset of my SVG)?
thanks in advance !
I currently have a modal where the user can pick from a large flatlist of icons. All have size: '45' and color: 'white'. When a user selects an icon, the modal is closed and their selected icon appears on the card (this feature is one that allows the user to create a custom card).
I then have a feature that allows the user to change the line colour from white to black and visa versa on the card to contrast with their selected background colour. I would also like the colour of the icon to change with the lines, but I cannot find a solution! The icon object itself is read-only and using a StyleSheet seems to only apply styles when it is referenced within the original call like:
<FontAwesomeIcon icon={archive} style = {styles.text} />
I can't seem to wrap it in a styled view and then change the style from there.
Any ideas on how to alter the colour? And the size while I'm asking?
You can make state like this :
const [style,setStyle]=useState()
You change state with user color, and apply it to your FontAwesome icon
<FontAwesomeIcon icon={archive} style = {style} />
Thanks for the answers! I ended up creating a library to reference and just passed the library prefix (fab, far, fas) and the icon name (coffee, archive, wifi). Then used:
<FontAwesomeIcon icon={[icon.props.icon[0], icon.props.icon[1]]} style ={blabla} size = {blabla} />
Meaning I can now manipulate the size and colour wherever I want! Very handy.
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
Need to show the long text, which is retrieved from server.
I'm using web storm and react native 0.57
<Text>{this.state.responseText}</Text>
Should be able to view long text under the text tag. Why long text is not shown under Text component?
Yes, I was also facing same problem. Use WebView instead of text component.
<WebView
originWhitelist={['*']}
source={{html: this.state.responseText}}}
/>
I think you should use numberOfLine = {} property of text component.
you can edit style of your text component and make fontsize larger
<Text style={{fontSize: 40}}>{this.state.responseText}</Text>
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.