@builder.io/sdk-react-native 4.0.6 → 4.0.8

package/src/blocks/symbol/symbol.tsx

@@ -47,20 +47,22 @@ function Symbol(props: SymbolProps) {
 
   const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
 
+  const [symbolEntry, setSymbolEntry] = useState(() => props.symbol?.entry);
+
   function setContent() {
-    if (contentToUse) return;
+    if (contentToUse && symbolEntry === props.symbol?.entry) return;
     fetchSymbolContent({
       symbol: props.symbol,
       builderContextValue: props.builderContext,
     }).then((newContent) => {
       if (newContent) {
         setContentToUse(newContent);
+        setSymbolEntry(props.symbol?.entry);
       }
     });
   }
 
   useEffect(() => {}, []);
-
   useEffect(() => {
     setContent();
   }, [props.symbol]);

package/src/blocks/text/component-info.ts

@@ -1,10 +1,10 @@
 import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: TARGET === 'reactNative' ? true : false,
+  shouldReceiveBuilderProps: TARGET === 'reactNative' ? {
+    builderBlock: true,
     builderContext: true
-  },
+  } : {},
   name: 'Text',
   static: true,
   isRSC: true,

package/src/components/block/block.helpers.ts

@@ -122,4 +122,8 @@ export const provideBuilderContext = (block: RegisteredComponent | null | undefi
     builderContext: context
   };
   return {};
+};
+export const generateKey = (index: number) => {
+  //This does not handle the case in Qwik
+  return index.toString();
 }

package/src/components/block/block.tsx

@@ -33,6 +33,7 @@ import type { BuilderBlock } from "../../types/builder-block";
 import DynamicDiv from "../dynamic-div";
 import { bindAnimations } from "./animator";
 import {
+  generateKey,
   getComponent,
   getInheritedStyles,
   getRepeatItemData,
@@ -155,7 +156,6 @@ function Block(props: BlockProps) {
   }
 
   useEffect(() => {}, []);
-
   useEffect(() => {
     _processedBlock.update = true;
   });
@@ -208,7 +208,7 @@ function Block(props: BlockProps) {
                 <>
                   {repeatItem()?.map((data, index) => (
                     <RepeatedBlock
-                      key={index}
+                      key={generateKey(index)}
                       repeatContext={data.context}
                       block={data.block}
                       registeredComponents={props.registeredComponents}
@@ -234,7 +234,7 @@ function Block(props: BlockProps) {
             <>
               {repeatItem()?.map((data, index) => (
                 <RepeatedBlock
-                  key={index}
+                  key={generateKey(index)}
                   repeatContext={data.context}
                   block={data.block}
                   registeredComponents={props.registeredComponents}

package/src/components/block/components/interactive-element.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
+import { useState, useEffect } from "react";
 
 export type InteractiveElementProps = {
   Wrapper: any;
@@ -29,6 +30,8 @@ import type { Dictionary } from "../../../types/typescript";
 import Awaiter from "../../awaiter";
 
 function InteractiveElement(props: InteractiveElementProps) {
+  const [forceRenderCount, setForceRenderCount] = useState(() => 0);
+
   function attributes() {
     return props.includeBlockProps
       ? {
@@ -47,6 +50,12 @@ function InteractiveElement(props: InteractiveElementProps) {
       : {};
   }
 
+  function targetWrapperProps() {
+    return props.wrapperProps;
+  }
+
+  useEffect(() => {}, [props.wrapperProps, props.block?.component?.options]);
+
   return (
     <>
       {props.Wrapper.load ? (
@@ -61,7 +70,7 @@ function InteractiveElement(props: InteractiveElementProps) {
           </Awaiter>
         </>
       ) : (
-        <props.Wrapper {...props.wrapperProps} attributes={attributes()}>
+        <props.Wrapper {...targetWrapperProps()} attributes={attributes()}>
           {props.children}
         </props.Wrapper>
       )}

package/src/components/block/components/repeated-block.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
-import { useState, useContext } from "react";
+import { useState, useContext, useEffect } from "react";
 
 type Props = Omit<BlockProps, "context"> & {
   repeatContext: BuilderContextInterface;
@@ -25,6 +25,10 @@ import Block from "../block";
 function RepeatedBlock(props: Props) {
   const [store, setStore] = useState(() => props.repeatContext);
 
+  useEffect(() => {
+    setStore(props.repeatContext);
+  }, [props.repeatContext]);
+
   return (
     <BuilderContext.Provider value={store}>
       <Block

package/src/components/blocks/blocks-wrapper.tsx

@@ -107,7 +107,6 @@ function BlocksWrapper(props: BlocksWrapperProps) {
       }
     }
   }, []);
-
   useEffect(() => {}, [props.blocks]);
 
   return (

package/src/components/content/components/enable-editor.tsx

@@ -430,7 +430,6 @@ function EnableEditor(props: BuilderEditorProps) {
       }
     }
   }, []);
-
   useEffect(() => {
     if (props.content) {
       mergeNewContent(props.content);
@@ -451,7 +450,6 @@ function EnableEditor(props: BuilderEditorProps) {
       });
     }
   }, [props.locale]);
-
   useEffect(() => {
     return () => {
       if (isBrowser()) {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.6"
+export const SDK_VERSION = "4.0.8"