I'm developing a mobile app with react-native-paper, and I'm using List in react-native-paper.
I would like to show up whole message on the List.
In default, List omits the part of the message if the message is too long like the gif below.
https://gyazo.com/d60defc5f46b51408d68e793f9365172
I have already tried to change the parameters(head, middle, tail, and clip) of titleEllipsizeMode.
However, these parameters didn't work as I expected.
This is my code.
<List.Section theme={{ colors: { primary: 'black' }}}>
<List.Accordion
title='Loooooooooooooooooooooooooooong title title title'
expanded={this.state.expanded}
onPress={this._handlePress}
>
<List.Item
title='Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title title title'
expanded={this.state.expanded}
titleEllipsizeMode='tail'
titleStyle={{ fontSize: 10 }}
/>
</List.Accordion>
</List.Section>
First of all the list title should not be too long as it's against the design guidelines.
Normally if you need to have a subtext then it would move underneath it as in the picture below.
Gmail-guidelines
If you want to have control over the entire styling of the list title and even list item title is to pass a component to the title prop then style the component:
<List.Accordion title={<View><Text>Accordion title</Text></View>}>
<List.Item title="item title"/>
</List.Accordion>
Then you can style the View & Text components
Related
Well, i'm importing a header component where I build my title, subtitle, and top buttons.
I want to import the title, but with a small change on its style, just changing the color to yellow.
How could I change just the color style of title, without touching the other props, or making a new prop in the component?
https://i.stack.imgur.com/oCDpR.png
PS: My first post, I don't know how to paste the img pretty well.
this is the code:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
/>
I'm not gonna be able to be exact unless you share the SimpleHeader component but this logic should work for you:
In the SimpleHeader component, add a prop called titleColor and pass it to the text:
<Text title style={[styles.title, {color:props.titleColor}]}>{title}
Pass that extra titleColor prop from the main component:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
titleColor='yellow'
/>
I want to create a summary page in react native with different items, which will be displayed through slider with card. Im using intro slider library.
I dont want to set the title and content with static text, but everything has to come from server as JSON data and map items to card.
like
content = [{"title": "Title 1", "item1":"value1", "item2":"value2"},{"title": "Title 2", "item1":"value1", "item2":"value2", "item3": "value3"},....]
render()
{ map(contents) =>item( implement card here and return)
}
What is best way to do this?
Need help with deciding json format and rendering it with map. No of items in each page, and it's name wont be be same always.
It should be a generic slider card which can display any title and items of any length and content.
Considering your case, I have developed a solution for you. Please try the following:
{contents.map((item, index) => (
<View key={index}>{item.index}</View>
))}
If this doesn't work then try
{contents.map((item, index) => (
<View key={index}>{item[index]}</View>
))}
This solution work regardless of the property name.
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.
Let's say in a TextInput element, I want to make a word green if it's formatted as #someonesusername the moment they finish writing the word (as opposed to after the text is submitted, in which case it's trivial to send the text to a normal Text component with subset styling. I thought of underlaying a Text component with absolute positioning and making the actual TextInput component invisible, but that seems it might be a headache to keep in sync, and cause usability challenges in the sense that the editing cursor wouldn't be there unless you wired together a custom cursor element to render and that'd be quite the headache for such a small thing I want to do.
So this the hack I came up with (Amazing question).
React native TextInput can take children as input. So why not split the value and add Text as children in the TextInput and add style the way you want to.
May be wondering how do get the text back? Well these children become string when comes to onChangeText callback and get a string back in your state.
For example:
// split the text like
const [firstPart, secondPart] = this.state.text.split("#");
const [higlighted , restText] = secondPart ? secondPart.split(' ') : [];
Then use them
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={this.onChangeText}
>
<Text style={styles.paragraph}>
<Text>{firstPart}</Text>
{higlighted && <Text style={{
color: 'blue'
}}>#{higlighted}</Text>}
{restText !== undefined && <Text> {restText}</Text>}
</Text>
</TextInput>
Umm, I accept this might be worse solution ever but this works :P
Full example:
https://snack.expo.io/#subkundu/react-native-styles-to-a-subset-of-the-text
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