Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to write proper `Keyboard.addListener` in React Native with TypeScript?

$
0
0

I am rewriting a tutorial to TypeScript.

It should console.log after componentDidMount, but it doesn't. It doesn't show any error either.

What am I doing wrong?

Here's my code (minimized it for you):

import React from 'react';
import { View, Text, Animated, Keyboard } from 'react-native';

export class Logo extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(`Hey, I am mounted!`);

    this.keyboardDidShowListener = Keyboard.addListener(
      `Keyboard will show`,
      this.keyboardWillShow
    );

    this.keyboardDidHideListener = Keyboard.addListener(
      `Keyboard will hide`,
      this.keyboardWillHide
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  keyboardWillShow = () => {
    console.log(`Keyboard shows`);
  };

  keyboardWillHide = () => {
    console.log(`Keyboard hides`);
  };

  render() {
    return (
      <View>
        <Text>
          Type the amount right here
        </Text>
      </View>
    );
  }
}

Please help.

Tutorial code here: https://github.com/HandlebarLabs/currency-converter-starter/blob/module-3-lesson-10-animation/app/components/Logo/Logo.js


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>