Git Product home page Git Product logo

Comments (11)

nlt2390 avatar nlt2390 commented on August 23, 2024

@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.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

try to use 'react-native-collapsible' plugin and position: absolute on it

from react-native-view-more-text.

stsiushkevich avatar stsiushkevich commented on August 23, 2024
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.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

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.

nlt2390 avatar nlt2390 commented on August 23, 2024

@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.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

Cool!!!! Thank you!

from react-native-view-more-text.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

I'll try tomorrow and close this issue if all will be good

from react-native-view-more-text.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

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.

nlt2390 avatar nlt2390 commented on August 23, 2024

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.

stsiushkevich avatar stsiushkevich commented on August 23, 2024

Ok. I wait for your changes. You can close this issue I think.

from react-native-view-more-text.

nlt2390 avatar nlt2390 commented on August 23, 2024

ok thanks. Have a nice day.

from react-native-view-more-text.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.