react-native#Keyboard JavaScript Examples

componentDidMount() {
    this.ref.focus();
    this.keyboardWillShowSub = Keyboard.addListener(
      'keyboardDidShow',
      this.keyboardDidShow,
    );
    this.keyboardWillHideSub = Keyboard.addListener(
      'keyboardDidHide',
      this.keyboardDidHide,
    );
  }

componentDidMount() {
    Keyboard.addListener("keyboardDidHide", this._handleKeyboardDidHide);
    AppState.addEventListener("change", this._handleAppStateChange);
    setTimeout(() => {
      this.textinput && this.textinput.focus();
    }, 600);
    autorun(() => {
      if (this.inputCode.length == 6) {
        console.log("completion", this.inputCode);
        if (this.props.onCompletion && this.completionCode != this.inputCode) {
          this.completionCode = this.inputCode;
          this.props.onCompletion(this.inputCode);
        }
      }
    });
  }

componentDidMount() {
    if (Platform.OS === 'ios') {
      this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
      this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
    } else {
      this.keyboardWillShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow);
      this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide);
    }
  }

useKeyboard = () => {
  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);

  React.useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardVisible(true);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardVisible(false);
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return isKeyboardVisible;
}

useKeyboardStatus = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [keyboardHeight, setKeyboardHeight] = useState(0);
    const keyboardHideListener = useRef(null);
    const keyboardShowListener = useRef(null);

    const onKeyboardShow = e => {
        setKeyboardHeight(e.endCoordinates.height);
        setIsOpen(true);
    }

    const onKeyboardHide = () => {
        setKeyboardHeight(0);
        setIsOpen(false);
    }

    useEffect(() => {
        keyboardShowListener.current = Keyboard.addListener('keyboardDidShow', onKeyboardShow);
        keyboardHideListener.current = Keyboard.addListener('keyboardDidHide', onKeyboardHide);

        return () => {
            keyboardShowListener.current.remove();
            keyboardHideListener.current.remove();
        };
    },[]);

    return {
        isOpen: isOpen,
        keyboardHeight: keyboardHeight,
        keyboardPlatform: Platform.OS
    };
}

Assets = ({
  selectedAsset, setSelectedAsset, surveyingOrganization, scrollViewScroll, setScrollViewScroll
}) => {
  const [page, setPage] = useState('assetCore');

  const switchAssetPage = (pageIndex, asset) => {
    setPage(pageIndex);
    setSelectedAsset(asset);
  };
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <View>
        {selectedAsset && (
        <NewAssets
          setSelectedAsset={setSelectedAsset}
          selectedAsset={selectedAsset}
          surveyingOrganization={surveyingOrganization}
          assetPageIndex={page}
          scrollViewScroll={scrollViewScroll}
          setScrollViewScroll={setScrollViewScroll}
          setPage={setPage}
        />
        )}
        {selectedAsset === null && (
        <ViewAssets
          organization={surveyingOrganization}
          switchAssetPage={switchAssetPage}
        />
        )}
      </View>
    </TouchableWithoutFeedback>
  );
}

render() {
    const { visible, page } = this.state;
    return (
      <Modal visible={visible} animationType="slide" presentationStyle="formSheet" onDismiss={this.onClose}>
        <View style={styles.container}>
          <KeyboardAvoidingView
            style={styles.keyboardAvoidingView}
            behavior={Platform.select({ ios: "padding", android: null })}
          >
            <View style={styles.backContainer}>
              <TouchableOpacity onPress={this.onClose}>
                <Text style={styles.backText}>{getCaption("back")}</Text>
              </TouchableOpacity>
            </View>
            <ScrollView
              style={styles.scrollView}
              keyboardDismissMode="on-drag"
              onScrollBeginDrag={Keyboard.dismiss}
            >
              {page === 1 && this.renderFirstPage()}
              {page === 2 && this.renderSecondPage()}
            </ScrollView>
          </KeyboardAvoidingView>
        </View>
      </Modal>
    );
  }

function ContactSellerForm({ listing }) {
	const handleSubmit = async ({ message }, { resetForm }) => {
		Keyboard.dismiss();

		const result = await messagesApi.send(message, listing.id);

		if (!result.ok) {
			console.log("Error", result);
			return Alert.alert(
				"Error",
				"Could not send the message to the seller."
			);
		}

		resetForm();

		Notifications.presentLocalNotificationAsync({
			title: "Awesome!",
			body: "Your message was sent to the seller.",
		});
	};

	return (
		<Form
			initialValues={{ message: "" }}
			onSubmit={handleSubmit}
			validationSchema={validationSchema}
		>
			<FormField
				maxLength={255}
				multiline
				name="message"
				numberOfLines={3}
				placeholder="Message..."
			/>
			<SubmitButton title="Contact Seller" />
		</Form>
	);
}

componentDidMount() {
    Keyboard.addListener('keyboardDidHide', e => {
      this.setState({ showMath: false, currentOp: null });
    });

    const clearOperation = () => this.setState({ currentOp: null });
    const reset = ({ isNegative }) => {
      this.setState({ isNegative, currentOp: null });
    };

    this.props.emitter.on('clear-operation', clearOperation);
    this.props.emitter.on('set-negative', this.setNegative);
    this.props.emitter.on('reset', reset);
    this.cleanup = () => {
      this.props.emitter.off('clear-operation', clearOperation);
      this.props.emitter.off('set-negative', this.setNegative);
      this.props.emitter.off('reset', reset);
    };
  }

export function useKeyboard(config) {
  const { useWillShow = false, useWillHide = false } = config;
  const [visible, setVisible] = useState(false);
  const showEvent = useWillShow ? 'keyboardWillShow' : 'keyboardDidShow';
  const hideEvent = useWillHide ? 'keyboardWillHide' : 'keyboardDidHide';

  function dismiss() {
    Keyboard.dismiss();
    setVisible(false);
  }

  useEffect(() => {
    function onKeyboardShow() {
      setVisible(true);
    }

    function onKeyboardHide() {
      setVisible(false);
    }

    Keyboard.addListener(showEvent, onKeyboardShow);
    Keyboard.addListener(hideEvent, onKeyboardHide);

    return () => {
      Keyboard.removeListener(showEvent, onKeyboardShow);
      Keyboard.removeListener(hideEvent, onKeyboardHide);
    };
  }, [useWillShow, useWillHide]);

  return [visible, dismiss];
}

componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
    this.checkIsHideDeletedEnabled();
  }

useKeyboardHeight = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', e => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });
    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, [setKeyboardHeight]);

  return keyboardHeight;
}

componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
    this.checkRestrictions();
  }

componentDidMount() {
    this.ref.focus();
    this.keyboardWillShowSub = Keyboard.addListener(
      'keyboardDidShow',
      this.keyboardDidShow,
    );
    this.keyboardWillHideSub = Keyboard.addListener(
      'keyboardDidHide',
      this.keyboardDidHide,
    );
  }

OfflineData = ({ surveyingOrganization, scrollViewScroll, setScrollViewScroll }) => {
  const [inputs, setInputs] = useState({});
  const [cacheSuccess, setCacheSuccess] = useState(false);
  const [submittedForms, setSubmittedForms] = useState(0);
  const { populateResidentDataCache, isLoading } = useContext(OfflineContext);

  useEffect(() => {
    setInputs(configArray);
  }, [configArray]);

  const repopulateAllData = async () => populateResidentDataCache().then((records) => {
    setSubmittedForms(records.length);
    setCacheSuccess(true);
  });

  return (
    <View>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <Formik
          initialValues={{}}
          onSubmit={async (values) => {
            await cacheResidentDataMulti(values.communityname);
            await getData('residentData').then((forms) => {
              setSubmittedForms(Object.keys(forms).length);
              setCacheSuccess(true);
            });
          }}
        >
          {(formikProps) => (
            <View style={layout.formContainer}>
              <PaperButton
                onPressEvent={repopulateAllData}
                buttonText="Populate all ID Forms"
                loading={!!isLoading}
                style={{ backgroundColor: 'blue' }}
              />
              {inputs.length && inputs.map((result) => (
                <View key={result.formikKey}>
                  <PaperInputPicker
                    data={result}
                    formikProps={formikProps}
                    surveyingOrganization={surveyingOrganization}
                    scrollViewScroll={scrollViewScroll}
                    setScrollViewScroll={setScrollViewScroll}
                    customForm={false}
                  />

                </View>
              ))}
              <PaperButton
                onPressEvent={formikProps.handleSubmit}
                buttonText={_.isEmpty(formikProps.values) ? I18n.t('global.emptyForm') : I18n.t('global.submit')}
                disabled={!!_.isEmpty(formikProps.values)}
                icon={_.isEmpty(formikProps.values) ? 'alert-octagon' : 'plus'}
                style={{ backgroundColor: _.isEmpty(formikProps.values) ? '#FFDDDD' : 'green' }}
              />
              <PaperButton
                onPressEvent={() => deleteData('residentData')}
                buttonText="Clear Cached ID Forms"
                icon="delete"
                style={{ backgroundColor: 'red' }}
              />
              <PopupSuccess
                success={cacheSuccess}
                setSuccess={setCacheSuccess}
                submittedForms={submittedForms}
              />
            </View>
          )}
        </Formik>
      </TouchableWithoutFeedback>
    </View>
  );
}

componentDidMount() {
    if (ACTScrollViewManager) {
      ACTScrollViewManager.activate(
        (this.list.getNode
          ? this.list.getNode()
          : this.list
        ).getScrollableNode()
      );
    }

    const removeFocus = this.props.navigation.addListener('focus', () => {
      if (ACTScrollViewManager) {
        ACTScrollViewManager.activate(
          (this.list.getNode
            ? this.list.getNode()
            : this.list
          ).getScrollableNode()
        );
      }
    });

    const keyboardWillHide = (e) => {
      if (ACTScrollViewManager) {
        ACTScrollViewManager.setFocused(-1);
      }
      this.onEditCategory(null);
    };

    let keyListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      keyboardWillHide
    );

    let emitter = this.context;
    emitter.on('done', this.onKeyboardDone);
    emitter.on('moveUp', this.onMoveUp);
    emitter.on('moveDown', this.onMoveDown);

    this.cleanup = () => {
      removeFocus();
      keyListener.remove();

      emitter.off('done', this.onKeyboardDone);
      emitter.off('moveUp', this.onMoveUp);
      emitter.off('moveDown', this.onMoveDown);
    };
  }

Index = ({ songs }) => {
	const { goBack } = useNavigation();
	const [audios, setAudios] = useState([]);
	const [search, setSearch] = useState('');

	const handleInput = (val) => {
		const value = val.replace('  ', ' ');
		setSearch(value);
		if (value.length > 3) {
			const results = songs.filter((song) => {
				let regex = new RegExp(value, 'ig');
				return regex.exec(song?.title) || regex.exec(song?.author);
			});

			setAudios(results);
		} else {
			setAudios([]);
		}
	};

	return (
		<>
			<StatusBar style="dark" />
			<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
				<SafeAreaView style={styles.container}>
					<View style={styles.header}>
						<View style={styles.input}>
							<Icon name="search" color="#FFF" />
							<TextInput style={styles.textInput} onChangeText={handleInput} value={search} returnKeyType="search" placeholder="Search..." />
						</View>
						<TouchableOpacity style={styles.btn} onPress={() => goBack()}>
							<Text style={styles.btnTxt}>Cancel</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.result}>
						{audios.length > 0 ? (
							<Section.MusicList audios={audios} />
						) : (
							<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
								<Text style={{ fontSize: 24, fontWeight: 'bold', color: 'rgba(0, 0, 0, .3)' }}>Search something...</Text>
							</View>
						)}
					</View>
				</SafeAreaView>
			</TouchableWithoutFeedback>
		</>
	);
}

componentWillUnmount() {
    Keyboard.removeListener("keyboardDidHide", this._handleKeyboardDidHide);
    AppState.removeEventListener("change", this._handleAppStateChange);
  }

Supported = ({ navigation }) => {
  const [contribution, setContribution] = useState("");
  const [npsSent, setNpsSent] = useState(false);
  const [sendButton, setSendButton] = useState("Valider");

  const sendNPS = async () => {
    if (npsSent) {
      return;
    }
    const { useful, reco, feedback, email } = this.state;
    setSendButton("Merci !");
    logEvents.logNPSSend(useful, reco);
    const userId = Matomo.userId;
    sendTipimail(
      {
        from: {
          address: "[email protected]",
          personalName: "Ma Tête et Moi - Application",
        },
        subject: "Ma Tête et Moi - NPS",
        text: formatText(useful, reco, feedback, email, userId),
      },
      __DEV__ ? "[email protected]" : "[email protected]"
    );
    this.npsSent = true;
    this.setState({ visible: false });
  };

  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView style={styles.container} keyboardDismissMode="on-drag" onScrollBeginDrag={Keyboard.dismiss}>
        <BackButton />
        <View style={styles.header}>
          <Text style={styles.title}>Ma Tête et Moi</Text>
          <Text style={styles.title}>Nous vous écoutons :</Text>
        </View>
        <View style={styles.textArea}>
          <TextInput
            multiline={true}
            numberOfLines={6}
            onChangeText={setContribution}
            value={contribution}
            placeholder="Message..."
            textAlignVertical="top"
          />
        </View>
        <View style={styles.buttonWrapper}>
          <Button onPress={sendNPS} title={sendButton} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

render() {
    const userList = [...this.state.userList];
    const userListWithHeaders = [];
    let headerIndices = [0];
    if (userList.length) {
      headerIndices = [];
      userList.forEach((user) => {
        const chr = user.name[0].toUpperCase();
        if (chr !== this.currentLetter) {
          this.currentLetter = chr;
          if (!this.state.textInputValue) {
            headerIndices.push(userListWithHeaders.length);
            userListWithHeaders.push({
              value: this.currentLetter,
              header: true,
            });
          }
          userListWithHeaders.push({ value: user, header: false });
        } else {
          userListWithHeaders.push({ value: user, header: false });
        }
      });
    }

    return (
      <CometChatContextProvider ref={(el) => (this.contextProviderRef = el)}>
        <TouchableWithoutFeedback
          onPress={() => {
            Keyboard.dismiss();
          }}>
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={style.contactWrapperStyle}>
            <View style={style.headerContainer}></View>
            {this.listHeaderComponent()}
            <FlatList
              data={userListWithHeaders}
              renderItem={this.renderUserView}
              contentContainerStyle={{ flexGrow: 1 }}
              ListEmptyComponent={this.listEmptyContainer}
              ItemSeparatorComponent={this.itemSeparatorComponent}
              keyExtractor={(item, index) => item.uid + '_' + index}
              stickyHeaderIndices={
                Platform.OS === 'android' ? null : headerIndices
              }
              onScroll={this.handleScroll}
              onEndReached={this.endReached}
              onEndReachedThreshold={0.3}
              showsVerticalScrollIndicator={false}
            />
            <DropDownAlert ref={(ref) => (this.dropDownAlertRef = ref)} />
          </KeyboardAvoidingView>
        </TouchableWithoutFeedback>
      </CometChatContextProvider>
    );
  }

RootContainerScreen = () => {
  const sendNetworkFail = useSelector(state => state.sendNetworkFail);
  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const dispatch = useDispatch();
  const clearNetworkStatus = () => dispatch(clearNetworkFail());

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      e => {
        setIsKeyboardShow(true);
        setKeyboardHeight(e.endCoordinates.height);
      },
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setIsKeyboardShow(false);
      },
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  if (sendNetworkFail.err) {
    switch (sendNetworkFail.err) {
      case 'NETWORK_ERROR':
        Toast.show('No network connection, please try again');
        break;
      case 'TIMEOUT_ERROR':
        Toast.show('Timeout, please try again');
        break;
      case 'CONNECTION_ERROR':
        Toast.show('DNS server not found, please try again');
        break;
      default:
        Toast.show(sendNetworkFail.err);
        break;
    }
    clearNetworkStatus();
  }

  return (
    <View style={styles.mainContainer}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Drawer" headerMode={'none'}>
          <Stack.Screen name="Drawer" component={DrawerNavigatorScreen} />
          <Stack.Screen
            name="DetailProfileScreen"
            component={DetailProfileScreen}
            options={{gestureEnabled: true, gestureDirection: 'horizontal'}}
          />
          <Stack.Screen
            name="DetailFollowerScreen"
            component={DetailFollowerScreen}
            options={{gestureEnabled: true, gestureDirection: 'horizontal'}}
          />
        </Stack.Navigator>
      </NavigationContainer>

      {/*Keyboard padding*/}
      {isKeyboardShow && Platform.OS === 'ios' ? (
        <View style={{height: keyboardHeight}} />
      ) : null}
    </View>
  );
}

function SearchBox({ onChangeFocus }) {
  const [value, setValue] = React.useState('')
  const [isFocus, setFocus] = React.useState(false)

  React.useEffect(() => {
    onChangeFocus(isFocus)
  }, [isFocus, onChangeFocus])

  const onCancel = () => {
    setFocus(false)
    Keyboard.dismiss()
  }
  const onClear = () => {
    setValue('')
  }

  return (
    <Box flexDirection="row" alignItems="center">
      <Box position="relative" flex={1}>
        <Input
          style={{
            shadowColor: '#000',
            shadowOpacity: 0.1,
            shadowRadius: 24,
            shadowOffset: {
              width: 0,
              height: 4
            }
          }}
          bg="white"
          height={52}
          color="textDark"
          borderWidth={1}
          borderColor={isFocus ? '#D1D1D1' : 'transparent'}
          placeholder="Türkçe Sözlük’te Ara"
          placeholderTextColor="textMedium"
          pl={52}
          borderRadius="normal"
          value={value}
          onFocus={() => setFocus(true)}
          onChangeText={text => setValue(text)}
        />
        {value.length > 0 && (
          <Button onPress={onClear} position="absolute" right={16} top={14}>
            <Close color={theme.colors.textDark} />
          </Button>
        )}
        <Button position="absolute" left={16} top={14}>
          <Search color={theme.colors.textMedium} />
        </Button>
      </Box>
      {isFocus && (
        <Button onPress={onCancel} px={15} height={52}>
          <Text>Vazgeç</Text>
        </Button>
      )}
    </Box>
  )
}

export default function AndroidKeyboardAvoidingView({
  children,
  behavior = 'height',
  enabled = true,
  keyboardVerticalOffset = 0,
  includeStatusBar,
  style
}) {
  let [keyboard, setKeyboard] = useState(false);
  let [accessoryId, setAccessoryId] = useState(null);

  useEffect(() => {
    let cleanups = [
      Keyboard.addListener('keyboardDidShow', e => {
        setKeyboard(true);
      }),
      Keyboard.addListener('keyboardDidHide', e => {
        setKeyboard(false);

        // TODO: This is wrong. In Android, the user can hide the
        // keyboard and bring it back up again all while never losing
        // focus of the input. This means we'll render the accessory
        // view the first time but never again. Need to figure out a
        // better solution.
        setAccessoryId(null);
      })
    ];

    return () => cleanups.forEach(handler => handler.remove());
  }, []);

  return (
    <AccessoryIdContext.Provider value={setAccessoryId}>
      <KeyboardAvoidingView
        style={[{ flex: 1 }, style]}
        behavior={behavior}
        keyboardVerticalOffset={
          keyboardVerticalOffset +
          (includeStatusBar ? StatusBarHeight.statusBarHeight : 0)
        }
        enabled={enabled}
      >
        <>
          {children}
          {keyboard && accessoryId && renderAccessoryView(accessoryId)}
        </>
      </KeyboardAvoidingView>
    </AccessoryIdContext.Provider>
  );
}

componentDidMount() {
    InteractionManager.addListener('interactionStart', () => {
      Keyboard.dismiss();
    });
    this.focusListener = this.props.navigation.addListener('didFocus', this.setInputFocus);
  }

Feedback = () => {
  const navigation = useNavigation()
  const { t } = useTranslation()
  const { theme } = useTheme()

  const sendEmailHandler = ({ name, email, message }) => {
    const data = JSON.stringify({ name, email, message }).replace(/[{}'']/g, '')

    fetch('https://api.sendgrid.com/v3/mail/send', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + process.env.API_SEND_GRID_KEY
      },
      body: JSON.stringify({
        personalizations: [
          {
            to: [
              {
                email: process.env.SEND_GRID_EMAIL_TO
              }
            ],
            subject: 'Bus Timetable Feedback'
          }
        ],
        from: {
          email: process.env.SEND_GRID_EMAIL_FROM
        },
        content: [
          {
            type: 'text/plain',
            value: data
          }
        ]
      })
    })
      .then(() => {
        Alert.alert('', t('feedback.onSuccessfulSubmit'), [
          {
            text: t('feedback.cancel'),
            onPress: () => navigation.navigate('About')
          }
        ])
      })
      .catch(() => {
        Alert.alert(t('feedback.error'), t('feedback.onSubmitError'), [
          { text: t('feedback.cancel') }
        ])
      })
  }

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <Text style={[styles.info, { color: theme.text }]}>
          {t('feedback.info')}
        </Text>
        <ScrollView style={styles.form}>
          <Form
            onSubmitHandler={sendEmailHandler}
            namePlaceholder={t('feedback.namePlaceholder')}
            emailPlaceholder={t('feedback.emailPlaceholder')}
            messagePlaceholder={t('feedback.messagePlaceholder')}
            submitTitle={t('feedback.submitTitle')}
            schemaRequiredName={t('feedback.schemaRequiredName')}
            schemaRequiredEmail={t('feedback.schemaRequiredEmail')}
            schemaRequiredMessage={t('feedback.schemaRequiredMessage')}
            buttonColor={theme.buttonColor}
            buttonText={theme.buttonText}
          />
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  )
}

componentDidMount() {
    this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide);
  }

RedeemCodeDialog = memo(({ navigation }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const redeemCodeDialogVisible = useStore(useCallback(state => state.redeemCodeDialogVisible))
    const setRedeemCodeDialogVisible = useStore(useCallback(state => state.setRedeemCodeDialogVisible))
    const [value, setValue] = useState("")
    const inputRef = useRef()
    const [buttonsDisabled, setButtonsDisabled] = useState(false)
    const [lang, setLang] = useMMKVString("lang", storage)

    useEffect(() => {
        setButtonsDisabled(false)

        if(!redeemCodeDialogVisible){
            setTimeout(() => {
                setValue("")
            }, 250)
        }

        if(redeemCodeDialogVisible){
            setTimeout(() => {
                inputRef.current.focus()
            }, 250)
        }
    }, [redeemCodeDialogVisible])

    return (
        <Dialog.Container
            visible={redeemCodeDialogVisible}
            useNativeDriver={false}
            onRequestClose={() => setRedeemCodeDialogVisible(false)}
            onBackdropPress={() => {
                if(!buttonsDisabled){
                    setRedeemCodeDialogVisible(false)
                }
            }}
        >
            <Dialog.Title>{i18n(lang, "redeemACode")}</Dialog.Title>
            <Dialog.Input placeholder={i18n(lang, "code")} value={value} autoFocus={true} onChangeText={(val) => setValue(val)} textInputRef={inputRef} />
            <Dialog.Button label={i18n(lang, "cancel")} disabled={buttonsDisabled} onPress={() => setRedeemCodeDialogVisible(false)} />
            <Dialog.Button label={i18n(lang, "redeem")} disabled={buttonsDisabled} onPress={() => {
                setButtonsDisabled(true)
                setRedeemCodeDialogVisible(false)

                Keyboard.dismiss()

                useStore.setState({ fullscreenLoadingModalVisible: true })

                const code = value.trim()

                if(code.length == 0){
                    return false
                }

                redeemCode({ code }).then(() => {
                    setButtonsDisabled(false)

                    DeviceEventEmitter.emit("event", {
                        type: "reload-account-info"
                    })

                    DeviceEventEmitter.emit("event", {
                        type: "reload-account-usage"
                    })

                    useStore.setState({ fullscreenLoadingModalVisible: false })

                    showToast({ message: i18n(lang, "codeRedeemSuccess", true, ["__CODE__"], [code]) })
                }).catch((err) => {
                    setButtonsDisabled(false)

                    useStore.setState({ fullscreenLoadingModalVisible: false })

                    showToast({ message: err.toString() })
                })
            }} />
        </Dialog.Container>
    )
})

export default function TopComponent(props){
  const { scrollable, containerPadding, children, style, ...otherProps } = props;

  const { name, colors } = useTheme();
  const memoizedStyle = useMemo(() => styles(colors), [name]);

  const [screenHeight, setScreenHeight] = useState(Scalling.height);
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  const onContentSizeChange = (contentWidth, contentHeight) => {
    setScreenHeight(contentHeight);
  };

  useEffect(() => {
    function onKeyboardShow(event) {
      const { endCoordinates: { height }} = event;

      setKeyboardHeight(height);
    }

    function onKeyboardHide() {
      setKeyboardHeight(0);
    }

    Keyboard.addListener('keyboardDidShow', onKeyboardShow);
    Keyboard.addListener('keyboardDidHide', onKeyboardHide);

    return () => {
      Keyboard.removeListener('keyboardDidShow', onKeyboardShow);
      Keyboard.removeListener('keyboardDidHide', onKeyboardHide);
    };
  });

  return (
    <View
      style={{
        ...memoizedStyle.container,
        ...style,
      }}
      {...otherProps}
    >
      { scrollable && renderScrollableContent(containerPadding, children, screenHeight, keyboardHeight, onContentSizeChange, memoizedStyle)}
      { ! scrollable && renderContent(containerPadding, children, memoizedStyle)}
    </View>
  );
}

render() {

      markConversationAsRead(this.state.address);

       const { t } = this.props;

       const items = [];

       for (message in this.state.messages) {
         if (this.state.address == this.state.messages[message].conversation){
           let timestamp = this.state.messages[message].timestamp / 1000;
           if (this.state.messages[message].type == 'received'){
              items.push(<View  key={message} style={{alignSelf: 'flex-start', marginLeft: 20, marginRight: 20, marginBottom: 20, backgroundColor: '#2C2C2C', padding: 15, borderRadius: 15}}><Text selectable style={{ fontFamily: "Montserrat-Regular", fontSize: 15 }} >{this.state.messages[message].message}</Text><Moment locale={Globals.language} style={{ fontFamily: "Montserrat-Regular", fontSize: 10, marginTop: 5 }} element={Text} unix fromNow>{timestamp}</Moment></View>)
           } else {
             items.push(<View  key={message} style={{alignSelf: 'flex-end', marginLeft: 20, marginRight: 20, marginBottom: 20, backgroundColor: '#006BA7', padding: 15, borderRadius: 15}}><Text selectable style={{ fontFamily: "Montserrat-Regular", fontSize: 15 }} >{this.state.messages[message].message}</Text><Moment locale={Globals.language} style={{ fontFamily: "Montserrat-Regular", fontSize: 10, marginTop: 5 }} element={Text} unix fromNow>{timestamp}</Moment></View>)
           }

       }
       }


           const submitMessage = async (text) => {

             Keyboard.dismiss();

             let updated_messages = await getMessages();
             if (!updated_messages) {
               updated_messages = [];
             }
             let temp_timestamp = Date.now();
             updated_messages.push({
                 conversation: this.state.address,
                 type: 'sent',
                 message: checkText(text),
                 timestamp: temp_timestamp
             });

             this.setState({
               messages: updated_messages,
               messageHasLength: false
             });

             this.state.input.current.clear();

             this.setState({messageHasLength: this.state.message.length > 0});

             let success = await sendMessage(checkText(text), this.state.address, this.state.paymentID);
             await removeMessage(temp_timestamp);
             if (success) {
             let updated_messages = await getMessages();

               this.setState({
                 messages: updated_messages,
                 messageHasLength: false
               })
               // this.state.input.current.clear();
             }
           }


        return(
            <View style={{
                flex: 1,
                backgroundColor: this.props.screenProps.theme.backgroundColour,
                alignItems: 'center',
                paddingLeft: 10
            }}>

                <View style={{
                    alignItems: 'center',
                    marginHorizontal: 30,
                }}>
                    <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        marginTop: 5,
                        marginLeft: 'auto'
                    }}>
                        <Image
                          style={{width: 50, height: 50}}
                          source={{uri: get_avatar(this.state.address)}}
                        />
                        <Text onPress={() => {
                            this.props.navigation.navigate(
                                'ModifyPayee', {
                                    payee: this.props.navigation.state.params.payee,
                                }
                            );
                        }} style={{ fontSize: 18, color: this.props.screenProps.theme.primaryColour, fontFamily: 'Montserrat-SemiBold' }}>
                            {this.state.nickname}
                        </Text>
                    </View>
                </View>

                <View style={{
                    width: '100%',
                    alignItems: 'center',
                }}>

                </View>

                <ScrollView
                    showsVerticalScrollIndicator={false}
                    style={{
                        marginRight: 30,
                        marginBottom: 0,
                        width: '100%',
                        height: '80%',
                    }}
                    ref={ref => {this.scrollView = ref}}
                    onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}
                >

                {items}

                </ScrollView>

                <KeyboardAvoidingView
                 behavior={Platform.OS == "ios" ? "padding" : "height"}
                 style={{
                    marginHorizontal: 10,
                    marginBottom: 5,
                    flexDirection: 'row'
                }}>
                <View
                style={{
                    width: this.state.messageHasLength ? '80%' : '100%',
                      backgroundColor: 'rgba(0,0,0,0.2)',
                      borderWidth: 0,
                      borderColor: 'transparent',
                      borderRadius: 15,
                      height: 50
                  }}
                >
                <TextInput
                    multiline={true}
                    textAlignVertical={'top'}
                    ref={this.state.input}
                    style={{
                        color: this.props.screenProps.theme.primaryColour,
                        fontFamily: 'Montserrat-Regular',
                        fontSize: 15,
                        width: '100%',
                        height: '100%',
                        padding: 15,

                    }}
                    maxLength={Config.integratedAddressLength}
                    placeholder={t('typeMessageHere')}
                    placeholderTextColor={'#ffffff'}
                    onSubmitEditing={async (e) => {
                      e.preventDefault();
                        // return;
                        // submitMessage(this.state.message);
                        // this.setState({message: '', messageHasLength: false});
                    }}
                    onChangeText={(text) => {
                        if (this.props.onChange) {
                            this.props.onChange(text);
                        }
                        this.state.message = text;
                        this.setState({messageHasLength: this.state.message.length > 0});
                    }}
                    errorMessage={this.props.error}
                />
                </View>
                {this.state.messageHasLength &&

                    <Button
                        title={t('send')}
                        onPress={() => {
                          submitMessage(this.state.message);
                          this.setState({message: '', messageHasLength: false});
                        }}
                        titleStyle={{

                        }}
                        type="clear"
                    />

                }



            </KeyboardAvoidingView>
            </View>
        );
    }