onLinkPress

[johntom]

Hi,
While the htmlContent displays correctly I can't seem to get onLinkPress to work
Thanks,
John

render: function() {

    var htmlContent = '<p><a href="">&hearts; nice job!</a></p>';
       var url = 'http://gooogle.com';
        return (
            <View style={property.color}>
            <Image source={require('../img/glow2.png')} style={property.container}>
                <Navbar
                    title="Property Info"
                    subtitle=""
                    style={property.toolbar}
                    subtitleStyle={property.subtitle}   />          
                <ScrollView style={{marginBottom: 55, backgroundColor: 'transparent'}}>
                    <View style={property.propertyContent}>
                    <Icon name="android-checkbox-outline" size={20} color="rgba(255,255,255,0.9)" style={{position: 'absolute',top:0, left: 0}}/>
                     <Text style={property.content}>Address   {this.state.property.Address} </Text>
                    <HTMLView
                        value={htmlContent}
                        onLinkPress={(url) => console.log('navigating to: ', url)}
                        stylesheet={styles}
                      />  
                     </View>
                </ScrollView>

            </Image>
            </View>
        );
    }

[jsdf]

Are you just trying to get the link to open in the browser? You can just do this:

var React = require('react-native')
var {
  Linking,
} = React

//...

render() {
  return <HTMLView
    value={htmlContent}
    onLinkPress={Linking.openURL}
  />
}

[johntom]

Hi,
This is all the code and it doesn't work with Linking or LinkingIOS.
Thanks,
John
/* @flow */
'use strict';
var React = require('react-native');
var contact = require('../Styles/contact');
var Icon = require('react-native-vector-icons/Ionicons');

var LeftMenuBack = require('./Widgets/LeftMenuBack');
var Footer = require('./Widgets/Footer');
var Navbar = require('./Widgets/Navbar');
var RightButtonBack = require('./Widgets/RightButtonBack');
var RightButtonCompose = require('./Widgets/RightButtonCompose');
var Title = require('./Widgets/Title');
var ToolbarAndroid = require('ToolbarAndroid');
var property = require('../Styles/property');
var AppDispatcher = require('./../Dispatcher/AppDispatcher');
var moment = require('moment');

var HTMLView = require('react-native-htmlview');

var {
Image,
View,
Text,
ScrollView,
BackAndroid,
StyleSheet,
Linking
} = React;

BackAndroid.addEventListener('hardwareBackPress', function() {
console.log('Back');
AppDispatcher.dispatch({
actionType: 'Back'
});
return true;
});

var Inbox = React.createClass({
getInitialState: function() {

 return {
    property: this.props.route.passProps.initialProperty,
    loaded: false,
    authenticated: false,
    subscribers: []
 };
},

//  var htmlContent = '<p><a href="">&hearts; nice job!</a></p>';
render: function() {
    var BuiltDate = moment(this.state.property.BuiltDate).format('dddd, MMMM Do YYYY');
var BIN = this.state.property.BIN;
var htmlContent = '<p><a href="">&hearts; nice job!</a></p>';
//  var url = '<p><a href="http://google.com">gtz</a></p>';
  var url = 'http://www.google.com';
    return (
        <View style={property.color}>
        <Image source={require('../img/glow2.png')} style={property.container}>
            <Navbar
                title="Property Info"
                subtitle=""
                style={property.toolbar}
                subtitleStyle={property.subtitle}   />          
            <ScrollView style={{marginBottom: 55, backgroundColor: 'transparent'}}>
                <View style={property.propertyContent}>
                    <Icon name="android-checkbox-outline" size={20} color="rgba(255,255,255,0.9)" style={{position: 'absolute',top:0, left: 0}}/>

     <Text style={property.content}>Address   {this.state.property.Address} </Text>
     <Text style={property.content}>ID   {this.state.property.BuildingId} </Text>
     <Text style={property.content}>Floors   {this.state.property.TotalFloors} </Text>
     <Text style={property.content}>Date Built   {BuiltDate } </Text>
     <Text style={property.content}>GBA   {this.state.property.GBA} </Text>
     <Text style={property.content}>Zoning District   {this.state.property.ZoningDistrict} </Text>
     <Text style={property.content}>BIN   {BIN} </Text>
     <Text style={property.content}>url   {url} </Text>

<Text style={{color: 'yellow'}}
onPress={() => Linking.openURL('http://google.com')}>
Google
<HTMLView
value={htmlContent}
onLinkPress={(url) => console.log('navigating to: ', url)}
stylesheet={styles}
/>

            </ScrollView>
            <Footer />
        </Image>
        </View>
    );
}

});

module.exports = Inbox;

var styles = StyleSheet.create({
a: {
fontWeight: '300',
color: '#FF3366', // pink links
},
})

[jsdf]

You seem to have put the handler which calls Linking.openURL in a prop called 'onPress' but it needs to be passed in as the 'onLinkPress' (which you're currently passing a handler which calls console.log)

[johntom]

Hi James,
Seems like my code got chopped on last post and I see what your mean but it still won't open
John

<HTMLView
        value={htmlContent}
        onLinkPress={('http://google.com') }
        stylesheet={styles}
      />  

[jsdf]

The code in your last example should be

<HTMLView
        value={htmlContent}
        onLinkPress={() => Linking.openURL('http://google.com') }
        stylesheet={styles}
      />  

[johntom]

Hi,
Yes I have tried (onLinkPress={() => Linking.openURL('http://google.com') } but still wont work, Perhaps there is some setup option I'm missing for android (gradle mods, etc)? No error displays when I try to click on the link using your example var htmlContent...
Using Win10, react 0.19, genymotion...
Thanls so much for your help as i'm truly stuck on this issue.

John

[bas-ie]

This seems likely to have been an issue unrelated to this package. It's been over a year: if you're still having problems, please open a new issue and we'll try to get to the bottom of it!