React Native Webview — Pull Down to Refresh. Android_iOS _ by Zubyrbutt _ Medium

Open in app Sign up Sign in
Search
React Native Webview — Pull down to refresh.

Android/iOS
Zubyrbutt · Follow
2 min read · Nov 27, 2023
Listen Share
This is my main component. WebContainer.tsx
//WebContainer.tsx
import React, { useRef, useState } from 'react';

import { ActivityIndicator, ScrollView, RefreshControl, View } from 'react-nati
import RNWebView, {
WebViewNavigation,
} from 'react-native-webview';
import { TWebContainer } from './constraints';
import { useCustomTheme } from 'app/hooks/useCustomTheme';
import styles from './styles';
const WebContainer: React.FC<TWebContainer> = props => {

const webViewRef = useRef<RNWebView | null>(null);
const [refreshing, setRefreshing] = useState(false);
const [refresherEnabled, setEnableRefresher] = useState(true);
const url = props.url;

const { colors } = useCustomTheme();
const triggerRefresh = () => {

setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 2000);
};
React.useEffect(() => {
if (refreshing) {
triggerRefresh();
}
}, [refreshing]);
const Spinner = () => (

<View style={styles.activityContainer}>
<ActivityIndicator size="small" color={colors.primary} />
</View>
);
const onLoadingError = (error: any) => {

props.onError && props.onError(error.nativeEvent.description);
};
const handleHttpError = (error: any) => {

props.onError && props.onError(error.nativeEvent.description);
};
const onNavigationStateChange = (state: WebViewNavigation) => {

props.onUrlChange && props.onUrlChange(state.url);
};
const handleScroll = (event:any) => {

const yOffset = Number(event.nativeEvent.contentOffset.y)
if (yOffset === 0) {
setEnableRefresher(true)
} else {
setEnableRefresher(false)
}
}
return (
<View style={styles.screen}>
<ScrollView style={{}}
contentContainerStyle={{ flex: 1 }}
refreshControl={
<RefreshControl
refreshing={refreshing}
enabled={refresherEnabled}
onRefresh={() => {
triggerRefresh();
webViewRef?.current?.reload(); // Use optional chaining
}}
/>
}>
<RNWebView
onScroll={handleScroll}
ref={webViewRef}
scalesPageToFit
javaScriptEnabled={true}
domStorageEnabled={true}
setSupportMultipleWindows={false}
pullToRefreshEnabled={true}
cacheEnabled={props.cacheEnabled}
cacheMode="LOAD_DEFAULT"
source={{ uri: url }}
startInLoadingState={true}
renderLoading={Spinner}
onError={onLoadingError}
onHttpError={handleHttpError}
onNavigationStateChange={onNavigationStateChange}
/>
</ScrollView>
</View>
);
};
export default WebContainer;
And here is how to use this component.
<WebContainer cacheEnabled={true} url={'url'} />

//constraints.ts
export interface HeaderRightSectionProps {

isCurrentFavorite: boolean;
onFavoritePress: () => void;
onEmailPress: () => void;
onSilentModeToggled: (isSilent: boolean) => void;
messageCount: number;
}
After a long time researching how to achieve this. use this component and leave a
comment if I improve this component.
Thanks for your support
Follow
Written by Zubyrbutt
2 Followers · 5 Following
Responses (1)
What are your thoughts?
Respond
Stéphane Soler
5 months ago
Thanks but I can not find those in your code :)
import { TWebContainer } from './constraints';
import { useCustomTheme } from 'app/hooks/useCustomTheme';
import styles from './styles';
Reply
Recommended from Medium

Harendra
How I Am Using a Lifetime 100% Free Server

Get a server with 24 GB RAM + 4 CPU + 200 GB Storage + Always Free
Oct 26 7.4K 111
In Programming Domain by Shuai Li
Can You Answer This Senior Level JavaScript Promise Interview

Question?
Most interviewees failed on it.
Aug 12 3.7K 46
Lists
Staff picks
786 stories · 1498 saves
Stories to Help You Level-Up at Work

Self-Improvement 101
Productivity 101
In Coding Beauty by Tari Ibaba
This new JavaScript operator is an absolute game changer

Say goodbye to try-catch
Sep 18 5.6K 78
The Expert Developer
Using TypeScript with React Native: Best Practices :

TypeScript has rapidly become a favourite among developers for building robust, scalable, and
maintainable applications. Combined with…
Nov 29 200
Rutikpanchal
Building a Robust Form in React Native with React Hook Form and Zod for
Validation
Leveraging React Hook Form and Zod to Create Efficient and Scalable Form Validation in React
Native
Sep 11 4
Idrak Mirzayev
Navigation Bar (Navbar) Module

A navigation bar, or Navbar, is an essential element in web design that allows users to easily
explore different sections of a website. It…
Oct 24 75
See more recommendations

React Native Webview — Pull Down to Refresh. Android_iOS _ by Zubyrbutt _ Medium

Uploaded by

React Native Webview — Pull Down to Refresh. Android_iOS _ by Zubyrbutt _ Medium

Uploaded by

Open in app Sign up Sign in

React Native Webview — Pull down to refresh.

import React, { useRef, useState } from 'react';

const WebContainer: React.FC<TWebContainer> = props => {

const url = props.url;

const triggerRefresh = () => {

const Spinner = () => (

const onLoadingError = (error: any) => {

const handleHttpError = (error: any) => {

const onNavigationStateChange = (state: WebViewNavigation) => {

const handleScroll = (event:any) => {

export default WebContainer;

And here is how to use this component.

<WebContainer cacheEnabled={true} url={'url'} />

export interface HeaderRightSectionProps {

Thanks for your support

What are your thoughts?

Thanks but I can not find those in your code :)

import { TWebContainer } from './constraints';

import { useCustomTheme } from 'app/hooks/useCustomTheme';

import styles from './styles';

Recommended from Medium

How I Am Using a Lifetime 100% Free Server

Oct 26 7.4K 111

In Programming Domain by Shuai Li

Can You Answer This Senior Level JavaScript Promise Interview

Stories to Help You Level-Up at Work

In Coding Beauty by Tari Ibaba

This new JavaScript operator is an absolute game changer

Using TypeScript with React Native: Best Practices :

Navigation Bar (Navbar) Module

See more recommendations

You might also like