EN VI

Javascript - react native gives TypeError: Cannot read property 'useRef' of null,?

How to Javascript - react native gives TypeError: Cannot read property 'useRef' of null,

im new to react native so i really don't know why this issue is coming up. if u need any additional info feel free to ask. im trying to build a navigation system similar to windows phone where we can swipe to the next screen.

here is my code

import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React , {useState,useRef} from 'react'

const allData = [
    {name:'Explore',id:'1'},
    {name:'Trending',id:'2'},
    {name:'Post',id:'3'},
    {name:'Messages',id:'4'},
    {name:'Marketplace',id:'5'}
]
const reff = useRef()
const [index,setIndex] = useState(2)
const spacing = 10;


export default function topDynamicBar() {
  return (
    <View style ={styles.container}>
      <FlatList
      ref={reff}
      initialScrollIndex={index}
      keyExtractor={(item)=>item.id}
      data={allData}  
      renderItem={({item, index: findex})=>(<Text style={styles.items}>{item.name}</Text>)}
      horizontal
      showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#000000'
    },
    items:{
        padding:2,
        fontSize:30,
        height: "auto",
        margin:10,
        borderColor:'#fff',
        borderWidth:2,
        borderRadius: spacing
        

    }

})

Solution:

This happening because you are using useRef outside the functional component, hooks only used inside the functional component.

Try this code:

import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React, { useState, useRef } from 'react'

const allData = [
    { name: 'Explore', id: '1' },
    { name: 'Trending', id: '2' },
    { name: 'Post', id: '3' },
    { name: 'Messages', id: '4' },
    { name: 'Marketplace', id: '5' }
]

const spacing = 10;

export default function topDynamicBar() {
    const reff = useRef()
    const [index, setIndex] = useState(2)

    return (
        <View style={styles.container}>
            <FlatList
                ref={reff}
                initialScrollIndex={index}
                keyExtractor={(item) => item.id}
                data={allData}
                renderItem={({ item, index: findex }) => (<Text style={styles.items}>{item.name}</Text>)}
                horizontal
                showsHorizontalScrollIndicator={false}
            />
        </View>
    )
}


const styles = StyleSheet.create({
    container:{
        backgroundColor:'#000000'
    },
    items:{
        padding:2,
        fontSize:30,
        height: "auto",
        margin:10,
        borderColor:'#fff',
        borderWidth:2,
        borderRadius: spacing
        

    }

})

Hope it will solve your problem