Read more buttons are not showing

[Mj835]

When I save the file then it is visible but after a while, it happens same no button is visible. Please help it's urgent.

[fawaz-ahmed]

When I save the file then it is visible but after a while, it happens same no button is visible. Please help it's urgent.

Why are you passing renderTruncatedFooter prop ?

Not sure why it's happening though. Try passing style as a prop in ReadMore itself

It is a long established // and so on

[fawaz-ahmed]

When I save the file then it is visible but after a while, it happens same no button is visible. Please help it's urgent.

Problem can be with the style you are passing. Can you share that as well ?

[Mj835]

/* eslint-disable prettier/prettier */
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ReadMore from 'react-native-read-more-text';

export default class ReadMoreS extends React.Component {
render() {
return (



It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum



);
}

_renderTruncatedFooter = handlePress => {
return (
<Text style={{color: '#FF6F3D'}} onPress={handlePress}>
Read more

);
};

_renderRevealedFooter = handlePress => {
return (
<Text style={{color: '#FF6F3D'}} onPress={handlePress}>
Show less

);
};
}

const styles = StyleSheet.create({
container: {
marginHorizontal: 20,
marginVertical: 20,
},
cardText: {
fontFamily: 'Roboto-Regular',
fontSize: 14,
lineHeight: 19,
color: '#555555',
},
});

[Mj835]

I share my code above please have a look.

[fawaz-ahmed]

I share my code above please have a look.

Seems you are not using correct lib, follow installation instructions here
https://github.com/fawaz-ahmed/react-native-read-more#installation

and import as defined here
https://github.com/fawaz-ahmed/react-native-read-more#usage

[Mj835]

Now using correct please check for this issue....

[Mj835]

Please help me for this really needed to solve this please

[fawaz-ahmed]

Please help me for this really needed to solve this please

This seems like a styling issue. Try setting flex: 1 or width: '100%' in your container style

[roden0609]

I am facing the same issue. When I pass the {"my content"} element to library, "See more" is overlapping my content. But if I only pass {"my content"} to the library without element, it is okay to show correctly.

[fawaz-ahmed]

I am facing the same issue. When I pass the {"my content"} element to library, "See more" is overlapping my content. But if I only pass {"my content"} to the library without element, it is okay to show correctly.

@roden0609 can you share code sample and screenshot as well ? Thanks

[roden0609]

@fawaz-ahmed Thanks for your follow up 🙂!

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import ReadMore from '@fawazahmed/react-native-read-more';
import ParsedText from 'react-native-parsed-text';
import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';

const App = () => {

    return (
        <SafeAreaView style={styles.safe}>
            <View style={styles.root}>
                <ReadMore numberOfLines={3} style={styles.textStyle}>
                    <ParsedText
                        style={styles.text}
                        parse={
                            [
                                // {type: 'url',                       style: styles.url, onPress: this.handleUrlPress},
                                // {type: 'phone',                     style: styles.phone, onPress: this.handlePhonePress},
                                // {type: 'email',                     style: styles.email, onPress: this.handleEmailPress},
                                // {pattern: /Bob|David/,              style: styles.name, onPress: this.handleNamePress},
                                // {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
                                {pattern: /42/,                     style: styles.magicNumber},
                                {pattern: /#(\w+)/,                 style: styles.hashTag},
                            ]
                        }
                        childrenProps={{allowFontScaling: false}}
                    >
                        Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
                        But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
                        And the magic number is 42!
                        #react #react-native
                    </ParsedText>
                </ReadMore>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safe: {
        flex: 1,
    },
    root: {
        flex: 1,
        padding: 16,
    },
    textStyle: {
        fontSize: 14,
    },
    url: {
        color: 'red',
        textDecorationLine: 'underline',
    },
    email: {
        textDecorationLine: 'underline',
    },
    text: {
        color: 'black',
        fontSize: 15,
    },
    phone: {
        color: 'blue',
        textDecorationLine: 'underline',
    },
    name: {
        color: 'red',
    },
    username: {
        color: 'green',
        fontWeight: 'bold'
    },
    magicNumber: {
        fontSize: 42,
        color: 'pink',
    },
    hashTag: {
        fontStyle: 'italic',
    },
});

export default App;

[Mj835]

Its working fine now and fixed for me