Skip to content

Commit 3a3251c

Browse files
jsamrjsamr
committed
chore: add iframe to example
1 parent 8f5c030 commit 3a3251c

File tree

6 files changed

+179
-36
lines changed

6 files changed

+179
-36
lines changed

‎example/App.js

Lines changed: 80 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import {
88
ScrollView,
99
UIManager,
1010
Platform,
11-
Button
11+
Button,
12+
useWindowDimensions
1213
} from 'react-native';
1314
import { createStackNavigator } from '@react-navigation/stack';
1415
import { NavigationContainer, useNavigation } from '@react-navigation/native';
1516
import SnackBar from 'react-native-snackbar-component';
1617
import SimpleExample from './SimpleExample';
1718
import CustomExample from './CustomExample';
19+
import YoutubeExample from './YoutubeExample';
1820

1921
const Stack = createStackNavigator();
2022

@@ -37,7 +39,16 @@ function CustomExampleDescription() {
3739
);
3840
}
3941

40-
function CustomExampleScreen({ onLinkPress }) {
42+
function YoutubeExampleDescription() {
43+
return (
44+
<Text style={styles.welcome}>
45+
This Iframe renderer has the autoscale option set to true (default). It
46+
will zoom down to a level that allows the whole viewport to be visible.
47+
</Text>
48+
);
49+
}
50+
51+
function CustomExampleScreen({ onLinkPress, availableWidth }) {
4152
const [instance, setInstance] = useState(0);
4253
return (
4354
<ScrollView
@@ -46,13 +57,17 @@ function CustomExampleScreen({ onLinkPress }) {
4657
<CustomExampleDescription />
4758
<Button title="reload" onPress={() => setInstance((i) => i + 1)} />
4859
<View style={styles.example}>
49-
<CustomExample onLinkPress={onLinkPress} instance={instance} />
60+
<CustomExample
61+
availableWidth={availableWidth}
62+
onLinkPress={onLinkPress}
63+
instance={instance}
64+
/>
5065
</View>
5166
</ScrollView>
5267
);
5368
}
5469

55-
function SimpleExampleScreen({ onLinkPress }) {
70+
function SimpleExampleScreen({ onLinkPress, availableWidth }) {
5671
const [instance, setInstance] = useState(0);
5772
return (
5873
<ScrollView
@@ -61,7 +76,26 @@ function SimpleExampleScreen({ onLinkPress }) {
6176
<SimpleExampleDescription />
6277
<Button title="reload" onPress={() => setInstance((i) => i + 1)} />
6378
<View style={styles.example}>
64-
<SimpleExample onLinkPress={onLinkPress} instance={instance} />
79+
<SimpleExample
80+
availableWidth={availableWidth}
81+
onLinkPress={onLinkPress}
82+
instance={instance}
83+
/>
84+
</View>
85+
</ScrollView>
86+
);
87+
}
88+
89+
function YoutubeExampleScreen({ availableWidth }) {
90+
const [instance, setInstance] = useState(0);
91+
return (
92+
<ScrollView
93+
contentContainerStyle={styles.contentStyle}
94+
style={styles.scrollViewStyle}>
95+
<YoutubeExampleDescription />
96+
<Button title="reload" onPress={() => setInstance((i) => i + 1)} />
97+
<View style={styles.example}>
98+
<YoutubeExample availableWidth={availableWidth} instance={instance} />
6599
</View>
66100
</ScrollView>
67101
);
@@ -71,13 +105,22 @@ function HomeScreen() {
71105
const navigation = useNavigation();
72106
return (
73107
<View style={styles.buttonsContainer}>
108+
<View style={styles.button}>
109+
<Button
110+
title="Open simple table example"
111+
onPress={() => navigation.navigate('SimpleExample')}
112+
style={styles.button}
113+
/>
114+
</View>
115+
<View style={styles.button}>
116+
<Button
117+
title="Open custom table example"
118+
onPress={() => navigation.navigate('CustomExample')}
119+
/>
120+
</View>
74121
<Button
75-
title="Open simple example"
76-
onPress={() => navigation.navigate('SimpleExample')}
77-
/>
78-
<Button
79-
title="Open custom example"
80-
onPress={() => navigation.navigate('CustomExample')}
122+
title="Open Youtube iframe example"
123+
onPress={() => navigation.navigate('YoutubeExample')}
81124
/>
82125
</View>
83126
);
@@ -91,6 +134,8 @@ if (Platform.OS === 'android') {
91134
export default function App() {
92135
const [url, setUrl] = useState(null);
93136
const [isSnackVisible, setIsSnackVisible] = useState(false);
137+
const { width: windowWidth } = useWindowDimensions();
138+
const availableWidth = windowWidth - 40;
94139
useEffect(() => {
95140
if (url) {
96141
setIsSnackVisible(true);
@@ -107,24 +152,39 @@ export default function App() {
107152
<Stack.Navigator>
108153
<Stack.Screen
109154
options={{
110-
title: '@native-html/table-plugin'
155+
title: '@native-html/plugins'
111156
}}
112157
name="Home"
113158
component={HomeScreen}
114159
/>
115160
<Stack.Screen
116161
options={{
117-
title: 'Simple Example'
162+
title: 'Simple Table Example'
118163
}}
119164
name="SimpleExample">
120-
{() => <SimpleExampleScreen onLinkPress={onLinkPress} />}
165+
{() => (
166+
<SimpleExampleScreen
167+
availableWidth={availableWidth}
168+
onLinkPress={onLinkPress}
169+
/>
170+
)}
121171
</Stack.Screen>
122172
<Stack.Screen
123173
options={{
124-
title: 'Custom Example'
174+
title: 'Custom Table Example'
125175
}}
126176
name="CustomExample">
127-
{() => <CustomExampleScreen onLinkPress={onLinkPress} />}
177+
{() => (
178+
<CustomExampleScreen
179+
availableWidth={availableWidth}
180+
onLinkPress={onLinkPress}
181+
/>
182+
)}
183+
</Stack.Screen>
184+
<Stack.Screen
185+
name="YoutubeExample"
186+
options={{ title: 'Youtube Example' }}>
187+
{() => <YoutubeExampleScreen availableWidth={availableWidth} />}
128188
</Stack.Screen>
129189
</Stack.Navigator>
130190
</NavigationContainer>
@@ -146,6 +206,9 @@ const styles = StyleSheet.create({
146206
alignItems: 'center',
147207
backgroundColor: '#F5FCFF'
148208
},
209+
button: {
210+
marginBottom: 10
211+
},
149212
buttonsContainer: {
150213
justifyContent: 'space-between',
151214
alignItems: 'stretch',
@@ -157,6 +220,7 @@ const styles = StyleSheet.create({
157220
margin: 10
158221
},
159222
example: {
223+
marginTop: 10,
160224
flex: 1,
161225
width: '100%'
162226
},

‎example/CustomExample.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,16 +168,26 @@ const htmlConfig = {
168168
return React.createElement(ClickTable, props);
169169
}
170170
},
171+
tagsStyles: {
172+
table: {
173+
backgroundColor: 'red'
174+
}
175+
},
171176
WebView,
172177
ignoredTags: IGNORED_TAGS
173178
};
174179

175-
export default function CustomExample({ instance, onLinkPress }) {
180+
export default function CustomExample({
181+
instance,
182+
onLinkPress,
183+
availableWidth
184+
}) {
176185
return (
177186
<HTML
178187
key={`custom-${instance}`}
179188
source={{ html: table1 }}
180189
onLinkPress={onLinkPress}
190+
contentWidth={availableWidth}
181191
{...htmlConfig}
182192
/>
183193
);

‎example/SimpleExample.js

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -151,15 +151,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
151151
</p>
152152
`;
153153

154-
const tableConfig = {
155-
animationType: 'animated',
156-
tableStyleSpecs: {
157-
outerBorderWidthPx: 1,
158-
rowsBorderWidthPx: 1,
159-
columnsBorderWidthPx: 1
160-
}
161-
};
162-
163154
const renderers = {
164155
table
165156
};
@@ -169,17 +160,42 @@ const htmlConfig = {
169160
WebView,
170161
ignoredTags: IGNORED_TAGS,
171162
renderersProps: {
172-
table: tableConfig
163+
table: {
164+
animationType: 'animated',
165+
tableStyleSpecs: {
166+
outerBorderWidthPx: 1,
167+
rowsBorderWidthPx: 1,
168+
columnsBorderWidthPx: 1
169+
},
170+
displayMode: 'expand'
171+
}
173172
},
174-
defaultWebViewProps: {}
173+
tagsStyles: {
174+
table: {
175+
// Use displayMode: 'expand'
176+
alignSelf: 'center'
177+
}
178+
},
179+
defaultWebViewProps: {},
180+
computeEmbeddedMaxWidth: (contentWidth, tagName) => {
181+
if (tagName === 'table') {
182+
return Math.min(contentWidth, 500);
183+
}
184+
return contentWidth;
185+
}
175186
};
176187

177-
export default function SimpleExample({ instance, onLinkPress }) {
188+
export default function SimpleExample({
189+
instance,
190+
onLinkPress,
191+
availableWidth
192+
}) {
178193
return (
179194
<HTML
180195
key={`simple-${instance}`}
181196
source={{ html: table1 }}
182197
onLinkPress={onLinkPress}
198+
contentWidth={availableWidth}
183199
{...htmlConfig}
184200
/>
185201
);

‎example/YoutubeExample.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import HTML from 'react-native-render-html';
3+
import iframe from '@native-html/iframe-plugin';
4+
import WebView from 'react-native-webview';
5+
6+
const htmlConfig = {
7+
renderers: {
8+
iframe
9+
},
10+
renderersProps: {
11+
iframe: {
12+
autoscale: true
13+
}
14+
},
15+
tagsStyles: {
16+
iframe: {
17+
alignSelf: 'center'
18+
}
19+
},
20+
WebView
21+
};
22+
23+
const youtubeIframe = `
24+
<p>
25+
<iframe width="560"
26+
height="315"
27+
src="https://www.youtube.com/embed/POK_Iw4m3fY"
28+
frameborder="0"
29+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
30+
allowfullscreen>
31+
</iframe>
32+
</p>
33+
<p>This is a paragraph.</p>
34+
`;
35+
36+
export default function YoutubeExample({
37+
instance,
38+
onLinkPress,
39+
availableWidth
40+
}) {
41+
return (
42+
<HTML
43+
key={`youtube-${instance}`}
44+
contentWidth={availableWidth}
45+
source={{ html: youtubeIframe }}
46+
onLinkPress={onLinkPress}
47+
{...htmlConfig}
48+
/>
49+
);
50+
}

‎example/metro.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const path = require('path');
22

33
module.exports = {
44
projectRoot: __dirname,
5-
watchFolders: [path.resolve('../packages/table-plugin')],
5+
watchFolders: [
6+
path.resolve('../packages/table-plugin'),
7+
path.resolve('../packages/iframe-plugin')
8+
],
69
resolver: {
710
extraNodeModules: new Proxy(
811
{},

‎yarn.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1802,13 +1802,13 @@ __metadata:
18021802
languageName: node
18031803
linkType: hard
18041804

1805-
"@formidable-webview/webshell@npm:2.1.0, @formidable-webview/webshell@npm:^2.1.0":
1806-
version: 2.1.0
1807-
resolution: "@formidable-webview/webshell@npm:2.1.0"
1805+
"@formidable-webview/webshell@npm:2.2.0, @formidable-webview/webshell@npm:^2.2.0":
1806+
version: 2.2.0
1807+
resolution: "@formidable-webview/webshell@npm:2.2.0"
18081808
peerDependencies:
18091809
react: "*"
18101810
react-native: ">= 0.59.0"
1811-
checksum: 7cffa8ae8d1db486fc785ab5765aa7595697eed8a7388ec6890d4ed6c1332a8b16d550eed8004e397c50c50100eca1a3a7f22eaa9c68216a2701b86e4fa3b74e
1811+
checksum: 4936ffed79a6cd2a78c57015815d7be619acd3c5868ed4744ce514cda2a699fc2cdfda60c0a173684ed5a43d1e1564be2a1b38274d76953929ca4d07cf7ff5d8
18121812
languageName: node
18131813
linkType: hard
18141814

@@ -2408,7 +2408,7 @@ __metadata:
24082408
"@babel/runtime": ^7.12.5
24092409
"@formidable-webview/ersatz": ^2.1.2
24102410
"@formidable-webview/ersatz-testing": ^2.0.5
2411-
"@formidable-webview/webshell": ^2.1.0
2411+
"@formidable-webview/webshell": ^2.2.0
24122412
"@microsoft/api-documenter": ^7.11.0
24132413
"@microsoft/api-extractor": 7.12.0
24142414
"@react-native-community/bob": ^0.16.2
@@ -2450,7 +2450,7 @@ __metadata:
24502450
"@babel/runtime": ^7.12.5
24512451
"@formidable-webview/ersatz": ^2.1.2
24522452
"@formidable-webview/ersatz-testing": ^2.0.5
2453-
"@formidable-webview/webshell": 2.1.0
2453+
"@formidable-webview/webshell": 2.2.0
24542454
"@microsoft/api-documenter": ^7.11.0
24552455
"@microsoft/api-extractor": 7.12.0
24562456
"@react-native-community/bob": ^0.16.2

0 commit comments

Comments
 (0)