Comments (11)
@stsiushkevich Hi, I've tried on my side but cannot replicate this issue. Could you post ur code here ?
from react-native-view-more-text.
try to use 'react-native-collapsible' plugin and position: absolute on it
from react-native-view-more-text.
const styles = StyleSheet.create({
collapsiblePanelWrapper:{
backgroundColor: 'white',
position: 'absolute',
zIndex: 1,
left: 0,
right: 0,
bottom: 0
borderColor: 'red',
borderStyle: 'solid',
borderWidth: 1
},
row: {
borderColor: 'green',
borderStyle: 'solid',
borderWidth: 1
}
})
function MarketplacesCollapsiblePanel (props) {
let rows = _.map([1,2,3], (o, i) => {
return (
<View style={styles.row}>
<ViewMore numberOfLines={1}>
<Text style={style}>Test big text. Test big text. Test big text. Test big text.
Test big text. Test big text. Test big text. Test big text. </Text>
</ViewMore>
<ViewMore numberOfLines={1}>
<Text style={style}>Test big text. Test big text. Test big text. Test big text.
Test big text. Test big text. Test big text. Test big text. </Text>
</ViewMore>
</View>
)
})
return (
<View style={styles.collapsiblePanelWrapper}>
<Collapsible collapsed={isCollapsed} duration={500}>
<View>{rows}</View>
</Collapsible>
</View>
)
}
from react-native-view-more-text.
I have a similar code. I think you will be able to reproduce my issue. It appears on IOS
from react-native-view-more-text.
@stsiushkevich Hi, thanks a lot for raising this issue. The issue is not about "position: 'absolute'", it's about 2 rendering at the same time.
To fix this, I've added 1 more attribute "renderTimeout" to prevent simultaneous rendering.
In this case:
let rows = _.map([1,2,3], (o, i) => {
return (
<View style={styles.row}>
<ViewMore numberOfLines={1} renderTimeout={50 * i}>
<Text style={style}>Test big text. Test big text. Test big text. Test big text.
Test big text. Test big text. Test big text. Test big text. </Text>
</ViewMore>
<ViewMore numberOfLines={1} renderTimeout={50 * i + 100}>
<Text style={style}>Test big text. Test big text. Test big text. Test big text.
Test big text. Test big text. Test big text. Test big text. </Text>
</ViewMore>
</View>
)
})
Plz update the plugin and try again. Let me know if this issue is fixed.
Thanks!
from react-native-view-more-text.
Cool!!!! Thank you!
from react-native-view-more-text.
I'll try tomorrow and close this issue if all will be good
from react-native-view-more-text.
Your decision is working. But I must set 0, 300, 500 timeouts for normal work. So user can see a significant duration(((
from react-native-view-more-text.
Yes I know it's slow down. Initially I made this just for 1 simple rendering, not to be rendered multiple times like this. I'll try to update this when I have time.
For now, if u dont want to let users see the rendering process, u can set opacity = 0 to wrapper div, then set it back to 1 after 2-3 seconds.
Hope this helps.
from react-native-view-more-text.
Ok. I wait for your changes. You can close this issue I think.
from react-native-view-more-text.
ok thanks. Have a nice day.
from react-native-view-more-text.
Related Issues (20)
- Footer not updated after changing the children HOT 5
- dotdotdot not showing HOT 1
- View more is not showing HOT 3
- View more is always shown HOT 1
- style
- Its showing nested view error in using react-native-render-Html library HOT 5
- If i set numberOfLines = 3 then i have posted some blog Paragraph style that time first paragraph shown ReadMore and After Line show content HOT 6
- Here is my code :
- Query/Expand the view by default HOT 1
- Cannot set Text to selectable when using ViewMoreText
- Not supporting other components than Text HOT 1
- Align View More text next to paragraph HOT 2
- Option to be able to press the text itself to expand
- Add view and two text Components in the same view?
- Button to view more or less is not showing up HOT 1
- Not showing More & Less Button
- Use in functional component HOT 1
- Text is not showing perfectly in iOS. HOT 3
- Set ellipsizeMode HOT 1
- Allow Font Scaling property not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-view-more-text.