CODEWITHSUNDEEP
react-native
rfii
rfii

Reputation: 593

How to dismiss the keyboard when a FlatList is scrolled in React Native?

I've seen other people asking about trying to get the keyboard to stay or act in other ways, but I would like the keyboard to be dismissed when a user begins scrolling a FlatList. Apparently, ScrollView has a property keyboardDismissMode that would do the trick but I need a FlatList. I also saw that wrapping the FlatList in a ScrollView will cause the FlatList to render improperly and is not recommended here. Any other way to do this? In my case there is a text input at the top with a flatview below it.

Upvotes: 2

Views: 2707

Answers (2)

Pramod
Pramod

Reputation: 1940

Need to first find when the flatlist is scrolling

When scrolling starts then just dismiss the keyboard

Working Example: https://snack.expo.io/@msbot01/biased-kiwi

import * as React from 'react';

import { View, Text, Image, FlatList, TextInput, Keyboard } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fb5d91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1465571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed65-3ad753abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f68-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed56-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1455716e29d72',
    title: 'Third Item',
  },
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53a6bb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa697f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d672',
    title: 'Third Item',
  },

  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb268ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91a6a97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-1455716e29d72',
    title: 'Third Item',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  

  onChangeText(e){
    this.setState({
      value: e
    })
  }

  renderItem(item) {
    return (
      <View style={{ width: '100%', marginTop: 10}}>
        <Text style={{ width: '100%' }}>{item.title} </Text>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={(text) => {this.onChangeText(text)}}
          value={this.state.value}
        />
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1, padding:10 }}>
        <FlatList
          onScrollBeginDrag={() => Keyboard.dismiss()}
          contentContainerStyle={{ flexGrow: 1 }}
          data={DATA}
          renderItem={({ item }) => this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
}

Upvotes: 3

HenriDev
HenriDev

Reputation: 677

I think you can use the build-in Keyboard api of react native and just call it upon a onScroll event like below.

import React from 'react';
import { Keyboard, FlatList } from 'react-native';

<FlatList
        onScrollEndDrag={() => Keyboard.dismiss() }
        onScrollBeginDrag={() => Keyboard.dismiss() }/>

Upvotes: 3

Related Questions