iou90 / react-native-autoheight-webview Goto Github PK

View Code? Open in Web Editor NEW

491.0 491.0 158.0 3.39 MB

An auto height webview for React Native

License: ISC License

JavaScript 100.00%

react react-native webview

react-native-autoheight-webview's People

Contributors

Stargazers

Watchers

Forkers

eashevchenko shenzhenjinma gz030805 ruoyuruoshui dioxide yudai524 samridhgupta yewenxiang23 zackleonardo piemonkey vic9511 jasonstu liekki crazypeter rishabhbhatia isracardteam mndewitt soitun otusweb garrylaly goo4it calvinkei igorkulka davidlv heaton0308 trendingtechnology webbin markrickert addmaths07 hope0922 shaman123 biliangdevelop tanwenping trieulh-ict hsiehkuopin rickychowhk01 rickychowhk lxxyx 3mg hackpar vietnd87 holdsport gomino priteshjain mukeshsingh ggabcde trinhak bllocgmbh notjiam bartsolutions shahbazmancho emimuresan coderabbityu bsnelder vnlebaoduy tengzhiqiang cw19920617 jiangxunyue abhisinha11 trsurya mindira5 addonslab maxmaes anjananeema1102 nadyshalaby gastonediaz allenjcheng dfenglei itta2010 topdev423 naveen-ithappu harsh2402 klide shubhamnatu ishwartolanicts tangcaiyue thanakij nickrobinson352 wyzeware j418194983 victorlevasseur ashish-hiver nvthai kairuto zan768616253 juliangruber esjs meowcorp dellwatson nghiaphunguyen 0nn0 poonamdhomane pigdu shrinandhinijr humanscape nhjuhoang andyjinss ks-stack brianephraim puncsky

react-native-autoheight-webview's Issues

Doesn't work on iOS

React-native 0.44.0

I've done exactly the same as usage instruction, but the height doesn't change automatically even onHeightUpdated called and report correct height.

when i load a url "http://testbbc.leimingtech.com/dist/home.html#/" it not worked.this url can open in other browser .

Html that contains a div with height = 100% cause resizing to fail

When displaying the following HTML in an autoHeightWebView, the view has a height of 0 pixels.

html:

<HTML><header><style> 
html * { 
  font-size: 11pt;
  font-weight: 300;
  color: #000;
  font-family: 'Museo Sans Rounded';
}
</style></header><body><div class="journal_item_actu_body" style="height: 100%;">
<div>
<p>Certaines personnes ont tendance &agrave; avoir une respiration plut&ocirc;t thoracique (haut du buste) et courte qui ne permettra pas de mobiliser toute la colonne vert&eacute;brale.</p>
<p>Pour &eacute;viter les douleurs de dos, pensez &agrave; travailler votre respiration abdominale, allong&eacute; sur le dos avant de vous endormir, placez une main sur votre ventre et, sur l&rsquo;inspiration, pousser votre main en gonflant le ventre, mais en faisant attention que votre bas du dos reste en contact avec le matelas. Sur l&rsquo;expiration, rentrez le ventre, effectuez ceci sur plusieurs cycles (cinq &agrave; six fois). Cela permet de favoriser un &eacute;tat de relaxation qui pourra faciliter votre endormissement.</p>
</div>
</div></body></HTML>```

If i remove the ``` style="height: 100%;"``` from the html it works fine

customScript not working in Android.

Hello there,

I'm using..
"react": "16.2.0",
"react-native": "0.53.0",
"react-native-autoheight-webview": "^0.5.1"
I'm changing font size, color and line height on press some button like.. you an show in
https://lh3.googleusercontent.com/cdza3OdD0M_1wTm6zEjTTiSjRhyC20YI9w5NIm1NJTcOtaWpQoy5h8p_XZTccyNRbpg=h900-rw image.

I'm using your package and it's working fine for me, (after changed 4-5 libraries).
but when i check it in android, any scripts not working.
I tried your demo code of App.js, on press change script, it's not showing blue background color. so, even your demo code didn't worked for me.
so, please help.
Thanks.

webview自带的onMessage属性以及一些其它的属性没有

有一个需求，需要对webview中的图片进行点击监听，点击图片后查看大图。
想用webview 的 onMessage以及一些其它属性实现，其它的属性没有提供props。

html内容很少时无法选中文字复制粘贴

很诡异的一个现象。source{html:value}
这一块 value值很少的情况下无法进行长按选中字段复制。字数多的时候（4，5行以上）功能正常
eg:

          <AutoHeightWebView
            style={{
              width: SCREEN_WIDTH - 50
            }}
            source={{html: `<span>又经过了7个多小时的飞行我们终于抵达我们蜜月的目的地，热情多彩的伊比利亚半岛——西班牙！下了飞机取好行李就先前往酒店办理入住吧~</span>`}}
          />

不知道为什么

ver： rn：0.43.4 react-native-autoheight-webview": "^0.2.3"

[Android] "RCTAutoHeightWebView" does not exist

Error: Invariant Violation: Invariant Violation: Native component for "RCTAutoHeightWebView" does not exist

Works fine for iOS, already run react-native link react-native-autoheight-webview

Cannot read property 'Commands' of undefined on line 92

My code:
import WebView from 'react-native-autoheight-webview';
<WebView html={html_code} />
I got error:
Cannot read property 'Commands'
AutoHeightWebView.postMessage
index.android.js:92
Versions of packages:

Library not installing on react-native version 0.55.3

How to make sure fontSize won't change when android user change the system fontSize?

could We do that?

需要在WebView中写一个点击事件，但导出一个onMessage()方法，整个程序会崩溃

"dependencies": {
"immutable": "latest",
"prop-types": "latest",
"react": "^16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-autoheight-webview": "^0.5.1"
}

index.android.js onMessage()方法中，加入以下：

        const {onMessage} = this.props;
        console.log("源返回--", e);
        e &&e.nativeEvent && e.nativeEvent.data &&onMessage && onMessage(e);

引用：

<AutoHeightWebView  
   style={{width: Dimensions.get('window').width - 15, marginTop: 35}}  
   source={{html: `<div>彻底解决WebView加载html乱码问题。。Hello Static World
<img src="https://img11.360buyimg.com/n1/s430x430_jfs/t18598/214/227864178/151604/8dee7199/5a659921Nea0a87c0.jpg"  onclick="postMessage('img')" style="width: 100px;height: 80px"/></div>`}}  
   onMessage={(e) => this._onMessage(e)}  
/>

how to set cssfileaddress

navState.title return result still is 0 in IOS, why?

handleNavigationStateChange(navState) {
const height = Number(navState.title);
if (height) {
if (this.props.enableAnimation) {
this.opacityAnimatedValue.setValue(0);
}
this.setState({ height }, () => {
if (this.props.enableAnimation) {
Animated.timing(this.opacityAnimatedValue, {
toValue: 1,
duration: this.props.animationDuration
}).start(() => this.onHeightUpdated(height));
}
else {
this.onHeightUpdated(height);
}
});
}
}

navState.title return result still is 0 in IOS, why?

Add possibility of passing height via props

Thanks for the library, it's great.

But in my project I have a case when I need to pass custom height to the webview to display only a preview of it, and when the button is pressed I render it in auto height, something like 'Read More' functionality.

So I'm missing the possibility of passing custom height to webview via props here.

I can add it with PR if you are interested in it.

deleted

onLoad() method for android webview

Actually, i want to trigger unload method of the android webview, to check for any external hyperlinks clicked on the webview. I tried checking out the bridge code of RCTAutoHeightWebView to fork accordingly.
Can you help me with some path to implement onLoad() functionality to the android webview component?
Any related suggestions would be helpful.

startInLoadingState is not working

I tried adding startInLoadingState prop but it is not working. Is there any way that will allow me to use that props?

Thank you.

react-native webview|| Acoustic properties can be used

add functionality to open hyperlink on default browser(Android)

So I m using this library's webview to populate my HTML content in my app,
Some of my HTML content contains hyperlinks (href).

Action: Taping on hyperlinks in HTML content viewed in this lib's webview.
Current Outcome: Hyperlinks load the page in the same webview.
Expected Outcome: Hyperlink should open up on an external browser in the device.

Please help me with this scenario for Android devices.
Thanks in advance.

Undefined is not an object.

"react-native": "^0.49.3"
"react-native-autoheight-webview": "^0.3.4"

The following code not work.

<AutoHeightWebView
source={{ html: 'Heloo' }}
/>

enableAnimation={true} animationDuration={255} is not enabled

On orientation change

On orientation change the height remains the same,any solution?

安卓，如果我想给这个webview加一个点击事件，需要怎么弄

安卓，如果我想给这个webview加一个点击事件，需要怎么弄，onMessage方法被占用了

当webview里面包含iframe的时候，会出现iframe闪烁的情况，请问有解决的办法吗？

RN : 0.43.0
react-native-autoheight-webview : 0.2.1
IOS : 10.2 iphone7p (emulator)
包含视频的代码如下：
<p><iframe src="http://v.qq.com/iframe/player.html?vid=w03763itrnq&tiny=0&auto=0" frameborder="0" allowfullscreen="" width="330" height="249"></iframe></p>
gif：

Height doesn't change dynamically

Hello,

First of all, thanks for this useful module.

But when resizing HTML content, react-native-autoheight-webview is not changed.

Changing HTML source code of react-native-autoheight-webview causes screen blinking becuase of re-rendering. In contrast, hiding and showing html tags by using javascript is more smooth solution. However, the component doesn't works dynamically.

I wonder that is there any way to re-calculate and return the height value?

Can not find module when import

Hi there,

Please help me add index.js in root module or other way to ensure eslint & typescript import correct component dir. Current version it has error Cannot find module 'react-native-autoheight-webview' and I can not build app.

Doesn't work on Android

react native : 0.47.2
react-native-autoheight-webview: 0.3.1

react-native run android
than----->
node_modules/react-native-autoheight-webview/android/src/main/java/com/dscj/autoheightwebview/AutoHeightWebViewPackage.java:26: 错误: 方法不会覆盖或实现超类型的方法
@OverRide
^
1 个错误
:react-native-autoheight-webview:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':react-native-autoheight-webview:compileReleaseJavaWithJavac'.

Compilation failed; see the compiler error output for details.

Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 10.427 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

not work with a certain url eg:https://wallstreetcn.com/articles/3351394

too slow to render html

it's really too slow to render html while html content is large

onMessage not working

I have component:
https://stackblitz.com/edit/react-zk4ukn

if WebView import from react-native function onMessage will log Hello React but when change it with WebView import from 'react-native-autoheight-webview' it not show console.log Hello React.
How I can get event click button from html in your WebView autoheight?

自适应高度计算不准确，显示不全

v 0.3.1
rn version 0.45.1

tools:replace="android:allowBackup"'

你好，在Android中的配置文件manifest 的这个 tools:replace="android:allowBackup"' 是什么呀，我的运行不起来，我把这个删除了就可以运行起来，这个影响吗

React native WebView startInLoadingState

It Would be really appreciated to have the startInLoadingState method of the react native WebView.

亲，如果这个html里面有一个点击事件，我怎么交互么

undefined is not an object

Android build fails because of 'tools:replace="android:allowBackup"'

In my AndroidManifest.xml, I specify
android:allowBackup="false"

Once I added react-native-autoheight-webview, on build I get the following error:

Attribute application@allowBackup value=(false) from AndroidManifest.xml:16:7-34
 is also present at [Wazza:react-native-autoheight-webview:unspecified] 
AndroidManifest.xml:12:9-35 value=(true).
Suggestion: add 'tools:replace="android:allowBackup"' to <application> element 
at AndroidManifest.xml:12:5-33:19 to override.

I'm new at android development, but it would seem that this plugin should not specify this setting and instead let the app decide.

following the instruction given in teh build error and adding xmlns:tools="http://schemas.android.com/tools"
to the manifest fix the issue

All props not sent to webview

Hi, could you pass all webview's default props to the webview ? like "onLoadStart" "onLoadEnd" "onShouldStartLoadWithRequest"...

Thanks in advance

undefined is not an object (evaluating '_reactNative.UIManager.RCTAutoHeightWebView.Commands')

code:
<AutoHeightWebView
source={{ html: this.htmlBody }}
/>

error:
undefined is not an object (evaluating '_reactNative.UIManager.RCTAutoHeightWebView.Commands')

Versions of packages:
react@^0.14.55
react-native@^0.46.0
[email protected]
[email protected]

How to use tag <head> for html

I need use
<**head**> <title>KEETOOL EDITOR</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,height=device-height" /> <meta name="format-detection" content="telephone=no"> </**head**>
to my webview, how I can use it?

why not use `onMessage` props ?

https://facebook.github.io/react-native/docs/webview.html#onmessage

我认为使用 message 进行通许比使用hash location 这种方式要好吧, 许多 SPA 是使用 hash 做路由的.
建议增加一个自定义动态修改height 的触发事件比如 DOMContentLoaded 或者提供替换 BaseScript 的方法 , 因为当大量图片或者 iframe 加载的时候会有很长时间的空白响应, 不是很好处理.

我发现就算监听 DOMContentLoaded DOMSubtreeModified 事件也没办法做到在有 <iframe />
的情况下马上触发 updateHeight() 方法.

How to use onNavigationStateChange?

version = ( "react-native-autoheight-webview": "0.4.0" )

onNavigationStateChange not working in my app

OnLoad and onShouldStartLoadWithRequest func calling again and again IOS, screen flickering

Hi,

I have used this component like:

<AutoHeightWebView
onHeightUpdated={height =>
console.log(height ${height})}
// if page contains iframe on iOS, use a specific script for it
hasIframe={true}
/*
if set to false may cause some layout issues (width of container not fit for screen) on android
if set to true may cause some layout issues (smaller font size) on iOS
*/
scalesPageToFit={Platform.OS === 'android' ? true : false}
// baseUrl not work in android 4.3 or below version
enableBaseUrl={true}
source={{ html: <iframe src=${'https://www.youtube.com/embed/RJa4kG1N3d0'} width="100%" height="210" frameborder="0" allowfullscreen/> }}
// rn WebView callbacks
onError={() => console.log('on error')}
onLoad={() => console.log('on load')}
onLoadStart={() => console.log('on load start')}
onLoadEnd={() => console.log('on load end')}
// only on iOS
onShouldStartLoadWithRequest={result => {
console.log(onShouldStartLoadWithRequest ${JSON.stringify(result)})
return true;
}}
/>

Now i am getting the onLoad function is calling again and again, console is printing 'on load' every time.
onShouldStartLoadWithRequest func also calling again and again. and the screening is flickering.

console output:

onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":3465593839,"loading":false,"title":"","canGoForward":false,"navigationType":"other","url":"file:///Users/ronakjain/Library/Developer/CoreSimulator/Devices/792400B3-EA47-429A-8A6C-14D1618E6DBA/data/Containers/Bundle/Application/17E26A2B-C231-4F42-8243-3055E320A855/PrettySecrets.app/web"}
logger.js:14 on load start
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":754468582,"loading":true,"title":"","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":230375066,"loading":true,"title":"","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":2063609916,"loading":true,"title":"","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":3358159173,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"file:///Users/ronakjain/Library/Developer/CoreSimulator/Devices/792400B3-EA47-429A-8A6C-14D1618E6DBA/data/Containers/Bundle/Application/17E26A2B-C231-4F42-8243-3055E320A855/PrettySecrets.app/web#1"}
logger.js:14 on load start
logger.js:14 on load
logger.js:14 on load end
logger.js:14 height 210
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":2570092979,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":4041732970,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 on load
logger.js:14 on load end
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":2205232811,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":291925839,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 on load
logger.js:14 on load end
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":314753191,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":1844513979,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 on load
logger.js:14 on load end
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":2937000452,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":3690577104,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 on load
logger.js:14 on load end
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":2175068525,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"about:blank"}
logger.js:14 onShouldStartLoadWithRequest {"target":1442,"canGoBack":false,"lockIdentifier":3878204594,"loading":true,"title":"210","canGoForward":false,"navigationType":"other","url":"https://www.youtube.com/embed/RJa4kG1N3d0"}
logger.js:14 on load
logger.js:14 on load end

Note: It was working fine around 1-2 months back.

I added it, like this, but nothing is displayed, rn version is 0.55

<AutoHeightWebView
onHeightUpdated={height => console.warn(height)}
// if page contains iframe on iOS, use a specific script for it
hasIframe={true}
/*
if set to false may cause some layout issues (width of container not fit for screen) on android
if set to true may cause some layout issues (smaller font size) on iOS
*/
scalesPageToFit={Platform.OS === 'android' ? true : false}
// baseUrl not work in android 4.3 or below version
enableBaseUrl={true}
// offset of rn webview margin
heightOffset={5}
// default width is the width of screen
// if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35
style={{ height:500 }}
// enable animation by default
enableAnimation={true}
// only works on enable animation
animationDuration={255}
// or uri
source={{ html: this.state.body }}
// use local or remote files
files={[]}
// add custom CSS to the page's
customStyle={
* { font-family: 'Times New Roman'; } p { font-size: 16px; }
}
/>

CSS color somehow not applied?

Hi,

We've been trying out this component in our app but we've encountered a weird issue with it: applying custom CSS to change the text color never seems to work. However, all other CSS attributes work as expected. Here is how we use it:

import React from "react";
import PropTypes from "prop-types";
import AutoHeightWebView from "react-native-autoheight-webview";

import Colors from "@common/colors";

class RichText extends React.Component {
  static defaultProps = {
    htmlStyle: `* { color: 'red'; font-size: 16; font-family: 'arial'; }`
  };
  render() {
    return (
      <AutoHeightWebView
        source={{ html: this.props.html }}
        customStyle={this.props.htmlStyle}
        scrollEnabled={false}
        style={[this.props.style, { width: this.props.width }]}
      />
    );
  }
}

RichText.propTypes = {
  width: PropTypes.number.isRequired,
  html: PropTypes.string,
  htmlStyle: PropTypes.string,
  style: PropTypes.any
};

export default RichText;

The HTML we pass to this component is the following:

<p>Lorem ipsum dolor sir amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

I would expect this setup to lead to red text (see default props), but it always stays black (BUT the font-size and font-family are applied correctly!). Any idea what might be causing this?

onNavigationStateChange Equivalent

Hello first of all nice work!!.

I'm implementing this on my project but onNavigationStateChange doesn't exist in the project, there is a onNavigationStateChange equivalent?

Tks!!

iou90 / react-native-autoheight-webview Goto Github PK

react-native-autoheight-webview's People

Contributors

Stargazers

Watchers

Forkers

react-native-autoheight-webview's Issues

react native : 0.47.2 react-native-autoheight-webview: 0.3.1

Recommend Projects

Recommend Topics

Recommend Org

react native : 0.47.2
react-native-autoheight-webview: 0.3.1