CODEWITHSUNDEEP
reactjsreact-native
Ahmed Saeed
Ahmed Saeed

Reputation: 645

Ref is not working properly with functional component I built

I built a simple component based on react-native-24h-timepicker and I am using hooks, context API and functional components when I tried to assign ref to a variable that is called pickerRef and use that variable to call Picker functions, a problem happens and Picker functions is not called at all

When I tried to use my component twice in my screen, I clicked on any of two components picker appears and when I choose any value it affects only the value of last component rendered even if I clicked on first component it affect last one only.

Here is the code snippet:

import React, { useState, useEffect } from 'react';
import { Text, View, TextInput, Dimensions, ScrollView, I18nManager } from 'react-native';
import Picker from "react-native-24h-timepicker";
import {Entypo} from '@expo/vector-icons';

//Get width of mobile screen
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;

const TimePicker = (props) => {
    let {
        onChangeText,
        style,
        timeTextStyle,
        iconColor,
        iconSize
    } = props;
    let pickerRef = null;
    const [time, setTime] = useState('00:00');

    useEffect(() => {
        onChangeText(time);
    },
    [time])

    onCancel = () => {
        pickerRef.close();
    }

    onConfirm = (hour, minute) => {
        setTime(`${hour<10? `0`+hour : hour}:${minute}`);
        pickerRef.close();
    }

    return (
        <View>
            <View style={{...styles.textField, ...style}}>
                <Text style={{...styles.timeText, ...timeTextStyle}} onPress={() => pickerRef.open()}>{time}</Text>
                <Entypo name='select-arrows' color={iconColor} size={iconSize}/>
            </View>
            <Picker
                ref={(ref) => {
                    pickerRef = ref;
                }}
                onCancel={() => onCancel()}
                onConfirm={(hour, minute) => onConfirm(hour, minute)}
            />
        </View>
    );
}

export default TimePicker;

TimePicker.defaultProps = {
    iconColor: '#0a5ba3',
    iconSize: 15
}

const styles = {
    textField: {
        flexDirection: 'row', 
        alignSelf: 'flex-start', 
        borderRadius: 8, 
        borderWidth: 1, 
        borderColor: '#bdc3c7', 
        padding: 10
    },
    timeText: {
        fontSize: 16, 
        color: '#0a5ba3'
    }
}

Here is the screenshoot for two components

Upvotes: 0

Views: 2043

Answers (2)

Feisal Ali
Feisal Ali

Reputation: 367

React ref is created like this 

let pickerRef = React.createRef()

to assign the reference 

<Picker
      ref={pickerRef }
       onCancel={() => onCancel()}
      onConfirm={(hour, minute) => onConfirm(hour, minute)}
/>

to access it 

pickerRef.current.close()

Upvotes: 1

Dhilip Kumar
Dhilip Kumar

Reputation: 69

As per my understanding, when you copied the component you might forget to change the second component's ref variable name.

Solution:

Create separate ref variable names "pickerRef1" and "pickerRef2" and toggle the states as per your needs.

Upvotes: 0

Related Questions