5

I have an issue: thre is a list of users, and I want to add appointment to any user, so on user screen a PlusButton sending user on the add appointment screen (the PlusButton rendered from headerRight of the user screen). BUT I dont know how to pass to AddAppointmentScreen users id, because link to screen not via button, its via react-navigation v5.

here is a link to my project on github

App.js

const HeaderRight = ({ navigation, target }) => {
    return (
        <Button transparent onPress={() => navigation.navigate(target)}>
            <Icon name='plus' type='Entypo' style={{ fontSize: 26 }} />
        </Button>
    )
}


<Stack.Screen
                name='Patient'
                component={PatientScreen}
                options={{
                    title: 'Карта пациента',
                    headerTintColor: '#2A86FF',
                    headerTitleAlign: 'center',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                        fontSize: 20,
                    },
                    headerBackTitleVisible: false,
                    headerRight: () => <HeaderRight navigation={navigation} target={'AddAppointment'} />,
                }}
/>

AddAppointmentScreen.js

import React, { useState } from 'react'
import { Keyboard } from 'react-native'
import { Container, Content, Form, Item, Input, Label, Icon, Text, Button } from 'native-base'
import DateTimePicker from '@react-native-community/datetimepicker'
import styled from 'styled-components/native'

import { appointmentsApi } from '../utils/api'

const AddAppointmentScreen = ({ route, navigation }) => {
    const [values, setValues] = useState({ patientId: route.params?.patientId._id ?? 'defaultValue' })
    const [date, setDate] = useState(new Date())
    const [mode, setMode] = useState('date')
    const [show, setShow] = useState(false)

    console.log(values.patientId)
    //I need to get patientId in this screen to create appointment to THIS user with its ID

    const setFieldValue = (name, value) => {
        setValues({
            ...values,
            [name]: value,
        })
    }

    const handleChange = (name, e) => {
        const text = e.nativeEvent.text
        setFieldValue(name, text)
    }

    const submitHandler = () => {
        appointmentsApi
            .add(values)
            .then(() => {
                navigation.navigate('Patient')
            })
            .catch((e) => {
                alert(e)
            })
        /* alert(JSON.stringify(values)) */
    }

    const formatDate = (date) => {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear()

        if (month.length < 2) month = '0' + month
        if (day.length < 2) day = '0' + day

        return [year, month, day].join('-')
    }

    const onChange = (event, selectedDate) => {
        Keyboard.dismiss()
        const currentDate = selectedDate || date
        const date = formatDate(currentDate)
        const time = currentDate.toTimeString().split(' ')[0].slice(0, 5)
        setShow(Platform.OS === 'ios')
        setDate(currentDate)
        setValues({
            ...values,
            ['date']: date,
            ['time']: time,
        })
    }

    const showMode = (currentMode) => {
        show ? setShow(false) : setShow(true)
        setMode(currentMode)
    }

    const showDatepicker = () => {
        Keyboard.dismiss()
        showMode('datetime')
    }

    return (
        <Container>
            <Content style={{ paddingLeft: 20, paddingRight: 20 }}>
                <Form>
                    <Item picker style={{ borderWidth: 0 }} /* floatingLabel */>
                        <Input
                            onChange={handleChange.bind(this, 'dentNumber')}
                            value={values.dentNumber}
                            keyboardType='number-pad'
                            clearButtonMode='while-editing'
                            placeholder='* Номер зуба'
                        />
                    </Item>
                    <Item picker>
                        <Input
                            onChange={handleChange.bind(this, 'diagnosis')}
                            value={values.diagnosis}
                            clearButtonMode='while-editing'
                            placeholder='* Диагноз'
                        />
                    </Item>
                    <Item picker>
                        <Input
                            onChange={handleChange.bind(this, 'description')}
                            value={values.description}
                            multiline
                            clearButtonMode='while-editing'
                            placeholder='Подробное описание или заметка'
                            style={{ paddingTop: 15, paddingBottom: 15 }}
                        />
                    </Item>
                    <Item picker>
                        <Input
                            onChange={handleChange.bind(this, 'price')}
                            value={values.price}
                            keyboardType='number-pad'
                            clearButtonMode='while-editing'
                            placeholder='* Цена'
                        />
                    </Item>

                    <ButtonRN onPress={showDatepicker}>
                        <Text style={{ fontSize: 18, fontWeight: '400' }}>
                            Дата: {formatDate(date)}, время: {date.toTimeString().split(' ')[0].slice(0, 5)}
                        </Text>
                    </ButtonRN>

                    {show && (
                        <DateTimePicker
                            timeZoneOffsetInSeconds={21600}
                            minimumDate={new Date()}
                            value={date}
                            mode={mode}
                            is24Hour={true}
                            display='default'
                            locale='ru-RU'
                            minuteInterval={10}
                            onChange={onChange}
                        />
                    )}

                    <ButtonView>
                        <Button
                            onPress={submitHandler}
                            rounded
                            block
                            iconLeft
                            style={{ backgroundColor: '#84D269' }}
                        >
                            <Icon type='Entypo' name='plus' style={{ color: '#fff' }} />
                            <Text style={{ color: '#fff' }}>Добавить прием</Text>
                        </Button>
                    </ButtonView>
                    <Label style={{ marginTop: 10, fontSize: 16 }}>
                        Поля помеченные звездочкой <TomatoText>*</TomatoText> обязательны для заполнения
                    </Label>
                </Form>
            </Content>
        </Container>
    )
}

const ButtonRN = styled.TouchableOpacity({
    paddingTop: 15,
    paddingLeft: 5,
})

const ButtonView = styled.View({
    marginTop: 15,
})

const TomatoText = styled.Text({
    color: 'tomato',
})

export default AddAppointmentScreen

3 Answers 3

0

I have not gone through your code but I can tell you how can you pass params to next screen as per your heading.

  toNavigate = (user) => {

    this.setState({ isLoading: false },
        () => { this.props.navigation.push('Main', { userData: user }) })
//I am sending user into userData to my Main screen
}

And I am receive it like

render(){
 user = this.props.route.params.userData;
 }

If any issue let me know.

Hope it helps!!!

0

This can be done using the useNavigation hook as you are inside the Navigation Container.

import { NavigationContainer, useNavigation } from '@react-navigation/native';
const HeaderRight = ({ navigation, target }) => {
  const navigation = useNavigation();
    return (
        <Button transparent onPress={() => navigation.navigate(target)}>
            <Icon name='plus' type='Entypo' style={{ fontSize: 26 }} />
        </Button>
    )
}

And you have to pass the target like below, as navigation is not accessible from there there is no point on passing that anyway.

headerRight: () => <HeaderRight target={'Profile'} />,

Hope this helps.

0

I solved it like this:

  1. getting params in StackScreen - you need to pass to options route and navigation, and then you can get the route params like below:
    <Stack.Screen
        name='Patient'
        component={PatientScreen}
        options={({ route, navigation }) => {
            return {
                title: 'Карта пациента',
                headerTintColor: '#2A86FF',
                headerTitleAlign: 'center',
                headerTitleStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                },
                headerBackTitleVisible: false,
                headerRight: () => (
                    <HeaderRight target={'AddAppointment'} patientId={route.params.patientId} />
                ),
            }
        }}
    />
  1. then I get patientId in HeaderRight component and pass it to new screen, with second parameter with navigation like this (of course there is option to not use this component and pass it from Stack.Screen, but I did it to my own purpose):
const HeaderRight = ({ patientId, target }) => {
      const navigation = useNavigation()

      return (
        <Button transparent onPress={() => navigation.navigate(target, { patientId })}>
          <Icon name='plus' type='Entypo' style={{ fontSize: 26 }} />
        </Button>
      )
}
  1. I get patientId in this third screen like below:

patientId: route.params?.patientId ?? '',

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.