Center text about react-native-htmlview HOT 9 CLOSED

const styles = StyleSheet.create({
    wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

from react-native-htmlview.

Is there any progress on this? textAlign: 'center' still doesn't work for me.

from react-native-htmlview.

@reni99, @dan-katz
I just used the following:

The HTML view usage using the renderNode prop function for custom rendering

<HTMLView value={this.props.item.description()} stylesheet={descriptionStyles}
                                          renderNode={this.renderDescription}/>

Render my node function

renderDescription = (node, index, list, parent) => {
        if (node.type === 'text') {
            return (
                <Text key={index} style={descriptionStyles.p}>
                    {entities.decodeHTML(node.data)}
                </Text>);
        } else if (node.type === 'tag') {
            return (
                <View>
                    {node.children.map(this.renderDescription)}
                </View>)
        }
        return false;
    }

Style

const descriptionStyles = StyleSheet.create({
    p: {
        color: 'white',
        fontSize: 18,
        textAlign: 'center',
    },
});

from react-native-htmlview.

I tried the above code, but it doesn't work. Has anyone found the solution?

from react-native-htmlview.

Here is what I did.

Define the element like this

const htmlContent = `<a href="http://path-to-your-link.com">link</a>`;

And use it like this

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
   <HTMLView
      value={htmlContent}
   />
</View>

from react-native-htmlview.

The HTMLView accepts an (undocumented) style prop. So you could also apply the wrapper style directly to the HTMLView:

<HTMLView
  style={{ alignItems: 'center', justifyContent: 'center' }}
  value={ htmlString } />

from react-native-htmlview.

i got the solution
i use the 0.9.0. change the line 96 in htmlToElement.js to like this
<View key={index} onPress={linkPressHandler}> {linebreakBefore} {listItemPrefix} {domToElement(node.children, node)} {linebreakAfter} </View>

from react-native-htmlview.

@xsgkaka This throws an error of RawText "" must be wrapped in an explicit <Text> component and @flavordaaave solution only center aligns the first tag if you have multiple tags. I found a global solution, I created a PR for it #116 this makes the entire value of the component align text center. due to the implementation it is complicated to make them independently align text. But if you are looking to align the entire value then this works good.

UPDATE: I updated the PR with the actual fix, it now individually aligns each tag according to what you want, I have a nice explanation on the PR #116 about what was causing it and the fix of course.

from react-native-htmlview.

Should work as soon as 0.12 is published 😄

from react-native-htmlview.