importing flashlist and rowrender as custom component

[saimirg]

Is it possible to import a flashlist and the rowrender function from an external file as custom component ? It is being imported fine but items are not getting focuesed. If i import just a simple text like it is shown on the example, it works fine, but not with flashlist. Do i need to pass any parameter to the component ?

[aurimasmi]

Can you provide your code example? Most likely you missing to pass focusRepeatContext property, but have to see your code first to be able to confirm

[saimirg]

Here is the sample code:

export const ComingNext = ({ comingnext }) => {
    return (
      <View>
        <Text style={{ color: "white", fontSize: 18, margin: 2, paddingLeft: 10, marginBottom: 1, marginTop: 10 }}>COMING NEXT</Text>
        <FlashList
          data={comingnext ? comingnext.documents : new Array(6).fill(null)}
          renderItem={renderComingNextProgramCard}
          type="row"
          estimatedItemSize={Dimensions.get("window").width / 10}
          horizontal
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  };

[aurimasmi]

So you are missing focusContext property which is injected in every custom component. Please read it more here https://create.flexn.org/docs/guides/focus-manager#creating-custom-components

It should look like:

export const ComingNext = ({ comingnext, focusContext }) => {

    return (
        <View focusContext={focusContext}>
         ...
        </View>
    );
}

[saimirg]

@aurimasmi it works thank you.