how to make a grid of elements with rock scaling when focusing

[sasha-ld]

It needs to be like this

right.mp4

And now it’s something like this

dont.right.mp4

[sasha-ld]

It took me a fair amount of time to figure it out, but I did it, the only thing I can’t figure out yet is how to get rid of the error message
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I use react-native-tvos
Here's my solution, maybe it will be useful to someone

import React from 'react';
import {SafeAreaView, Pressable, Image} from 'react-native';
import { FlashList } from "@shopify/flash-list";
import { ShadowedView } from 'react-native-fast-shadow';

const data= [
    {
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "url": "https://via.placeholder.com/600/92c952",
        "thumbnailUrl": "https://via.placeholder.com/150/92c952"
    },
    {
        "albumId": 1,
        "id": 2,
        "title": "reprehenderit est deserunt velit ipsam",
        "url": "https://via.placeholder.com/600/771796",
        "thumbnailUrl": "https://via.placeholder.com/150/771796"
    },
    {
        "albumId": 1,
        "id": 3,
        "title": "officia porro iure quia iusto qui ipsa ut modi",
        "url": "https://via.placeholder.com/600/24f355",
        "thumbnailUrl": "https://via.placeholder.com/150/24f355"
    },
    {
        "albumId": 1,
        "id": 4,
        "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
        "url": "https://via.placeholder.com/600/d32776",
        "thumbnailUrl": "https://via.placeholder.com/150/d32776"
    },
    {
        "albumId": 1,
        "id": 5,
        "title": "natus nisi omnis corporis facere molestiae rerum in",
        "url": "https://via.placeholder.com/600/f66b97",
        "thumbnailUrl": "https://via.placeholder.com/150/f66b97"
    },
    {
        "albumId": 1,
        "id": 6,
        "title": "accusamus ea aliquid et amet sequi nemo",
        "url": "https://via.placeholder.com/600/56a8c2",
        "thumbnailUrl": "https://via.placeholder.com/150/56a8c2"
    },
    {
        "albumId": 1,
        "id": 7,
        "title": "officia delectus consequatur vero aut veniam explicabo molestias",
        "url": "https://via.placeholder.com/600/b0f7cc",
        "thumbnailUrl": "https://via.placeholder.com/150/b0f7cc"
    },
    {
        "albumId": 1,
        "id": 8,
        "title": "aut porro officiis laborum odit ea laudantium corporis",
        "url": "https://via.placeholder.com/600/54176f",
        "thumbnailUrl": "https://via.placeholder.com/150/54176f"
    },
    {
        "albumId": 1,
        "id": 9,
        "title": "qui eius qui autem sed",
        "url": "https://via.placeholder.com/600/51aa97",
        "thumbnailUrl": "https://via.placeholder.com/150/51aa97"
    },
    {
        "albumId": 1,
        "id": 10,
        "title": "beatae et provident et ut vel",
        "url": "https://via.placeholder.com/600/810b14",
        "thumbnailUrl": "https://via.placeholder.com/150/810b14"
    },
    {
        "albumId": 1,
        "id": 11,
        "title": "nihil at amet non hic quia qui",
        "url": "https://via.placeholder.com/600/1ee8a4",
        "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4"
    },
    {
        "albumId": 1,
        "id": 12,
        "title": "mollitia soluta ut rerum eos aliquam consequatur perspiciatis maiores",
        "url": "https://via.placeholder.com/600/66b7d2",
        "thumbnailUrl": "https://via.placeholder.com/150/66b7d2"
    },
    {
        "albumId": 1,
        "id": 13,
        "title": "repudiandae iusto deleniti rerum",
        "url": "https://via.placeholder.com/600/197d29",
        "thumbnailUrl": "https://via.placeholder.com/150/197d29"
    },
    {
        "albumId": 1,
        "id": 14,
        "title": "est necessitatibus architecto ut laborum",
        "url": "https://via.placeholder.com/600/61a65",
        "thumbnailUrl": "https://via.placeholder.com/150/61a65"
    },
    {
        "albumId": 1,
        "id": 15,
        "title": "harum dicta similique quis dolore earum ex qui",
        "url": "https://via.placeholder.com/600/f9cee5",
        "thumbnailUrl": "https://via.placeholder.com/150/f9cee5"
    },
    {
        "albumId": 1,
        "id": 16,
        "title": "iusto sunt nobis quasi veritatis quas expedita voluptatum deserunt",
        "url": "https://via.placeholder.com/600/fdf73e",
        "thumbnailUrl": "https://via.placeholder.com/150/fdf73e"
    },
    {
        "albumId": 1,
        "id": 17,
        "title": "natus doloribus necessitatibus ipsa",
        "url": "https://via.placeholder.com/600/9c184f",
        "thumbnailUrl": "https://via.placeholder.com/150/9c184f"
    },
    {
        "albumId": 1,
        "id": 18,
        "title": "laboriosam odit nam necessitatibus et illum dolores reiciendis",
        "url": "https://via.placeholder.com/600/1fe46f",
        "thumbnailUrl": "https://via.placeholder.com/150/1fe46f"
    }
]

// #######################################
class Row extends React.Component{
  constructor(props){
    super(props)
    this.state = {focus: false}
  }
  selectItem = (focus) =>{
    this.setState({focus: focus})
  }

 render(){
    return(
        <Pressable {...this.props} style={{...this.props.style, zIndex: this.state.focus ? 10 : 0, padding: 4}} onFocus={()=> {this.props.updateIndex(this.props.index); this.setState({focus: true})}} onBlur={()=> this.setState({focus: false})}>
            <ShadowedView
                style={{width: '100%', transform: [{scale: this.state.focus ? 1.2 : 1}], position: 'relative', borderRadius: 5, overflow: 'hidden',
                    shadowOpacity: this.state.focus ? 1 : 0,
                    shadowRadius: 30,
                    shadowOffset: {
                        width: 0,
                        height: 0}}}>
                {this.props.children}
            </ShadowedView>
        </Pressable>
    )
  }
}

// ###########################################

class List extends React.Component{
  constructor(props){
    super(props)
    this.state= {index: 0}
    this.list = React.createRef()
  }

  keyExtractor= (item)=>{
    return item.id
  }
  renderItem = ({item, index})=>{
    return(
        <Item item={item} index={index}/>
    )
}
updateIndex = (newIndex) =>{
    this.setState({index: newIndex})
}

   CellRender = (props) =>{
    return(
        <Row {...props} updateIndex={this.updateIndex}/>
    )
  }

  scaleItem = (newItem) => {
    this.setState({index: newItem})
  }


  componentDidUpdate(prevState) {
    if (this.state.index !== prevState.index) {
      this.list.current.scrollToIndex({
        index: this.state.index,
        animated: true,
        viewPosition: 0.5
      })
    }
  }

  render(){
    console.log(this.state.index)
    return(
      <FlashList
      ref={this.list}
      data={this.props.data}
      keyExtractor={this.keyExtractor}
      renderItem={this.renderItem}
      estimatedItemSize={130}
      disableAutoLayout={true}
      numColumns={6}
      CellRendererComponent={this.CellRender}
      contentContainerStyle={{padding: 20}}
      />
    )
  }
}

// ###########################################
class Item extends React.Component{
  constructor(props){
    super(props)
    this.state = {focus: false}
  }
  render(){
    return(<Image source={{uri: this.props.item.url}} style={{width: '100%', height: 200}}/>)  
  }
}

class App extends React.Component {
  constructor(){
    super()
    this.state={}
  }
  render(){
    return (
      <SafeAreaView style={{flex: 1, backgroundColor: 'grey'}}>
        <List data={data}/>
      </SafeAreaView>
    );
  }
}


export default App;

2024-03-31.011342.mp4