Keyboard is being dismissed on outside touch and onPress() is not working for the first time

Question

I am using Agenda from wix/react-native-calendars. In my container, I have one button,on click of which opens Modal and one TextInput from native-paper. When I click the button when keyboard is opened onPress() of button is not working but when I press button for the second time, it is working properly and also keyboard is being dismissed on outside touch.How to make the button's onPress() to work on first click?


import React, { useEffect,useState, useRef } from 'react'
import {
    StyleSheet, Modal, Pressable,
    TouchableOpacity, Keyboard, Text, View
} from 'react-native'
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
import { useIsFocused } from "@react-navigation/native";
import { TextInput, RadioButton } from 'react-native-paper';

                 <View
                    style={
                        {
                            justifyContent: 'center',
                            alignItems: 'center',
                            padding: 10,
                            marginRight: 10,
                            marginTop: 17,
                            backgroundColor: 'white',
                            borderRadius: 10,
                            shadowColor: "#000",
                            shadowOffset: {
                                width: 0,
                                height: 6,
                            },
                            shadowOpacity: 0.39,
                            shadowRadius: 8.30,

                            elevation: 13,
                        }
                    }>

                    <TouchableOpacity

                        style={{
                            padding: 8,
                            backgroundColor: 'orange',
                            borderRadius: 5,
                            marginBottom: 10
                        }}
                        onPress={() => dayClicked(item)}>

                        <Text style={{ padding: 3, }}>
                            Add Event to this date
                    </Text>
                    </TouchableOpacity>
                    <Text
                        style={{
                            color: 'brown'
                        }}>{item.name}</Text>
                    <Text
                        style={{
                            marginTop: 20,
                            color: 'brown'
                        }}>{item.name1}</Text>

                    <TextInput
                        value={eventName}
                        onChangeText={(value) => setEventName(value)}
                        style={{ marginTop: 30, width: '100%' }}
                        label="Name of the event"
                        placeholder="Enter name of the event"
                        returnKeyType="done"

                    />

                </View>

Thanks in Advance.

score 0 · Answer 1 · answered Mar 22 '21 at 19:59

0

You should encapsulate the data in scrollview and use this property.

<View>
      <ScrollView keyboardShouldPersistTaps='always'>
      ...
      </ScrollView>
</View>

answered Mar 22 '21 at 19:59

ankit

154
1
11

Thanks @ankit for the answer. I have changed the code and wrapped it with Scrollview but it's still not working. – StackOverflow Asker Mar 22 '21 at 20:28
@StackOverflowAsker Is this component being wrapped in another parent scrollview component? – ankit Mar 23 '21 at 03:07
That component is in react-native-calendars Agenda renderitem. – StackOverflow Asker Mar 23 '21 at 04:24

Keyboard is being dismissed on outside touch and onPress() is not working for the first time

1 Answers1