search

formidable-webview / webshell

🔥 Craft Robust React Native WebView-based components with ease.
https://formidable-webview.github.io/webshell/
MIT License
101 stars 4 forks source link

Android : Auto height is not working for webshell inside a scrollview #2

Closed raaannzzz closed 3 years ago

raaannzzz commented 3 years ago

Thanks for this awesome library! it help us alot. We experience weird behavior for android as it's auto height is not working when it's inside a scrollview (Working fine for ios) it seems the maximum height it gives is the height of the mobile screen

Here is the screenshot from android 02173bca-6e62-4dc6-a148-b0f047f9548d

jsamr commented 3 years ago

@raaannzzz Can you provide:

And I'll be happy to help.

jsamr commented 3 years ago

@raaannzzz It works in the expo demo app

raaannzzz commented 3 years ago

Hello @jsamr

Thanks a lot for your quick response

Here is the source code for webshell component

Webshell

<Webshell onDOMLinkPress={onLinkPress} onDOMHTMLDimensions={onBodyDimensions} source={{ html: htmlStyle + '<html><head></head><body>' + props.props.label + '</body></html>' }} style={({ flexGrow: 1 }, webViewHeight)} scalesPageToFit={isIos ? true : false} showsVerticalScrollIndicator={false} scrollEnabled={webViewHeight.height >= dim.height ? true : false} />

onBodyDimensions

const onBodyDimensions = useCallback(content => { setWebViewHeight({ height: content.content.height, width: '100%' }); }, []);

Default Webshell height

const [webViewHeight, setWebViewHeight] = useState({ height: 0, width: '100%' });

Here is the html code passed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Et quidem, inquit, vehementer errat; Quis istum dolorem timet? Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Nam nisi hoc optineatur, id solum bonum esse, quod honestum sit, nullo modo probari possit beatam vitam virtute effici. Duo Reges: constructio interrete. Nam hunc ipsum sive finem sive extremum sive ultimum definiebas id esse, quo omnia, quae recte fierent, referrentur neque id ipsum usquam referretur. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Stoici restant, ei quidem non unam aliquam aut alteram rem a nobis, sed totam ad se nostram philosophiam transtulerunt;

Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro. Quid, cum volumus nomina eorum, qui quid gesserint, nota nobis esse, parentes, patriam, multa praeterea minime necessaria? Animum autem reliquis rebus ita perfecit, ut corpus; Illud mihi a te nimium festinanter dictum videtur, sapientis omnis esse semper beatos; Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Qui si ea, quae dicit, ita sentiret, ut verba significant, quid inter eum et vel Pyrrhonem vel Aristonem interesset? Consequens enim est et post oritur, ut dixi.

Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Sedulo, inquam, faciam. Inde sermone vario sex illa a Dipylo stadia confecimus. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Hoc autem tempore, etsi multa in omni parte Athenarum sunt in ipsis locis indicia summorum virorum, tamen ego illa moveor exhedra. Quae dici eadem de ceteris virtutibus possunt, quarum omnium fundamenta vos in voluptate tamquam in aqua ponitis. Me igitur ipsum ames oportet, non mea, si veri amici futuri sumus. Sed quamquam negant nec virtutes nec vitia crescere, tamen utrumque eorum fundi quodam modo et quasi dilatari putant. Nos commodius agimus. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quasi vero aut concedatur in omnibus stultis aeque magna esse vitia, et eadem inbecillitate et inconstantia L. Nam haec ipsa mihi erunt in promptu, quae modo audivi, nec ante aggrediar, quam te ab istis, quos dicis, instructum videro.

here is the htmlStyle passed together with html content

const htmlStyle =;

jsamr commented 3 years ago

@raaannzzz Instead of a custom onBodyDimensions, you should follow this guide and use useAutoheight hook!

jsamr commented 3 years ago

@raaannzzz If you are still encountering the same problem, tell me. It could be related to ScrollView contentContainer flex styles.

raaannzzz commented 3 years ago

Hi @jsamr , following the guide of useAutoheight hook fix the issue and it works for both platform! thanks a lot!

gp3gp3gp3 commented 2 years ago

Hello, Thank you for the wonderful library, it has been extremely helpful.

This issue reported is still valid on Android and can be replicated with the snack posted in another issue. See here:https://snack.expo.dev/@jsamr/autoheightwebviewoptionexample

Run this example on Android, and you can find the inner html scrolling instead of the parent scroll view expected.

Any ideas on how to address this? This is problematic for keyboard navigation specifically on android phones, using tab to focus through elements is causing many issues when interacting with a parent scrollview.