@@ -5,7 +5,7 @@
 "version": "0.0.0",
 "scripts": {
 "svg:cleanup": "trash src/SVGs/components",
-"svg:convert": "react-from-svg src/SVGs src/SVGs/components --with-reason",
+"svg:convert": "react-from-svg src/SVGs src/SVGs/components --with-web-for-reason",
 "svg:format": "find src/SVGs/components -name \"*.re\" | grep -v \"node_modules\" | xargs bsrefmt --in-place",
 "svg": "yarn svg:cleanup && yarn svg:convert && yarn svg:format",
 "re:clean": "bsb -clean-world",
@@ -27,23 +27,23 @@
 "devDependencies": {
 "@moox/bs-react-helmet": "^2.0.0",
 "@phenomic/markdown-as-json": "^1.0.0",
-"@reason-react-native/safe-area-context": "^0.6.0",
-"bs-platform": "^7.1.0",
+"@reason-react-native/safe-area-context": "^3.0.0",
+"bs-platform": "^7.3.0",
 "copyfiles": "^2.2.0",
 "glob": "^7.1.3",
 "mkdirp": "^0.5.1",
 "module-alias": "^2.2.0",
 "opn-cli": "^4.1.0",
 "react": "^16.8.0",
 "react-dom": "^16.8.0",
-"react-from-svg": "^3.1.0",
+"react-from-svg": "^4.0.0",
 "react-helmet": "^5.2.0",
-"react-multiversal": "https://.com/MoOx/react-multiversal.git#8239c04",
+"react-multiversal": "https://.com/MoOx/react-multiversal.git#bf0f30f",
 "react-native-web": "^0.11.2",
 "reason-future": "^2.4.0",
 "reason-highlightjs": "^0.2.0",
-"reason-react": "^0.7.0",
-"reason-react-native": "https://.com/reason-react-native/reason-react-native.git#bd0b3b1",
+"reason-react": "^0.8.0",
+"reason-react-native": "^0.62.0",
 "static-server-cli": "^1.0.2",
 "trash-cli": "^1.4.0"
 }

@@ -26,7 +26,9 @@ let make = () =>
 ~props=
 ReactDOMRe.objToDOMProps({
 "rel": "mask-icon",
-"href": {Consts.baseUrl ++ "/safari-pinned-tab.svg"},
+"href": {
+Consts.baseUrl ++ "/safari-pinned-tab.svg";
+},
 "color": "#222222",
 }),
 [||],

@@ -111,8 +111,8 @@ let make = (~currentLocation) => {
 <ViewLink href={Consts.baseUrl ++ "/"} style=styles##logoLink>
 <SpacedView style=styles##logo vertical=XS horizontal=XS>
 <SVGBsReactNative
-width={36.->ReactFromSvg.Size.dp}
-height={36.->ReactFromSvg.Size.dp}
+width="36"
+height="36"
 fill=Consts.Colors.lightest
 />
 <WindowSizeFilter.Small>
@@ -175,7 +175,7 @@ let make = (~currentLocation) => {
 accessibilityLabel={item.text}>
 {item.componentFunc(
 ~iconColor=Consts.Colors.light,
-~iconSize=22.->ReactFromSvg.Size.dp,
+~iconSize="22",
 )}
 <WindowSizeFilter.NotSmall>
 <Spacer size=XS />

@@ -102,8 +102,8 @@ let make = (~pageData) => {
 ->Option.map(officialDocHref =>
 <TextLink style=styles##officialDocLink href=officialDocHref>
 <SVGExternalLink
-width={14.->ReactFromSvg.Size.dp}
-height={14.->ReactFromSvg.Size.dp}
+width="14"
+height="14"
 fill={Predefined.Colors.Ios.light.blue}
 />
 {| Official documentation |}->React.string

@@ -27,20 +27,22 @@ let make = (~docsIndex, ~blogIndex, ~currentLocation) => {
 style(~flexDirection=`row, ~flexWrap=`wrap, ~height=100.->pct, ())
 )>
 <ContentContainer>
-{{blogIndex->Array.map(indexEntry =>
-<ViewLink
-key=indexEntry##title
-href={Consts.baseUrl ++ "/en/blog/" ++ indexEntry##id}>
-<SpacedView style=styles##card>
-<Title> {indexEntry##title->React.string} </Title>
-<Spacer />
-<TextLight>
-{indexEntry##date->React.string}
-{(" | By @" ++ indexEntry##author)->React.string}
-</TextLight>
-</SpacedView>
-</ViewLink>
-)}
+{{
+blogIndex->Array.map(indexEntry =>
+<ViewLink
+key=indexEntry##title
+href={Consts.baseUrl ++ "/en/blog/" ++ indexEntry##id}>
+<SpacedView style=styles##card>
+<Title> {indexEntry##title->React.string} </Title>
+<Spacer />
+<TextLight>
+{indexEntry##date->React.string}
+{(" | By @" ++ indexEntry##author)->React.string}
+</TextLight>
+</SpacedView>
+</ViewLink>
+);
+}
 ->React.array}
 </ContentContainer>
 <SidebarDocs docsIndex currentLocation />

@@ -34,14 +34,11 @@ let makeSections =
 sections
 ->List.toArray
 ->Array.map(section =>
-{
-"key": Some(section.title),
-"data": section.data->List.toArray,
-"renderItem": None,
-"ItemSeparatorComponent": None,
-"keyExtractor": None,
-"sectionData": None,
-}
+VirtualizedSectionList.section(
+~key=section.title,
+~data=section.data->List.toArray,
+(),
+)
 );
 };
 

@@ -32,14 +32,11 @@ let makeSections =
 sections
 ->List.toArray
 ->Array.map(section =>
-{
-"key": Some(section.title),
-"data": section.data->List.toArray,
-"renderItem": None,
-"ItemSeparatorComponent": None,
-"keyExtractor": None,
-"sectionData": None,
-}
+VirtualizedSectionList.section(
+~key=section.title,
+~data=section.data->List.toArray,
+(),
+)
 );
 };